Comment ajouter Jquery dans Magento?

Dans mon projet actuel sur la page À propos de nous, j'ai besoin d'ajouter des onglets pour basculer entre les différentes sections. Je sais que cela peut être fait par les onglets Jquery mais je ne sais pas comment faire cela lors de l'intégration avec magento.

En supposant que vous avez déjà créé une page CMS et que le nom de cette page est About Usce nom doit être inclus dansif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Maintenant, ajoutez ce code dans votre 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; ?> 

Ouvrez ensuite la section de contenu de votre page CMS.

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

collez ce code et cela créera des onglets jquery dans votre frontend. J'espère que cela vous aidera.

voici un lien de référence si vous avez des doutes.

Je ne suggérerais pas de modifier votre head.phtmlmodèle pour cela. La plupart du temps, vous n'avez pas besoin d'un modèle de tête personnalisé dans votre propre thème, car celui de base fait déjà son travail.

Personnellement, je n'aime pas non plus écrire du code basé sur des exceptions (si A, faites-le, si B, faites-le). Si vous avez besoin de beaucoup de javascripts différents sur un grand nombre de pages différentes, alors vous head.phtmlseriez rempli de beaucoup d'instructions if.

Je suggère d'ajouter jQuery via XML de mise en page. Avec les pages CMS, vous avez la possibilité d'ajouter du XML de mise en page supplémentaire dans l'administrateur lors de la modification de la page. Ici , vous trouvez un exemple définition d' un modèle différent de celui de nous page. De la même manière, vous pouvez ajouter jQuery à la page à propos de nous. Ajoutez cette mise en page XML:

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

Ou copiez simplement votre répertoire de thème, comme skin\frontend\[your theme]\default\js\et ajoutez ceci à votre thème page.xml:

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

D'accord, j'ai trouvé un moyen de faire fonctionner prototype, jQuery et bootstrap sans interférer entre eux et sans utiliser jQuery.noConflict(). Ma configuration de mise en page ( page.xml) suivait (supprimée pour une lecture plus facile):

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

J'obtenais des erreurs comme celles-ci:

TypeError: element.attachEvent n'est pas une fonction

element.attachEvent ("on" + actualEventName, répondeur);

TypeError: element.dispatchEvent n'est pas une fonction

element.dispatchEvent (événement);

Je ne voulais pas changer $partout. J'ai donc créé trois fichiers javascript comme suit:

proto_to_temp.js ayant le code suivant:

var $tempPrototypeDollar = $;

after_jquery.js ayant le code suivant:

$ = jQuery;

after_all.js ayant le code suivant:

$  = $tempPrototypeDollar;

Comme vous pouvez probablement déjà le deviner, le premier script assigne la $variable actuelle (appartenant au prototype) à une variable temporaire appelée $tempPrototypeDollar. Le second script est simplement assigné jQueryà $. Le troisième script assigne le contenu de $tempPrototypeDollarback à $.

J'ai inclus ces trois scripts dans l'ordre suivant:

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

Cela a résolu tous les problèmes pour moi et maintenant jquery, bootstrap et prototype, tout semble bien fonctionner.

Inclure les éléments suivants en haut de la page de conception

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

Et utilisez jQuery comme $jau lieu de$(Eg:$j('.class').hide();)

PS: vous pouvez utiliser n'importe quelle autre variable au lieu de jvar$j