Wie füge ich Jquery in Magento hinzu?

In meinem aktuellen Projekt auf der Seite "Über uns" muss ich Registerkarten hinzufügen, um zwischen verschiedenen Abschnitten zu wechseln. Ich weiß, dass dies mit Jquery-Registerkarten möglich ist, aber ich weiß nicht, wie dies bei der Integration in Magento geschehen soll.

Angenommen, Sie haben bereits eine CMS-Seite erstellt und der Name dieser Seite ist About Usdieser Name sollte enthalten seinif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Fügen Sie nun diesen Code in Ihr app/design/frontend/your_package/your_theme/template/page/html/head.phtml

<?php $headBlock = $this->getLayout()->getBlock('head');
    if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='About Us'): 
    ?>
    <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script type="text/javascript"> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>
    <?php endif; ?> 

Öffnen Sie dann den Inhaltsbereich Ihrer CMS-Seite.

<div style="float: right; width: 200px;">&nbsp;
<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>
</div>
<div id="tabs" style="width: 680px;">
<ul>
<li><a href="#tabs-1">You text here.</a></li>
<li><a href="#tabs-2">You text here.</a></li>
<li><a href="#tabs-3">You text here.</a></li>
</ul>
<div id="tabs-1">
<p>You text here.</p>
</div>
<div id="tabs-2">
<p>You text here.</p>
</div>
<div id="tabs-3">
<p>You text here.</p>
<p>You text here.</p>
</div>
</div>

Fügen Sie diesen Code ein und es werden JQuery-Registerkarten in Ihrem Frontend erstellt. Hoffentlich hilft dies.

Hier ist ein Referenzlink, wenn Sie irgendwelche Zweifel haben.

Ich würde nicht vorschlagen, Ihre head.phtmlVorlage dafür zu bearbeiten . In den meisten Fällen benötigen Sie keine benutzerdefinierte Kopfvorlage in Ihrem eigenen Thema, da die Kernvorlage bereits ihre Arbeit erledigt.

Auch persönlich schreibe ich keinen Code, der auf Ausnahmen basiert (wenn A, dann mache ich das, wenn B das mache). Wenn Sie viele verschiedene Javaskripte auf vielen verschiedenen Seiten benötigen, sind Sie head.phtmlmit vielen if-Anweisungen gefüllt.

Ich würde vorschlagen, jQuery über Layout-XML hinzuzufügen. Mit CMS-Seiten haben Sie die Möglichkeit, beim Bearbeiten der Seite dem Administrator zusätzliches Layout-XML hinzuzufügen. Hier finden Sie ein Beispiel, in dem eine andere Vorlage als auf der Seite "Über uns" festgelegt wird. Auf die gleiche Weise können Sie der Seite "Über uns" jQuery hinzufügen. Fügen Sie dieses Layout-XML hinzu:

<reference name="head">
    <action method="addItem">
        <type>skin_js</type>
        <script>js/jquery-1.x.x.js</script>
    </action>
    <block type="core/text" name="jquery.noconflict">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
</reference>

Oder kopieren Sie einfach Ihr Theme-Verzeichnis skin\frontend\[your theme]\default\js\und fügen Sie es Ihrem Theme hinzu page.xml:

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>

Okay, ich habe einen Weg gefunden, Prototyp, jQuery und Bootstrap zum Laufen zu bringen, ohne sich gegenseitig zu stören und ohne sie zu verwenden jQuery.noConflict(). Mein Layout-Setup ( page.xml) war wie folgt (zum leichteren Lesen entfernt):

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

Ich habe folgende Fehler erhalten:

TypeError: element.attachEvent ist keine Funktion

element.attachEvent ("on" + actualEventName, Responder);

TypeError: element.dispatchEvent ist keine Funktion

element.dispatchEvent (Ereignis);

Ich wollte mich nicht $überall ändern . Also habe ich drei Javascript-Dateien wie folgt erstellt:

proto_to_temp.js mit folgendem Code:

var $tempPrototypeDollar = $;

after_jquery.js mit folgendem Code:

$ = jQuery;

after_all.js mit folgendem Code:

$  = $tempPrototypeDollar;

Wie Sie wahrscheinlich bereits erraten können, weist das erste Skript $einer temporären Variablen namens die aktuelle Variable (im Besitz des Prototyps) zu $tempPrototypeDollar. Zweiter Skript ordnet einfach jQueryzu $. Das dritte Skript weist den Inhalt von $tempPrototypeDollarback to zu $.

Ich habe diese drei Skripte in der folgenden Reihenfolge eingefügt:

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all jQuery related code has been included -->
</block>

Dies löste alle Probleme für mich und jetzt scheinen JQuery, Bootstrap und Prototyp gut zu funktionieren.

Fügen Sie oben auf der Entwurfsseite Folgendes ein

<script>
var $j = jQuery.noConflict();
</script>

Und verwenden Sie jQuery als $janstelle von$(Eg:$j('.class').hide();)

PS: Sie können jede andere Variable anstelle von jvar verwenden$j