Streszczenie

Chciałbym dodać blok do mojego zgrupowanego widoku produktu i mojego prostego widoku produktu. Ten blok będzie miał kilka fajnych podpowiedzi dla stanów najechania kursorem, używam małej biblioteki z jedną wtyczką jquery i jednym arkuszem stylów css.

Te dwa zasoby chcę umieścić w Magento tylko na tych stronach.

Notatki

• Korzystam z niestandardowego motywu;
• Buforowanie jest wyłączone ; i
• Moje pliki znajdują się w /jskatalogu;

Dotąd…

Niemniej wiedziałem, że jednym ze sposobów jest użycie layout.xmlw moim module, na początku to nie działało, więc pomyślałem, że może potrzebuję dodatkowej konfiguracji, config.xmlaby powiedzieć Magento o moich wymaganiach dotyczących układu - to też nie działało.

By nie działa co mam na myśli to, moje aktywa nie zostały załadowane.

Załączone źródło znajduje się poniżej.

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>

Najpierw należy umieścić plik układu app/design/frontend/{interface}/{theme}/layout/.
Druga. Jeśli chcesz dodać pliki css i js tylko na zgrupowanych i prostych stronach produktu, nie używaj <default>uchwytu układu.
Spraw, aby Twój układ wyglądał następująco:

<?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>

Ponieważ nie zostało to jeszcze wystarczająco wyraźnie zaznaczone:

Katalogi

Pliki XML układu dla niestandardowego modułu powinny być niezależne od motywu, a tym samym umieszczone w

app/design/frontend/base/default/layout

Możesz zastąpić dowolny z tych plików XML w kompozycji niestandardowej, ale w większości przypadków lepiej jest mieć dodatkowy plik układu specyficzny dla kompozycji, który dodaje zmiany. Więcej informacji: Jaki jest prawidłowy sposób / podejście do modyfikacji szablonu Magento?

Nazwy plików

Zauważ, że te pliki są czasami nazywane „plikami layout.xml”, ale layout.xmltak naprawdę nie są to nazwy plików, które zwykle można znaleźć w dowolnym kodzie Magento. Kod działa, jeśli umieścisz layout.xmlplik we właściwej lokalizacji (patrz wyżej), ale konwencja polega na użyciu nazwy modułu pisanej małymi literami:

rating.xml

albo lepiej

vendor_rating.xml

Pamiętaj, że pliki XML układu ze wszystkich modułów znajdują się w jednym katalogu, więc nazwa musi być unikalna!

Twój layout.xml powinien wejść do środka

app / design / frontend / [YOUR CUSTOM PACKAGE] / [YOUR CUSTOM THEME] / layout /

Jak wspomniano powyżej dla twojego konkretnego przypadku, nie powinieneś używać go wewnątrz <default>tagów, ale na przykład możesz dodawać pliki css, które znajdują się w katalogu głównym magento / js w ten sposób app/design/frontend/vendor/theme/layout/local.xmlna przykład:

<?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>