블록에 모듈 layout.xml을 사용하여 <head>에 CSS 및 JS 추가


9

개요

그룹화 된 제품보기 및 간단한 제품보기에 블록을 추가하고 싶습니다. 이 블록에는 호버 상태에 대한 멋진 툴팁이 있습니다. 하나의 jquery 플러그인과 하나의 CSS 스타일 시트가있는 작은 라이브러리를 사용하고 있습니다.

이 두 리소스를이 페이지의 magento에 포함시키고 싶습니다.

노트

  • 사용자 지정 테마를 실행 중입니다.
  • 캐싱이 비활성화되었습니다 . 과
  • 내 파일은 /js디렉토리 안에 있습니다 .

지금까지…

그럼에도 불구하고 layout.xml모듈에서 사용하는 한 가지 방법을 알고 있었지만 처음에는 이것이 작동하지 않았으므로 config.xml레이아웃 요구 사항에 대해 Magento에 알리기 위해 추가 구성이 필요하다고 생각 했습니다.

으로는 작동하지 않았다 , 내 자산이로드되지 않은 어떤 내 말은.

첨부 된 소스를 아래에서 찾으십시오.


app / code / local / Vendor / Rating / etc / layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

app / code / local / Vendor / Rating / etc / config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

답변:


17

먼저 레이아웃 파일이에 배치되어야합니다 app/design/frontend/{interface}/{theme}/layout/.
둘째. 그룹화되고 간단한 제품 페이지에만 css 및 js 파일을 추가하려는 경우 <default>레이아웃 핸들을 사용하지 마십시오 .
레이아웃을 다음과 같이 만드십시오.

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>

대단히 감사합니다. 이것은 의미가 있습니다. 내 config.xml레이아웃 xml 파일의 이름을 정의한 이후로 원하는 것을 호출 할 수 있다고 생각합니다.
ash

@Takingsides. 예. 이름은 원하는대로 될 수 있습니다.
Marius

4

아직 명확하게 지적되지 않았기 때문에 :

디렉토리

사용자 정의 모듈의 레이아웃 XML 파일은 테마와 무관하므로

app/design/frontend/base/default/layout

사용자 정의 테마에서 이러한 XML 파일을 대체 할 수 있지만 대부분의 경우 변경 사항 을 추가 하는 추가 테마 특정 레이아웃 파일을 갖는 것이 좋습니다 . 추가 정보 : Magento 템플릿을 수정하는 올바른 방법 / 접근 방법은 무엇입니까?

파일명

이러한 파일은 "layout.xml 파일"이라고도하지만 layout.xml실제로는 Magento 코드에서 일반적으로 찾을 수있는 파일 이름이 아닙니다. layout.xml파일을 올바른 위치에 배치하면 (위 참조) 코드가 작동 하지만 규칙은 소문자 모듈 이름을 사용하는 것입니다.

rating.xml

또는 더 나은

vendor_rating.xml

모든 모듈의 레이아웃 XML 파일은 하나의 단일 디렉토리에 있으므로 이름은 고유해야합니다!


1

layout.xml이 들어가야합니다.

앱 / 디자인 / 프런트 엔드 / [YOUR CUSTOM 패키지] / [YOUR CUSTOM 테마] / layout /


0

특정 경우에 대해 위에서 언급했듯이 <default>태그 안에 사용해서는 안되지만 예를 들어 루트 magento / js 디렉토리에있는 CSS 파일을 예를 들어 다음과 같이 추가 할 수 있습니다 app/design/frontend/vendor/theme/layout/local.xml.

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.