Thanks for buying the Advanced Color Swatches Extension for Magento. Installation Steps: PLEASE READ ALL THE INSTRUCTIONS CAREFULLY 1. Drop the app-js-skin folders in your magento installation folder. 2. In the Magento Admin Panel, - clear or disable the Magento cache ( System > Cache Management ). You can enable and refresh the Magento cache once the installation and configuration is done. - disable or re-run the Magento compilation option in case you want to keep it enabled ( System > Tools > Compilation ). - logout and login again to see the new "Attribute Swatches"->"Manage Items" menu on the top navigation. 3. Select the attributes to be displayed as swatches in the configuration section of the backend ( System > Configuration > Catalog > Attribute Swatches ). Read carefully all the options descriptions. 4. Go to "Attribute Swatches"->"Manage Items", you will see there the list of attributes options you should have already created in the manage attributes section, here you can upload swatches or select hexadecimal colors. 5. To display the color swatches in the product listing, A: If you haven't customized your theme yet and you are using the default theme, rwd theme or porto theme, you can use one of these files: YOUR_THEME_CHANGES/catalog/product/list_for_default_theme.phtml YOUR_THEME_CHANGES/catalog/product/list_for_porto_theme.phtml YOUR_THEME_CHANGES/catalog/product/list_for_rwd_theme.phtml rename the corresponding file to list.phtml and upload it to app/design/package/theme/template/catalog/product/ ( DO NOT FORGET TO BACKUP YOUR ORIGINAL list.phtml FIRST!!!!! )
B: For custom templates check the commented lines in YOUR_THEME_CHANGES/catalog/product/list_for_default_theme.phtml, the following lines need to be added or modified: - before foreach ($_productcollection as $_product): copy this: /* COLORS AND ATTRIBUTES SWATCHES HELPER */ $_swatches_helper = $this->helper("attributeswatches/product_list")- >setdimensions(135, 135); /* make sure you set the correct image thumbnail dimensions */ - After foreach ($_productcollection as $_product): /* MANGOEXTENSIONS */ /* -SWATCHES HTML OUTPUT */ $_swatches = $_swatches_helper->setproduct($_product)- >processswatches(); /* EOF -SWATCHES HTML OUTPUT */ - TO CHANGE THE SOURCE OF THE PRODUCT IMAGE TO CHANGE ACCORDING TO THE LAYERED NAVIGATION SELECTED COLOR AND TO INCLUDE THE ALTERNATE IMAGE ON HOVER EFFECT: <a href=" echo $_swatches["product_url"] " title=" echo $this- >striptags($this->getimagelabel($_product, 'small_image'), null, true) " class="productimage"> <!-- NOTICE: the image src attribute changes and a new class is added to the img element : catalog-product-image --> <img src=" echo $_swatches["product_image"] " width="135" height="135" alt=" echo $this->striptags($this->getimagelabel($_product, 'small_image'), null, true) " class="catalog-product-image"/> <!-- NOTICE: code for the alternate image to display on hover, some themes already include a similar feature so be careful --> if(isset($_swatches['hover_image']) && $_swatches['hover_image']!=""): <img src=" echo $_swatches['hover_image'];" width=" echo $_image_width; " height=" echo $_image_height; " class="catalog-hoverimage"/> endif; </a>
- Use this code inside the list item to display the swatches, place it depeding on your template design. <!-- SWATCHES HTML OUTPUT --> /* INCLUDE AVAILABILITY IF ENABLED IN BACKEND OPTIONS */ echo $_swatches_helper->showavailability(); /* SWATCHES CODE */ echo $_swatches["swatches"]; 6. To display the color swatches in the product details page, look for the options in the settings section: System > Configuration > Catalog > Attribute Swatches 7. After that, do not forget to refresh your Magento cache. ################################################# ##### NOTICE FOR PORTO THEME USERS: The PORTO THEME template folder comes with its own version of the attributeswatches plugin, however, they are outdated now because many changes have been introduced lately, you should rather rename or remove these folders skin/frontend/smartwave/porto/attributeswatches app/design/frontend/smartwave/porto/template/attributeswatches And then the ones in the base folder are in use: skin/frontend/base/default/attributeswatches app/design/frontend/base/default/template/attributeswatches If you need to customize any of the files inside those folders, we recommend to rather copy the files to the folder: skin/frontend/smartwave/porto/attributeswatches app/design/frontend/smartwave/porto/template/attributeswatches ################################################# ##### 8. Alternate images on hover for the products list: You can use the existing image attributes: image, thumbnail or small_image. In case you want to use a new attribute:
- Go to Catalog > Attributes > Manage Attributes - Create an attribute of type "image", call it, for example, 'hover', then save it. - Then, go to Catalog > Attributes > Manage Attribute Sets, edit an existing attribute set, and add the newly created image attribute ( for example 'hover' ) to the "images" section, then save it. - If you edit a product of the modified attribute set, you should be able to see a new column on the "images" tab. - Go to System > Configuration > Catalog > Attributes Swatches > Alternate image on hover: enter the attribute code ( in this case 'hover', do not enter the label ) in the field, then save. 9. Importing product images: In case you need to import images for configurable products using a custom script for batch processing, there is not yet a method that will transform string values to color id's for the "Associated Attributes" column, but you could add a new column "associated_attributes" to the gallery item in your import script and insert values of the type: attribute[attribute_id]-[attribute_value_id], for example attribute92-20, where 92 is the id of the "color" attribute, and 20 is the attribute_value_id of 'Black', and that can be processed by the import script and inserted in the product gallery table. Otherwise, you can import those values directly to the table catalog_product_entity_media_gallery_value : column associated_attributes 10. On custom pages, cms pages or third party extensions with products lists or grids, the attribute swatches might not work as not all the css/js files are included, you need to add the layout handle: <update handle="attributeswatches_product_list" /> 11. On quickview plugins, cms pages or third party extensions that display one single product with options and the images gallery, the attribute swatches might not work as not all the css/js files are included, you need to add the layout handle: <update handle="attributeswatches_product_view" /> 12. To use a child product image in mini-cart blocks ( Option : Catalog > Attribute Swatches > Checkout > Override images in cart ): this option works on the cart page and on the mini-cart blocks, if that doesn't work on the cart mini-blocks, it can be either a conflict with another extension ( there are magento extension conflict tools available in MagentoConnect ) or the theme using a default or custom renderer for the configurable cart items instead of the configurable product renderer for configurable products. 13. For updating additional elements in the page using the switch-attribute feature:
First: change the id of the element in the table to "swatches-update-attribute-product_code-extra", with the -extra at the end. Then use this code to update the values: jquery(document).on("afterswitchattributes", function(e, values){ if( values && typeof(values["product_code"].value)!== "undefined"){ jquery("#swatches-update-attribute-product_codeextra").text(values["product_code"].value); } }); 14. TROUBLESHOOTING: If the extension does not seem to work correctly after installation, please check the following: # That Mage_configurableswatches extension is disabled in app/etc/modules/mage_configurableswatches.xml # Make sure your attributes have options in Catalog > Attributes > Manage Attributes, if the attributes you are planning to display as swatches ( color, size, texture, etc ) don't have options, nothing will work. # That the products you are planning to use to show swatches are configurable. # Go to System > Configuration > Catalog > Attributeswatches : select the attributes that will be displayed as swatches ( usually color, texture but they might have another name in your catalog configuration ) on the product view and products lists, also select the attributes that will be displayed as labels on the product details page ( usually size ) # Go to Attributes Swatches > Manage Items, see if the color options are there and make sure you fill some color codes or upload some swatches images. 15. If any doubt or comment, please do not hesitate to contact us. For faster resolution of issues, send an accurate description of the problem, screenshots, links to pages and steps to reproduce errors.