Come aggiungere Jquery in Magento?

10

Nel mio attuale progetto nella pagina di noi ho bisogno di aggiungere schede per passare da una sezione all'altra, so che questo può essere fatto dalle schede di Jquery, ma non so come farlo quando si integra con magento.

magento-1.9 magento-1 jquery

— don7
fonte

2

Supponendo che tu abbia già creato una pagina CMS e il nome di quella pagina sia About Usquesto nome dovrebbe essere incluso inif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Ora aggiungi questo codice nel tuo 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; ?>

Quindi apri la sezione del contenuto della tua pagina 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>

incolla questo codice e questo creerà schede jquery nel tuo frontend. Spero che questo aiuti.

ecco un link di riferimento in caso di dubbi.

— dh47
fonte

grazie ha funzionato

— don7,

3

L'aggiunta di script e tag personalizzati al file head.phtml è contro le migliori pratiche di Magento. I nuovi tag di script devono essere aggiunti tramite layout xml ed è possibile aggiungere handle di aggiornamento personalizzati alla pagina chi siamo per targetizzare quella pagina in modo specifico. I tag di script dovrebbero essere suddivisi anche nel proprio file javacript e importati anche tramite layout xml.

— Tyler Craft,

7

Non consiglierei di modificare il tuo head.phtmlmodello per questo. La maggior parte delle volte non è necessario un modello di testa personalizzato nel proprio tema perché quello principale sta già facendo il suo lavoro.

Inoltre personalmente non mi piace scrivere codice basato su eccezioni (se A lo fa, se B lo fa). Se hai bisogno di molti javascript diversi su molte pagine diverse, allora il tuo head.phtmlsarebbe riempito con molte dichiarazioni if.

Suggerirei di aggiungere jQuery tramite XML di layout. Con le pagine CMS hai la possibilità di aggiungere XML di layout extra nell'amministratore quando modifichi la pagina. Qui trovi un esempio che imposta un modello diverso dalla pagina chi siamo. Allo stesso modo puoi aggiungere jQuery alla pagina chi siamo. Aggiungi questo XML di layout:

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

— 7ochem
fonte

4

O semplicemente una semplice copia nella directory del tuo tema, come skin\frontend\[your theme]\default\js\e aggiungi questo al tema page.xml:

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

— user956584
fonte

3

Ok, ho trovato un modo per far funzionare prototipo, jQuery e bootstrap senza interferire tra loro e senza usare jQuery.noConflict(). La mia configurazione del layout ( page.xml) era la seguente (eliminata per una lettura più semplice):

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

Stavo ricevendo errori come il seguente:

TypeError: element.attachEvent non è una funzione

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

TypeError: element.dispatchEvent non è una funzione

element.dispatchEvent (evento);

Non volevo cambiare $dappertutto. Quindi, ho creato tre file javascript come segue:

proto_to_temp.js con il seguente codice:

var $tempPrototypeDollar = $;

after_jquery.js con il seguente codice:

$ = jQuery;

after_all.js con il seguente codice:

$  = $tempPrototypeDollar;

Come probabilmente puoi già immaginare, il primo script assegna la $variabile corrente (di proprietà del prototipo) a una variabile temporanea chiamata $tempPrototypeDollar. Il secondo script viene semplicemente assegnato jQuerya $. Il terzo script assegna il contenuto di $tempPrototypeDollarback to $.

Ho incluso questi tre script nel seguente ordine:

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

Ciò ha risolto tutti i problemi per me e ora jquery, bootstrap e prototipo sembrano funzionare bene.

— Gogol
fonte

2

Includi quanto segue nella parte superiore della pagina di progettazione

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

E usa jQuery come $janziché$(Eg:$j('.class').hide();)

PS: è possibile utilizzare qualsiasi altra variabile anziché jin var$j

— Jithin U. Ahmed
fonte