¿Cómo agregar Jquery en Magento?

10

En mi proyecto actual en la página acerca de nosotros, necesito agregar pestañas para cambiar entre diferentes secciones. Sé que esto se puede hacer con las pestañas de Jquery, pero no sé cómo hacerlo al integrarme con magento.

magento-1.9 magento-1 jquery

— don7
fuente

2

Suponiendo que ya haya creado una página CMS y el nombre de esa página es About Useste nombre, debe incluirse enif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Ahora agregue este código en su 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; ?>

Luego abra la sección de contenido de su página de 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>

pegue este código y esto creará pestañas jquery en su interfaz. Espero que esto ayude.

Aquí hay un enlace de referencia si tiene alguna duda.

— dh47
fuente

gracias esto funcionó

— don7

3

Agregar scripts y etiquetas personalizadas al archivo head.phtml está en contra de las mejores prácticas de Magento. Las nuevas etiquetas de script deben agregarse a través del diseño xml y puede agregar controladores de actualización personalizados a la página sobre nosotros para orientar esa página específicamente. Las etiquetas de script deben dividirse en su propio archivo javacript e importarse también a través de layout xml.

— Tyler Craft

7

No sugeriría editar su head.phtmlplantilla para esto. La mayoría de las veces no necesita una plantilla de encabezado personalizada en su propio tema porque el núcleo ya está haciendo su trabajo.

Además, personalmente no me gusta escribir código que se base en excepciones (si A hace esto, si B hace esto). Si necesita muchos javascripts diferentes en muchas páginas diferentes, entonces head.phtmlse llenaría con muchas declaraciones if.

Sugeriría agregar jQuery a través del diseño XML. Con las páginas CMS, tiene la capacidad de agregar XML de diseño adicional en el administrador al editar la página. Aquí encontrará un ejemplo que configura una plantilla diferente a la página sobre nosotros. Del mismo modo, puede agregar jQuery a la página sobre nosotros. Agregue este diseño 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>

— 7ochem
fuente

4

O simplemente copia a tu directorio de tema, dale me gusta skin\frontend\[your theme]\default\js\y agrega esto a tu tema page.xml:

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

— usuario956584
fuente

3

Bien, he encontrado una manera de hacer que el prototipo, jQuery y bootstrap funcionen sin interferir entre sí y sin usar jQuery.noConflict(). Mi configuración de diseño ( page.xml) estaba siguiendo (despojado para una lectura más fácil):

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

Recibía errores como los siguientes:

TypeError: element.attachEvent no es una función

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

TypeError: element.dispatchEvent no es una función

element.dispatchEvent (evento);

No quería cambiar en $todas partes. Entonces, hice tres archivos javascript de la siguiente manera:

proto_to_temp.js tiene el siguiente código:

var $tempPrototypeDollar = $;

after_jquery.js tiene el siguiente código:

$ = jQuery;

after_all.js tiene el siguiente código:

$  = $tempPrototypeDollar;

Como probablemente ya pueda adivinar, el primer script asigna la $variable actual (propiedad del prototipo) a una variable temporal llamada $tempPrototypeDollar. El segundo script simplemente se asigna jQuerya $. El tercer script asigna el contenido de $tempPrototypeDollarback to $.

Incluí estos tres scripts en el siguiente orden:

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

Esto resolvió todos los problemas para mí y ahora jquery, bootstrap y prototype, todos parecen funcionar bien.

— Gogol
fuente

2

Incluya lo siguiente en la parte superior de la página de diseño

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

Y use jQuery como en $jlugar de$(Eg:$j('.class').hide();)

PD: puede usar cualquier otra variable en lugar de jin var$j

— Jithin U. Ahmed
fuente