In Chapter 4, Product Details Templates, we worked on an exercise to use a radio button instead of the drop-down box for displaying the advanced attribute. The change was done by customizing the addtocart_advanced_attribute.tpl.php template. We can further customize the template to provide a lot more possibilities. In the following exercise, we will supplement the radio button with images.
In this exercise, we will modify the advanced attribute template to show the attribute as a list of radio buttons which include images in addition to text labels. We will also add an onclick event handler to change the product image to synchronize with the radio button selection. To illustrate the effect, we will use the product Shovel (product_id=3). This product has two advanced attributes: Colour and Size. We will show an image for each of the colors and the product image will change when the Colour selection...