MagentoにjQueryを追加する

Question

Magentoに付属している残りのスクリプトの前に、local.xmlを使用してjQuery（またはスクリプト）を追加するにはどうすればよいでしょうか？

私は（local.xmlで）使用することを試みた：

<reference name="head"> 
    <action method="addItem"> 
     <type>skin_js</type> 
     <script>js/jquery-1.6.4.js</script> 
    </action> 
</reference> 

が、これは基本パッケージにpage.xmlにMagentoのことで追加されたスクリプトの最後にはjQueryを追加してしまいます。私も、使用しているすべてのスクリプト削除しようとしました：私は彼らがにする必要がために、

<action method="removeItem"> 
... 
</action> 

をlocal.xmlにpage.xmlに追加されたスクリプトをすべて削除し、それらを再追加することを（jQueryが最初）しかし、どういうわけか、彼らは（jQueryの最後の）同じ順序で終了しています。

私はMagentoコードを踏んで、スクリプトが削除されてから、Mage_Page_Block_Html_Headの$ this - > _ data ['items']に再追加されたことを確認しましたが、ページには、最後にjQueryが追加されています。

これを行うにはもっとエレガントな方法が必要だと思っていますが、私はまだGoogle検索で見つけていません。私が見つけたものは、直接page.xmlを変更することを推奨しています。他の場所で読んだことは良い考えではありません。あなたは単に$以外の別の変数にjQueryの設定を確認する必要がありますので、

Answer 1

ベストのパフォーマンス/スピードに良くなるコンテンツ配信ネットワークを使用することですを使用する$jを使用しますあなたのウェブサイト

私はほとんどちょうどテンプレート/ページ/ HTML/head.phtmlを開き、右

<?php echo $this->getCssJsHtml() ?> 
<?php echo $this->getChildHtml() ?> 

前に私が追加：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 

も必ずjQuery.noConflict（）メソッドを実行します

Answer 2

あなたは_prepareLayout()方法

1つの警告に$this->getLayout()->getBlock('head')->addJs('path/to/jquery.js');を使用してブロックファイルに追加することができ、Magentoのは、プロトタイプを使用しています。ページにこれを追加すると、それは私のために働かせた：

var $j=jQuery.noConflict(); 

次に、あなたはちょうどあなたが通常$

Answer 3

これを行うために私が好む（最も柔軟な方法）のは、を使用したXMLによるものです。、2つの別々のJavascriptファイル、新しいファイルを作成します。最初のJavascriptファイルはjQuery自体です。完全に変更されていません。

<reference name="head"> 
     <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head"> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/jquery-1.7.2.min.js</name> 
      </action> 
      <action method="addItem"> 
       <type>skin_js</type> 
       <name>js/no-conflict.js</name> 
      </action> 
     </block> 
    </reference> 

no-conflict.js：今、私たちは私たちのlocal.xmlのヘッド部に、新しいブロックと一緒に、これらのファイルの両方を追加

jQuery.noConflict(); 

：私はno-conflict.js呼び出し、それが唯一の1行を含む第2のファイルJQueryがデフォルトでMagentoに含まれているJavascriptフレームワークであるPrototypeと一緒に動作するようにする必要があります。jQueryファイルとno-conflictファイルを区切っておくと、jQueryファイル自体を編集しなくても、noConflict()メソッドを含めることなく、必要に応じてjQueryをアップグレードまたはダウングレードできます。

XMLでは、テンプレートファイルをtop_scripts.phtmlに設定して新しいブロック（topScripts）を作成しました。

/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/に移動し、この新しいファイルを作成します。今/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtmlを編集

<?php echo $this->getCssJsHtml(); ?>

：これは、1つの行が含まれます。

はあなたのhead.phtmlにライン<?php echo $this->getCssJsHtml() ?>を見つけて、直接その上に次の行を追加します。

<?php echo $this->getChildHtml('topScripts') ?>

あなたは今正しくは他のMagentoのJavascriptの前にjQueryを追加しています。別の方法として、

Answer 4

、代わりに手動でMagentoのは、毎回ファイルを編集するのは、単にjQueryのは、この拡張機能を使用して追加することができます：http://www.intersales.de/shop/magento-magejquery.html

それはあなたが指定したjQueryのバージョンをダウンロードして、すべての必要なファイルをインストールしているために何自動的にテンプレートへの参照を追加します。バックエンドでは、目的のバージョンを指定し、競合のない設定を有効にすることもできます。