Magento 1.9.1 CEを使用すると、levatezoomは製品ページでは機能しません（アキャビのTypeError：Undefinedは関数ではありません）

Question

だから、マイマゼントの「製品表示」ページの製品サムネイルをクリックしたときに、サムネイルをクリックすると（代わりに上にスクロールします）。これは私がコンソールに入るエラーです：

Chrome: Uncaught TypeError: undefined is not a function 
Firefox: TypeError: image.elevateZoom is not a function

.

RWD / DEFAULT / JS / APP.JSの行1194：

image.elevateZoom();

.

これが機能していない理由はなぜですか？私のテーマが行く限り、それはMagento 1.9.1のRWDテーマに大きく戻ってきた非常に最小限のテーマです。私は reada anda>を使用しています。それがうまくいくかどうかを確認する...ダイスなし。

更新：

私が試したこと：

• マゼントキャッシュを無効にしました
• jQuery.noconflict（）を使用してカスタムJSファイルを追加しました。その後（@ Aredubyaの提案）の直後の私のlocal.xmlを介して。
• rocal.xmlからカスタムJSファイルを削除しました。
• 同じテーマを別のMagentoのインストールにコピーしようとしました。

  私のlocal.xml

  <layout version="0.1.0">
      <default>
          <reference name="right">
              <remove name="right.permanent.callout"/>
              <remove name="paypal.partner.right.logo"/>
              <block type="cms/block" name="right_info_block" before="-">
                  <action method="setBlockId"><block_id>right_info_block</block_id></action>
              </block>
          </reference>
          <reference name="head">
              <action method="removeItem"><type>skin_js</type><name>js/slideshow.js</name></action>
              <action method="removeItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
              <action method="removeItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
              <action method="removeItem"><type>skin_css</type><name>css/madisonisland.css</name></action>
              <action method="removeItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name></action>
              <action method="removeItem"><type>link_rel</type><name>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</name></action>
              <!-- <action method="addItem"><type>skin_js</type><script>js/lib/hivarian.js</script></action> -->
          </reference>
          <reference name="footer">
              <remove name="footer_links"/>
              <remove name="footer_links2"/>
          </reference>
      </default>
  
      <!-- Mage_Catalog -->
      <catalog_product_view>
          <reference name="head">
              <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
          </reference>
          <reference name="product.info.additional">
              <block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
              <remove name="catalog.product.related" />
              <remove name="catalog.product.additional" />
          </reference>
      </catalog_product_view>
  
  </layout>
  

  .

Answer 1

解決策を見つけました！

私は最初にカスタム.jsファイルを作成することによって@ Aredubyaのソリューションを試みました jQuery.noconflict（）;

とでlocal.xmlに含めるようにしてください

<catalog_product_view>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
        <action method="addItem"><type>skin_js</type><script>js/mynoconflict.js</script></action>
    </reference>
</catalog_product_view>

.

Chromeの開発者コンソールの表示源に、jQuery.elevatezoom-3.0.8.min.js の直後にロードされているカスタムJSファイルがロードされていました

Chromeを通して見るMagentoがProtoypeとjQueryをロードした後に含まれているnoconflict.jsにつまずいた。

溶液

// Avoid PrototypeJS conflicts, assign jQuery to $j instead of $
var $j = jQuery.noConflict();

.

助けてくれてありがとう！

Answer 2

すべてのビューファイルで正しく適用されていると仮定すると、jQuery.elevatezoom-3.0.8.min.jsがまだ読み込まれます。テーマが使用する他のJSライブラリに応じて、 jquery.noconflict（）も。

下部へのインポート：

<reference name="head">
    <action method="addJs"><script>varien/product.js</script></action>
    <action method="addJs"><script>varien/configurable.js</script></action>
    <action method="addItem"><type>skin_js</type>
    ...
    ... other imports here
    ...
    <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
</reference>

.

jQuery.noconflict のメモ

注：この関数は、jQuery JavaScriptファイルを含めた後に、他の競合したライブラリを含める前に、そして実際にはその前に呼び出す必要があります。jQueryが最後に含まれている場合は、他の競合したライブラリが使用されます。Noconflictはjquery.jsファイルの末尾に呼び出すことができ、$（）jQueryエイリアスをグローバルに無効にします。

Answer 3

すでにNoconflictセットアップを持っていて、まだ問題を実行している人のためにgithub で上昇したチケット

// First call elevateZoom

$j(document).ready(function() {     
  $j('.product-image-thumbs').attr('id', 'zoomGallery');

  //initiate the plugin and pass the id of the div containing gallery images 

  $j("#image-main").elevateZoom({gallery:'zoomGallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

 //pass the images to Fancybox 

 $j("#image-main").bind("click", function(e) { 
    var ez = $j('#image-main').data('elevateZoom');    
    $j.fancybox(ez.getGalleryList()); 
    return false; 
 }); 

// after click you need to remove the current zoom 

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
    $j('.zoomContainer').remove();
    $j('#image-main').removeData('elevateZoom');

// and then call it again

$j('#image-main').elevateZoom({
    gallery: 'more-vies',
    lensSize: 200,
    cursor: 'pointer',
    galleryActiveClass: 'active',
    imageCrossfade: true,
    scrollZoom : true,
    responsive: true
  });
});
});

.