바닥 글에 CSS 및 JS 포함을 추가하는 마 젠토

Magento 사이트에서 Yslow 최적화를 수행하고 CSS와 J를 사이트 바닥 글에 추가하려고합니다.

현재 레이아웃 XML에서 헤드 참조 태그를 사용 addJs하고 addCss모든 파일을 포함하기 위해 및 작업을 사용 하고 있습니다. 머리글 참조를 바닥 글로 바꾸려고했지만 사이트를 보려고 할 때 오류가 발생했습니다. 이 작업을 수행하는 방법이 local.xml 있습니까 아니면 바닥 글 템플릿 파일 자체에서 하드 코딩해야합니까?

나는 이것이 당신의 질문에 대한 답변이 아니라 당신이 고려하고 싶을 수도 있다는 것을 알고 있습니다.

Magento는 특히 제품 상세 페이지에서 많은 인라인 자바 스크립트를 사용합니다. 그 자바 스크립트는 헤더에로드 된 외부 스크립트에 의존하기 때문에 모든 인라인 스크립트를 외부 파일로 옮기고 바닥 글에 추가해야합니다.

Magento에 내장 된 도구로 CSS와 JS를 압축하고 gzip 압축 및 원거리 만료 헤더를 사용하여 속도를 높이면 더 빠르고 더 나아질 수 있습니다. 이렇게하면 기본 Magento 및 타사 확장 레이아웃을 변경할 필요없이 자바 스크립트 및 CSS로 인한 '지연'이 최소로 유지됩니다. 이렇게하면 Magento 또는 확장을 업그레이드 할 때 모든 작업을 다시 실행할 필요가 없습니다.

HTML5 상용구 프로젝트에서 제공하는 .htaccess는이 gzip 압축 및 원거리 만료 헤더를 제공합니다. http://inchoo.net/ecommerce/magento/magento-boilerplate/를 확인하십시오.

첫 번째 단계는 기본적으로 "head"와 동일한 "foot"이라는 블록을 만드는 것이지만 다른 지점에서 출력합니다. 이것을 다음에 추가 할 수 있습니다 page.xml.

    <block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

이제 XML 파일에서이 명령을 사용하여 JS / CSS를 추가 할 수 있습니다 (바닥 글의 CSS는 권장되지 않음).

    <reference name="foot">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/somefile.js</name>
        </action>
        <action method="addItem">
            <type>skin_js</type>
            <name>js/main.js</name>
        </action>
    </reference>

내부 page/html/foot.phtml:

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

페이지 템플릿 파일 (예 page/1column.phtml:)에서 닫기 body 태그 전에이 블록을 출력해야합니다.

    <?php echo $this->getChildHtml('foot') ?>

기본 Magento 템플릿을 사용하는 경우 JS 오류가 발생합니다. 미니 검색 양식 (예 :)을 사용하십시오 catalogsearch/form.mini.phtml. 이 인라인 스크립트가 있습니다.

<script type="text/javascript">
    //<![CDATA[
    var searchForm = new Varien.searchForm('search_mini_form', 'search', '<?php echo $this->__('Search Redset...') ?>');
    //]]>
</script>

문서가 준비된 핸들러에 없으므로로드되는 즉시 호출됩니다. 변형은 바닥 글에 있으므로 아직 존재하지 않으므로 오류가 발생합니다. 문서 준비 처리기를 추가하거나 이러한 특성의 모든 인라인 JS를 바닥 글에도로드 된 외부 파일로 이동하여이 문제를 해결할 수 있습니다. 이와 같은 문제는 사이트 전체, 특히 결제 및 구성 가능한 제품 페이지에서 발생합니다.

발생할 수있는 다른 문제는 noConflict 모드에서 프로토 타입과 함께 jQuery를 사용하는 경우입니다. 충돌이 발생하지 않도록 프로토 타입 전에 jQuery가로드되어 있는지 확인해야합니다.

Magento v1.6 +의 경우 (이전 버전에서 테스트해야 함);

1- page/html/footer/extras.phtml이 내용으로 템플릿 파일을 만듭니다 .

<?php echo $this->getCssJsHtml() ?>

2-이 html 노드를 레이아웃 xml에 추가하십시오.

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3-그게 다야!