Hinzufügen von Javascript zum Kopf auf bestimmten Seiten


7

Ich versuche, einige Javascript-Skripte zum Kopf bestimmter Seiten meines Magento-Shops hinzuzufügen (jetzt benötige ich ein Skript auf den Produktseiten und ein anderes Skript an der Kasse, aber ich werde es in Zukunft auf anderen Seiten benötigen: Homepage, Kategorien...).

Ich bin neu in Magento und habe viel darüber gelesen, bin mir aber immer noch nicht sicher, wie ich das in Magento machen soll (ich habe es zum Beispiel in Drupal erfolgreich gemacht).

Es scheint, dass page.xml (oder local.xml) der richtige Ort ist, um die Skripte für den Kopf zu platzieren, aber ich weiß nicht, dass in diesen XML-Dateien "Bedingungen" zulässig sind (zeigen Sie dieses Skript nur auf dieser Art von Seiten. ..).

Eine andere Option scheint darin zu bestehen, den Code in die Datei head.phtml der Vorlage einzufügen. Dies sollte funktionieren, da es PHP-Ifs akzeptiert, aber ich weiß nicht, welcher Code und welche Variablen für jeden Fall verwendet werden sollen (zum Anzeigen auf Produktseiten, an der Kasse oder auf der Homepage usw.).

Was ist die beste / sauberste Option dafür? Könnten Sie mir bitte ein Codebeispiel geben, wie es implementiert werden würde, oder auf die entsprechende Dokumentationsseite verweisen?

Vielen Dank!

PS: Ich glaube nicht, dass dies einen Unterschied macht, aber die Javascript-Codes, die ich implementieren möchte, dienen zur Verwendung der Google Analytics Content Experiments-API ( https://developers.google.com/analytics/solutions/). Experimente-Client-Seite )

Antworten:


15

Fügen Sie Folgendes in Ihre local.xmlLayoutdatei ( app/design/frontend/{interface}/{theme}/layout/local.xml) direkt unter dem <layout>Tag this ein:
Für Produktseiten

<catalog_product_view>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</catalog_product_view>

Für die Checkout-Seite gilt dasselbe, außer dass Sie das oberste Tag durch ersetzen müssen <checkout_onepage_index>. So wird der obige Abschnitt:

<checkout_onepage_index>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</checkout_onepage_index>

es funktioniert genauso für jede andere Seite. Sie müssen nur das richtige Seitenhandle (oberes Tag) kennen. Für Index ist cms_index_index, für Warenkorb ist checkout_cart_index.


Funktioniert cms_index_indexnur als Referenz die Homepage? Wusste das nicht!
Sander Mangel

@ SandersMangel. Das weiß ich. Es gibt dies in der cms-Layoutdatei <cms_index_index translate="label"> <label>CMS Home Page</label> </cms_index_index>. Entweder habe ich recht oder jemand anderes hat mich angelogen.
Marius

Vertraue niemandem ...! besonders wenn es sich um Magento-Dokumentation handelt. Aber in diesem Fall denke ich, dass Sie Recht haben: P
Sander Mangel

Es funktioniert, wenn ich genau Ihren Code eingebe, aber wenn ich den Teil "IHR TEXT GEHT HIER" für den Javascript-Code ändere, den ich nicht implementieren möchte, erhalte ich "Array". Irgendeine Ahnung, was schief gehen könnte? (Lassen Sie mich wissen, wenn Sie den Javascript-Code benötigen, um dies zu beantworten). Danke noch einmal! ;)
Pedrogon

Wenn Sie HTML-Tags in Ihrem Code haben, wickeln Sie ihn einfach um <![CDATA[..]]>. Ich werde die Antwort aktualisieren. Wenn es immer noch nicht gelöst werden kann, fügen Sie den js-Code in die Frage ein.
Marius

4

Das local.xmlwäre der richtige Weg. Es wird als bewährte Methode angesehen, dort nur Regeln zu ändern und hinzuzufügen.

Wenn Sie nur bestimmte Seitentypen ansprechen, bietet Ihnen das Layout-XML Seitenhandles. So ist zum Beispiel die Produktseite catalog_product_view. In Ihrem Fall würde das Layout-XML ungefähr so ​​aussehen

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_onepage_index>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/your_custom_js.js</name></action>
        </reference>
    </checkout_onepage_index>
    <catalog_product_view>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/another_custom_js.js</name></action>
        </reference>
    </catalog_product_view>
</layout>

Für die Homepage müssen Sie sie über das Backend unter CMS-Seiten und dann über layout tabden Layout Update XMLBereich hinzufügen


Das würde wahrscheinlich funktionieren, aber wenn möglich möchte ich die Javascript-Codes direkt in local.xml hinzufügen (ohne benutzerdefinierte js-Dateien aufzurufen). Ist das möglich?
Pedrogon

Die Verwendung von <block type="core/text">@Marius sollte den Trick machen.
Sander Mangel

Ich bin mir ziemlich sicher <reference name="header">, dass es hier falsch ist, sollte es sein head.
Louis B.

1
@ LouisB. Schieß, du hast vollkommen recht. Vielen Dank, dass Sie mich informiert haben!
Sander Mangel

2

Jetzt brauche ich ein Skript auf den Produktseiten und ein anderes Skript an der Kasse, aber ich werde es in Zukunft auf anderen Seiten benötigen: Homepage, Kategorien

Wenn Sie dasselbe Skript an mehreren Stellen wiederverwenden, ist es sinnvoll, ein benutzerdefiniertes Layout-Handle in Ihren Designs local.xml(oder einer anderen themenspezifischen Layoutdatei, wie in dieser Antwort erläutert ) wie folgt zu verwenden:

<content_experiments> <!-- this is the custom layout handle -->
    <reference name="head">
        <block type="core/text" name="content_experiments">
            <action method="setText">
                <text><![CDATA[
add scripts here

]]></text>
            </action>
        </block>
    </reference>
</content_experiments>

So verwenden Sie dieses Handle auf Produktseiten und an der Kasse :

<catalog_product_view>
    <update handle="content_experiments"/>
</catalog_product_view>
<checkout_onepage_index>
    <update handle="content_experiments"/>
</checkout_onepage_index>

So verwenden Sie es auf allen Kategorieseiten

<catalog_category_view>
    <update handle="content_experiments"/>
</catalog_category_view>

So verwenden Sie es für die Kategorie mit der ID 42 :

<CATEGORY_42>
    <update handle="content_experiments"/>
</CATEGORY_42>

(Alternativ <update handle="content_experiments"/>zum benutzerdefinierten Layout-Update-Textfeld in der Kategoriekonfiguration hinzufügen )

Bildschirmfoto

So verwenden Sie es für das Produkt mit der ID 42 :

<PRODUCT_42>
    <update handle="content_experiments"/>
</PRODUCT_42>

(Alternativ <update handle="content_experiments"/>zum benutzerdefinierten Layout-Update-Textfeld in der Produktkonfiguration hinzufügen )

Bildschirmfoto

...und so weiter...

Alle Layout-Handles werden direkt darin platziert <layout> ... </layout>

Der Vorteil dieser Methode ist, dass Sie das Skript nur an einer Stelle ausführen müssen, wenn Sie es ändern möchten.


KidCajes hat vergessen zu stimmen. Betrachten Sie dies als +1 von ihm. Kudos :)
Rajeev K Tomy
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.