MagentoでJqueryを追加する方法？

10

About Usページの現在のプロジェクトでは、タブを追加して別のセクションに切り替える必要があります。これはJQueryタブで実行できることはわかっていますが、magentoと統合するときにこれを行う方法がわかりません。

magento-1.9  magento-1  jquery 
— don7
ソース

回答:

2

CMSページをすでに作成していて、そのページのAbout Us名前がこの名前であると仮定すると、if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='your_page_name'):

次に、このコードを 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; ?>

次に、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>

このコードを貼り付けると、フロントエンドにjqueryタブが作成されます。

疑問がある場合は、ここに参照リンクがあります。

— dh47
ソース
— ありがとうござい
3
スクリプトとカスタムタグをhead.phtmlファイルに追加することは、Magentoのベストプラクティスに反しています。新しいスクリプトタグはレイアウトXMLを介して追加する必要があり、カスタム更新ハンドルをAbout Usページに追加して、そのページをターゲットにすることができます。スクリプトタグも独自のjavacriptファイルに分割し、レイアウトxmlを介してインポートする必要があります。
— タイラークラフト
7

head.phtmlこのためにテンプレートを編集することはお勧めしません。ほとんどの場合、コアテーマは既に機能しているため、独自のテーマにカスタムヘッドテンプレートは必要ありません。

また、個人的には、例外に基づいたコードを書くのは好きではありません（Aの場合はこれを行い、Bの場合はこれを行います）。多数の異なるページで多数の異なるJavaScriptが必要な場合head.phtmlは、多数のifステートメントでいっぱいになります。

レイアウトXMLを使用してjQueryを追加することをお勧めします。CMSページを使用すると、ページの編集時に管理者に追加のレイアウトXMLを追加できます。ここでは、About usページに別のテンプレートを設定する例を示します。同様に、jQueryをabout usページに追加できます。このレイアウト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
ソース
4

または、単純にあなたのテーマディレクトリにコピーして、skin\frontend\[your theme]\default\js\これをあなたのテーマに追加してくださいpage.xml：

<action method="addItem">
    <type>skin_js</type>
    <script>js/jquery-1.9.1.min.js</script>
</action>
— ユーザー956584
ソース
3

わかりました、プロトタイプ、jQuery、ブートストラップを互いに干渉せず、を使用せずに機能させる方法を見つけましたjQuery.noConflict()。私のレイアウト設定（page.xml）は次のとおりです（読みやすくするために取り除いています）。

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

次のようなエラーが発生しました：

TypeError：element.attachEventは関数ではありません

element.attachEvent（ "on" + actualEventName、レスポンダ）;

TypeError：element.dispatchEventは関数ではありません

element.dispatchEvent（event）;

$どこでも変えたくなかった。そこで、次のように3つのjavascriptファイルを作成しました。

次のコードを持つproto_to_temp.js：

var $tempPrototypeDollar = $;

次のコードを持つafter_jquery.js：

$ = jQuery;

次のコードを持つafter_all.js：

$  = $tempPrototypeDollar;

ご想像のとおり、最初のスクリプトは現在の$変数（プロトタイプが所有）をという一時変数に割り当てます$tempPrototypeDollar。2番目のスクリプトは、単に割り当てjQueryに$。3番目のスクリプトは、$tempPrototypeDollarback のコンテンツをに割り当て$ます。

これら3つのスクリプトを次の順序で含めました。

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

これは私にとってすべての問題を解決し、jquery、ブートストラップ、プロトタイプもすべて問題なく動作するようです。

— ゴゴル
ソース
2

設計ページの上部に以下を含めます

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

そして、$j代わりにjQueryを使用してください$(Eg:$j('.class').hide();)

PS：jvarの代わりに他の変数を使用できます$j

— ジティン・U・アーメド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.