Copy of Product Image Switching with Tags

Overview

Product images can be tagged in the CMS so that the image in the gallery changes on selection of an attribute. 

To see an example of this, go to https://www.elevenworkwear.com.au/men-s/pants/pant-cargo-cool-ripstop and select a colour option from the dropdown list.

You'll notice the image in the gallery updates according to the colour you choose. 

To enable this functionality, a product must have multiple images loaded, tags added, and a trigger created.  This guide details the steps required. 

1. Create the Trigger 

You'll need to create a trigger against the ProductAttributeProduct table.

Copy the code below, replacing 'XXXX' with the name of the database. 

USE [CSSXXXX]
GO
/****** Object:  Trigger [dbo].[ProductAttributeProductTrigger]    Script Date: 10/25/2016 13:23:32 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================            
-- 30jun15 JB Change in the field tag names for the product media 
-- =============================================            
ALTER TRIGGER [dbo].[ProductAttributeProductTrigger]          
   ON  [dbo].[ProductAttributeProduct]            
   AFTER INSERT, UPDATE          
AS             
BEGIN          
DECLARE @ProductAttributeProductID varchar(50);          
SELECT @ProductAttributeProductID = AttributedProductCode
FROM INSERTED;          
 
 SET NOCOUNT ON;            
 UPDATE ProductAttributeProduct
 SET AttributeTitleTagSeq = AttributeTitleValueSeq,
  fwUpdated = GETDATE(),
  fwUpdatedBy = 'spUpdateProductAttributeProductTags'
  WHERE AttributeTitleTagSeq != AttributeTitleValueSeq
  AND AttributedProductCode = @ProductAttributeProductID
END 

2. Upload and Tag product images

Next, upload images against the product and add tags to each image.  The customer can be completing this step while you set up their trigger.

1. Login to CMS.
2. Navigate to Products & Categories → Product Maintenance. 
3. Search for a product and click 'Edit'. 
4. Scroll to the Media section and click 'Upload Image' to add a new image.
5. Browse to the image file and select it. Once it's 100% loaded, click 'Add'.
    
6. The image should now appear in the list. 
7. Add a Tag to differentiate the image (e.g. 'Navy' or 'Khaki'). 
    
8. Repeat Steps 4-7 as necessary for additional images.
9. Click 'Save' or 'Save and Exit'. 

3. Add the Product Gallery widget

This was most likely done during build, but in case not...

Add the Product Gallery widget to the Product Detail Template.

4. Test 

1. Check that the AttributeTitleTagSeq field has been populated by your trigger:

   SELECT AttributeTitleTagSeq, *
   FROM    ProductAttributeProduct

2. Navigate to the detail view page for a product with tagged images. 
3. Select an attribute option and verify that the image updates.