Jak dodać Jquery w Magento?

10

W moim bieżącym projekcie na stronie o nas muszę dodać zakładki, aby przełączać się między różnymi sekcjami. Wiem, że można to zrobić za pomocą zakładek Jquery, ale nie wiem, jak to zrobić, integrując się z Magento.

magento-1.9 magento-1 jquery

— don7
źródło

2

Zakładając, że już utworzyłeś stronę CMS, a nazwa tej strony to About Usta nazwa powinna zostać uwzględnionaif ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

Teraz dodaj ten kod do swojego 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; ?>

Następnie otwórz sekcję treści na swojej stronie 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>

wklej ten kod, a to utworzy zakładki jquery w twoim interfejsie. Mam nadzieję, że to pomoże.

tutaj jest link referencyjny, jeśli masz jakiekolwiek wątpliwości.

— dh47
źródło

dziękuję, że to zadziałało

— don7

3

Dodawanie skryptów i tagów niestandardowych do pliku head.phtml jest sprzeczne z najlepszymi praktykami Magento. Nowe tagi skryptu powinny zostać dodane poprzez układ xml. Możesz dodać niestandardowe uchwyty aktualizacji do strony o nas, aby kierować na tę stronę konkretnie. Znaczniki skryptu powinny również zostać podzielone na własny plik javacript i zaimportowane również przez układ xml.

— Tyler Craft

7

Nie sugerowałbym edycji twojego head.phtmlszablonu do tego. W większości przypadków nie potrzebujesz niestandardowego szablonu głowy w swoim własnym motywie, ponieważ ten podstawowy już wykonuje swoją pracę.

Również osobiście nie lubię pisać kodu opartego na wyjątkach (jeśli A to zrób to, jeśli B to zrób to). Jeśli potrzebujesz wielu różnych skryptów javascript na wielu różnych stronach, to możesz head.phtmlwypełnić wiele instrukcji if.

Sugerowałbym dodanie jQuery poprzez układ XML. W przypadku stron CMS możesz dodawać dodatkowy układ XML w panelu administratora podczas edycji strony. Tutaj znajduje się przykład ustawiania innego szablonu niż strona o nas. W ten sam sposób możesz dodać jQuery do strony o nas. Dodaj ten układ 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
źródło

4

Lub po prostu skopiuj do Ciebie motyw reż, polub skin\frontend\[your theme]\default\js\i dodaj to do motywu page.xml:

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

— użytkownik956584
źródło

3

Ok, znalazłem sposób, aby prototyp, jQuery i bootstrap działały bez ingerencji między sobą i bez użycia jQuery.noConflict(). Moja konfiguracja układu ( page.xml) była następująca (usunięta dla łatwiejszego odczytu):

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

Pojawiały się błędy, takie jak:

TypeError: element.attachEvent nie jest funkcją

element.attachEvent („on” + actualEventName, responder);

TypeError: element.dispatchEvent nie jest funkcją

element.dispatchEvent (event);

Nie chciałem się zmieniać $wszędzie. Tak więc utworzyłem trzy pliki javascript w następujący sposób:

proto_to_temp.js posiadający następujący kod:

var $tempPrototypeDollar = $;

after_jquery.js o następującym kodzie:

$ = jQuery;

after_all.js posiadający następujący kod:

$  = $tempPrototypeDollar;

Jak już zapewne można się domyślić, pierwszy skrypt przypisuje bieżącą $zmienną (będącą własnością prototypu) do zmiennej tymczasowej o nazwie $tempPrototypeDollar. Drugi skrypt po prostu przypisuje jQuerydo $. Trzeci skrypt przypisuje treść z $tempPrototypeDollarpowrotem do $.

Zawarłem te trzy skrypty w następującej kolejności:

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

To rozwiązało wszystkie problemy dla mnie, a teraz jquery, bootstrap i prototyp, wszystko działa dobrze.

— Gogol
źródło

2

Uwzględnij następujące elementy u góry strony projektu

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

I użyj jQuery jak $jzamiast$(Eg:$j('.class').hide();)

PS: Możesz użyć dowolnej innej zmiennej zamiast jw var$j

— Jithin U. Ahmed
źródło