Hinzufügen von CSS und JS zu <head> mithilfe eines Moduls layout.xml für Block


9

Zusammenfassung

Ich möchte meiner gruppierten Produktansicht und meiner einfachen Produktansicht einen Block hinzufügen. Dieser Block enthält einige nützliche Tooltips für Schwebezustände. Ich verwende eine kleine Bibliothek mit einem JQuery-Plugin und einem CSS-Stylesheet.

Ich möchte diese beiden Ressourcen nur auf diesen Seiten in das Magento aufnehmen.

Anmerkungen

  • Ich verwende ein benutzerdefiniertes Thema.
  • Das Caching ist deaktiviert . und
  • Meine Dateien befinden sich im /jsVerzeichnis.

Bisher…

Trotzdem wusste ich, dass eine Möglichkeit darin bestand, layout.xmlmein Modul zu verwenden. Zuerst funktionierte dies nicht. Ich dachte, ich brauche möglicherweise eine zusätzliche Konfiguration in meinem Modul, config.xmlum Magento über meine Layoutanforderungen zu informieren - auch dies funktionierte nicht.

Durch funktionierte nicht , was ich meine ist, wurde mein Vermögen nicht geladen.

Die beigefügte Quelle finden Sie unten.


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>

Antworten:


17

Zunächst sollte Ihre Layoutdatei in platziert werden app/design/frontend/{interface}/{theme}/layout/.
Zweite. Wenn Sie die CSS- und JS-Dateien nur auf den gruppierten und einfachen Produktseiten hinzufügen möchten, verwenden Sie nicht das <default>Layout-Handle.
Lassen Sie Ihr Layout folgendermaßen aussehen:

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

Vielen Dank, das macht sehr viel Sinn. Ich nehme an, da ich config.xmlden Namen der Layout-XML-Datei definiert habe, kann ich das so nennen, wie ich wollte?
Asche

@Eine Seite beziehen. Ja. Der Name kann beliebig sein.
Marius

4

Da dies noch nicht klar genug herausgestellt wurde:

Verzeichnisse

Layout-XML-Dateien für ein benutzerdefiniertes Modul sollten themenunabhängig sein und daher in platziert werden

app/design/frontend/base/default/layout

Sie können jede dieser XML-Dateien in Ihrem benutzerdefinierten Design überschreiben. In den meisten Fällen ist es jedoch besser, eine zusätzliche themenspezifische Layoutdatei zu haben, die Änderungen hinzufügt . Weitere Informationen: Wie kann eine Magento-Vorlage richtig geändert werden?

Dateinamen

Beachten Sie, dass diese Dateien manchmal als "layout.xml-Dateien" bezeichnet werden, aber layout.xmleigentlich kein Dateiname sind, den Sie normalerweise in einem Magento-Code finden würden. Ihr Code funktioniert, wenn Sie Ihre layout.xmlDatei am richtigen Speicherort ablegen (siehe oben). Konventionell wird jedoch der Modulname in Kleinbuchstaben verwendet:

rating.xml

oder besser

vendor_rating.xml

Denken Sie daran, dass sich die Layout-XML-Dateien aller Module in einem einzigen Verzeichnis befinden, daher muss der Name eindeutig sein!


1

Ihre layout.xml sollte hineingehen

App / Design / Frontend / [IHR BENUTZERDEFINIERTES PAKET] / [IHR BENUTZERDEFINIERTES THEMA] / layout /


0

Wie oben für Ihren speziellen Fall angegeben, sollten Sie es nicht in <default>Tags verwenden, aber zum Beispiel können Sie CSS-Dateien, die sich in Ihrem Stammverzeichnis magento / js befinden, auf diese Weise in Ihrem app/design/frontend/vendor/theme/layout/local.xmlBeispiel hinzufügen :

<?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>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.