Magento Color Swatch with Cloud Zoom

Magento Color Swatch with Cloud Zoom

Cloud Zoom for Magento (developed by QuartSoft) is one of most popular extension for adding zoom effect to product details page. This extension is also embedded in many themes there for we decided to create small guide that will help you to enable full compatibility of our Color Swatch extension with Cloud zoom plugin. While we already have prepared patch due difference in script calling and theme layout small modifications may be necessary.

Patch contains one file that will replace Color Swatch default controller and small code snip-set that should be copied into media.phtml template file.

Mani changes are done in Color Swatch controller which is located in:

Code in file will use CloudZoom API to destroy current ‘zoom’ object, than it will update product image and link to large image. After successful update it will initialize CloudZoom object but with new data. ‘More viwes’ section will be updated too and click on thumbnail will change main image and re-initialize zoom plugin. This feature will be handled by snip-set code that should be copied in media template file.

Since we destroy and initialize CloudZoom after update it is possible to have different zoom setup form default one on product details page. Practically you can setup zoom to be outside and after swatch is selected it can be changed to inside zoom type, this is valid for all supported effects.
Few things that should be paid attention when patch is applied are jQuery selector and ID of element that was used for initial zoom call. Both items can be easily checked in Cloud Zoom js file and copied over to code in controller file.

If you are not experienced with Magento or java scripts don’t worry our development team will help you to integrate Color Swatch into your store and keep all Cloud Zoom features.
For any additional questions, site examples or more information else please contact us on our mail:

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *