Magento 1.9.1 CE를 사용하여 ElevateZoom은 제품 페이지에서 작동하지 않습니다 (Undefined는 기능이 아님)

Question

이므로 Magento의 제품보기 페이지에서 제품 축소판을 클릭 할 때 미리보기 이미지를 클릭하면 아무 것도하지 않습니다 (대신 스크롤하여 맨 위로 스크롤). 이것은 콘솔에서 얻은 오류입니다.

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

.

라인 1194 rwd / default / js / app.js :

image.elevateZoom();

.

왜 이것이 작동하지 않는 이유는 무엇입니까? 내 테마가 진행되는 한, Magento 1.9.1의 RWD 테마로 크게 떨어지는 매우 최소한의 주제입니다. 제품보기 페이지에서 쉬운 탭 를 사용하지만 사용 중지합니다. 그것이 작동했는지 확인하십시오 ... 주사위가 없습니다.

업데이트 :

내가 시도한 것 :

• Magento Cache 를 비활성화했습니다.
• jquery.noconflict ()가있는 사용자 정의 JS 파일을 추가하려고했습니다. 즉시 (@ Aredubya의 제안) 직후에 My Local.xml을 통해.
• 가 작동하지 않은 후에 local.xml에서 사용자 정의 JS 파일을 제거했습니다.
• 동일한 호스트 elevatezoom의 다른 마젠토 설치에 동일한 테마를 복사하려고 시도했습니다 ... 두 사이트는 모두 확장자가 꽤 바닐라입니다.

  내 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 파일을로드 할 것으로 보였습니다.

크롬을 통해 찾고있는 noconflict.js가 protoype와 jquery를로드 한 후에 magento가 포함 된 noconflict.js에 비틀었다, 나는 그것의 synoconflict.js에 구문을 복사하고 그것이 일했다!

솔루션

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

.

도움을 주셔서 감사합니다!

Answer 2

뷰 파일에서 모든 것이 올바르게 올바르게 가정하면 jquery.elevatezoom-3.0.8.min.js가 아직없는 경우 마지막으로 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.js 파일의 끝에서 호출 할 수 있습니다.

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
  });
});
});

.