Como adicionar o Jquery no Magento?

No meu projeto atual na página sobre nós, preciso adicionar guias para alternar entre diferentes seções. Sei que isso pode ser feito pelas guias do Jquery, mas não sei como fazer isso ao integrar ao magento.

Supondo que você já tenha criado uma página do CMS e que o nome dessa página seja About Usesse nome deve ser incluído noif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Agora adicione este código no seu 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; ?> 

Em seguida, abra a seção de conteúdo da sua página do 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>

cole este código e isso criará guias jquery no seu frontend. Espero que isso ajude.

Aqui está um link de referência, se você tiver alguma dúvida.

Eu não sugeriria editar seu head.phtmlmodelo para isso. Na maioria das vezes, você não precisa de um modelo de cabeçalho personalizado em seu próprio tema, porque o principal já está fazendo seu trabalho.

Pessoalmente, também não gosto de escrever código baseado em exceções (se A fizer isso, se B fizer isso). Se você precisar de muitos javascripts diferentes em muitas páginas diferentes, o seu head.phtmlserá preenchido com várias instruções if.

Eu sugeriria adicionar jQuery através do layout XML. Com as páginas do CMS, você pode adicionar XML de layout extra ao administrador ao editar a página. Aqui você encontra um exemplo de configuração de um modelo diferente para a página sobre nós. Da mesma maneira, você pode adicionar o jQuery à página sobre nós. Adicione este XML de 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>

Ou apenas uma cópia simples para o diretório do tema, curta skin\frontend\[your theme]\default\js\e adicione isso ao tema page.xml:

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

Ok, eu encontrei uma maneira de fazer protótipo, jQuery e bootstrap funcionar sem interferir um com o outro e sem usar jQuery.noConflict(). Minha configuração de layout ( page.xml) estava seguindo (removida para facilitar a leitura):

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

Eu estava recebendo erros como os seguintes:

TypeError: element.attachEvent não é uma função

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

TypeError: element.dispatchEvent não é uma função

element.dispatchEvent (evento);

Eu não queria mudar em $todos os lugares. Então, eu criei três arquivos javascript da seguinte maneira:

proto_to_temp.js com o seguinte código:

var $tempPrototypeDollar = $;

after_jquery.js com o seguinte código:

$ = jQuery;

after_all.js com o seguinte código:

$  = $tempPrototypeDollar;

Como você provavelmente já deve adivinhar, o primeiro script atribui a $variável atual (de propriedade do protótipo) a uma variável temporária chamada $tempPrototypeDollar. O segundo script simplesmente atribui jQuerya $. O terceiro script atribui o conteúdo de $tempPrototypeDollarvolta a $.

Incluí esses três scripts na seguinte ordem:

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

Isso resolveu todos os problemas para mim e agora o jquery, o bootstrap e o protótipo parecem funcionar bem.

Inclua o seguinte no topo da página de design

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

E use jQuery como em $jvez de$(Eg:$j('.class').hide();)

PS: Você pode usar qualquer outra variável em vez de jem var$j