Magento Jquery eklemek nasıl?

10

Hakkımızda sayfamızdaki mevcut projemde, farklı bölümler arasında geçiş yapmak için sekmeler eklemeliyim, bunun Jquery sekmeleri tarafından yapılabileceğini biliyorum, ancak bunu magento ile entegre ederken nasıl yapacağımı bilmiyorum.

magento-1.9 magento-1 jquery

— don7
kaynak

2

Zaten bir CMS Sayfası oluşturduğunuzu ve bu sayfanın About Usadının bu adınif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Şimdi bu kodu 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; ?>

Ardından, CMS Sayfanızın içerik bölümünü açın.

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

Bu kodu yapıştırın ve bu ön uçunuzda jquery sekmeleri oluşturacaktır.

herhangi bir şüpheniz varsa, burada bir referans bağlantısı vardır.

— dh47
kaynak

teşekkür ederim bu çalıştı

— don7

3

Head.phtml dosyasına komut dosyaları ve özel etiketler eklemek Magento'nun en iyi uygulamalarına aykırıdır. Yeni komut dosyası etiketlerinin düzen xml yoluyla eklenmesi gerekir ve bu sayfayı özel olarak hedeflemek için hakkımızda sayfasına özel güncelleme tanıtıcıları ekleyebilirsiniz. Komut dosyası etiketleri kendi javacript dosyasına da ayrılmalı ve düzen xml yoluyla da içe aktarılmalıdır.

— Tyler Craft

7

Bunun için head.phtmlşablonunuzu düzenlemenizi önermem. Çoğu zaman kendi temanızda özel bir kafa şablonuna ihtiyacınız yoktur, çünkü çekirdek olan zaten işini yapıyor.

Ayrıca şahsen ben istisnalar dayalı kod yazmak istemiyorum (A sonra bunu yaparsanız, B sonra bunu yaparsanız). Birçok farklı sayfada çok sayıda farklı javascripte ihtiyacınız varsa, head.phtmlbirçok if ifadesiyle doldurulur.

Düzen XML üzerinden jQuery eklemenizi öneririm. CMS sayfalarında, sayfayı düzenlerken yöneticiye ek mizanpaj XML'i ekleme olanağına sahip olursunuz. Burada , hakkımızda sayfasına farklı bir şablon ayarlayan bir örnek bulabilirsiniz. Aynı şekilde, hakkımızda sayfasına jQuery ekleyebilirsiniz. Bu düzen XML'sini ekle:

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

4

Ya da sadece tema dirinize basit bir kopyasını skin\frontend\[your theme]\default\js\ekleyin , bunu temanızın gibi ekleyin ve ekleyin page.xml:

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

— user956584
kaynak

3

Tamam, prototip, jQuery ve bootstrap'ı birbirine müdahale etmeden ve kullanmadan yapmanın bir yolunu buldum jQuery.noConflict(). Düzen kurulumum ( page.xml) takip ediyordu (daha kolay okumak için soyuldu):

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

Aşağıdaki gibi hatalar alıyordum:

TypeError: element.attachEvent bir işlev değil

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

TypeError: element.dispatchEvent bir işlev değil

element.dispatchEvent (etkinlik);

Her $yerde değiştirmek istemedim . Bu yüzden üç javascript dosyası yaptım:

Aşağıdaki koda sahip proto_to_temp.js :

var $tempPrototypeDollar = $;

after_jquery.js aşağıdaki koda sahip:

$ = jQuery;

after_all.js kodu aşağıdaki gibidir:

$  = $tempPrototypeDollar;

Muhtemelen tahmin edebileceğiniz gibi, ilk komut dosyası geçerli $değişkeni (prototipin sahip olduğu) denilen geçici bir değişkene atar $tempPrototypeDollar. İkinci senaryo basitçe atar jQueryetmek $. Üçüncü komut dosyası $tempPrototypeDollargeri içeriğini atar $.

Bu üç komut dosyasını aşağıdaki sırayla ekledim:

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

Bu benim için tüm sorunları çözdü ve şimdi jquery, bootstrap ve prototip, hepsi iyi çalışıyor gibi görünüyor.

— Gogol
kaynak

2

Aşağıdakileri tasarım sayfasının üstüne ekleyin

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

Ve $jyerine jQuery kullanın$(Eg:$j('.class').hide();)

PS: jvar var yerine başka bir değişken kullanabilirsiniz$j

— Jithin U. Ahmed
kaynak