So, just noticed that when I clicked on product thumbnails on the product view page of my magento, clicking the thumbnails don't do anything (instead it scrolls to top). This is the error I get in console:
Chrome: Uncaught TypeError: undefined is not a function
Firefox: TypeError: image.elevateZoom is not a function
Line 1194 of rwd/default/js/app.js:
image.elevateZoom();
Any idea why this isn't working? As far as my theme goes, it's a very minimal theme that heavily falls back on the RWD Theme in magento 1.9.1. I'm using Easy Tabs on the product view page, but I tried disabling it to see if it worked… no dice.
Update:
What I've Tried:
- I've disabled magento cache
- Tried adding a custom js file with jQuery.noConflict(); in it via my local.xml immediately after (@AreDubya's Suggestion).
- Removed custom js file from my local.xml after it didn't work.
- Tried copying the same theme to another magento installation on the same host- elevateZoom works fine on that one… both these sites are pretty vanilla as far as extensions go.
My 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>
Best Answer
Found the solution!
I originally tried @AreDubya's solution by making a custom .js file with jQuery.noConflict();
and making sure to include it in my local.xml with
Viewing Sources in Chrome's Developer Console showed my custom JS file being loaded immediately after jquery.elevateZoom-3.0.8.min.js
Looking through Chrome I stumbled upon a noconflict.js that magento includes after it loads protoype and jquery, I copied its syntax into my mynoconflict.js and it worked!
The Solution
Thanks for the help guys!