Respostas:
Supondo que você já tenha criado uma página do CMS e que o nome dessa página seja About Us
esse 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;">
<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.phtml
modelo 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.phtml
será 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 jQuery
a $
. O terceiro script atribui o conteúdo de $tempPrototypeDollar
volta 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 $j
vez de$(Eg:$j('.class').hide();)
PS: Você pode usar qualquer outra variável em vez de j
em var$j