Choose a Color: Adding a Color Picker to Product Pages

Welcome to Episode IV of Matt's Musings. This month finds us looking at the product page...specifically the product attributes.

Let's say we have a clothing store selling t-shirts. Chances are, on the product page, we will offer two sets of attributes: color and size. Within Miva Merchant, there are several options on how the attributes can be displayed. Most commonly, for multi-variant attributes like these, we would choose drop-down list as our display type (although radio buttons are a good second choice). So after we set up our product attributes and view the product page, we see this familiar layout:

Now that's all fine and dandy, but what do those color names really mean? Wouldn't it be great if our shoppers could see the actual colors to make their decision easier? Maybe something like this:

Well I'm here to say, "Good news everybody...it can be done!" That's right, you can add swatches to your attributes with a minimal amount of coding changes. The beauty in this whole process is an often overlooked option that is available within a product's attribute settings.

Here is how a typical attribute's settings screen would look for a color drop-down list:

Notice the blank column of Image: this is where the magic starts. If this were a radio button set instead of a drop-down list, the image uploaded here would appear in place of the prompt on the product screen. However, by default, if you have a drop-down list and upload an image, nothing changes on the product screen. We will correct that in the next step by editing the product attribute template. For now, let's upload some images to the attribute list:

Now that we have the images uploaded and all our attributes set, let's make those code changes and get some images up on the product page. Copy the contents of the Product Attribute Template tab and paste it into your HTML editor. Your code should look similar to this:

	
		<table>
		<mvt:foreach iterator="attribute" array="attributes">
		 <tr>
		  <td class="prompt">
		   <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:code" value="&mvte:attribute:code;" />
		   <mvt:if expr="l.settings:attribute:template_code NE 0">
		    <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:template_code" value="&mvte:attribute:template_code;" />
		   </mvt:if>
		   <mvt:if expr="l.settings:attribute:type NE 'checkbox'">
		    <mvt:if expr="l.settings:attribute:image">
		     <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" />
		    <mvt:else>
		     <mvt:if expr="l.settings:attribute:required">
		      <span class="required">
		     <mvt:else>
		      <span>
		     </mvt:if>
		       &mvt:attribute:prompt;
		      </span>
		    </mvt:if>
		   <mvt:else>
		    &nbsp;
		   </mvt:if>
		  </td>
		  <td class="field">
		   <mvt:if expr="l.settings:attribute:type EQ 'text'">
		    <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" class="textfield" />
		   <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
		    <textarea name="Product_Attributes[&mvt:attribute:index;]:value">&mvte:attribute:value;</textarea>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
		    <mvt:foreach iterator="option" array="attribute:options">
		     <div>
		     <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND
		         ( l.settings:option:id EQ l.settings:attribute:default_id ) )   OR
		         ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
		      <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked />
		     <mvt:else>
		      <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" />
		     </mvt:if>
		     <mvt:if expr="l.settings:option:image">
		      <img src="&mvte:option:image;" alt="&mvte:option:prompt;" />
		     <mvt:else>
		      &mvte:option:prompt;
		     </mvt:if>
		     </div>
		    </mvt:foreach>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
		    <select name="Product_Attributes[&mvt:attribute:index;]:value">
		     <mvt:foreach iterator="option" array="attribute:options">
		      <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
		          ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
		       <option value="&mvte:option:code;" selected>&mvte:option:prompt;</option>
		      <mvt:else>
		       <option value="&mvte:option:code;">&mvte:option:prompt;</option>
		      </mvt:if>
		     </mvt:foreach>
		    </select>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
		    <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
		     <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked />
		    <mvt:else>
		     <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" />
		    </mvt:if>
		    <mvt:if expr="l.settings:attribute:image">
		     <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" />
		    <mvt:else>
		     <mvt:if expr="l.settings:attribute:required">
		      <span class="required">
		     <mvt:else>
		      <span>
		     </mvt:if>
		       &mvt:attribute:prompt;
		      </span>
		    </mvt:if>    
		   </mvt:if>
		  </td>
		 </tr>
		</mvt:foreach>
		</table>
		<div class="clear"></div>
	

Now we just need to add in an array to pull all the attribute images we uploaded to our product and place the output above the drop-down box.

	
		<mvt:elseif expr="l.settings:attribute:type EQ 'select'">
		 <mvt:foreach iterator="option" array="attribute:options">
		  <img src="&mvte:attribute:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" class="swatches" />
		 </mvt:foreach>
		 <select name="Product_Attributes[&mvt:attribute:index;]:value">
	

In this example you'll see the images will be displayed inline by default but have a class of "swatches" applied to them to make styling an easy process. That's all there is to it. You will now have your attribute images appear above your drop-down list attributes. Now a customer will know what you mean when you're offering a shirt in a color called "pond."

Until next time, Happy Coding

P.S. Here's the full Product Attribute Template with the new code in place.

Code: Adding a Color Picker to Product Pages

	
		<table>
		<mvt:foreach iterator="attribute" array="attributes">
		 <tr>
		  <td class="prompt">
		   <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:code" value="&mvte:attribute:code;" />
		   <mvt:if expr="l.settings:attribute:template_code NE 0">
		    <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:template_code" value="&mvte:attribute:template_code;" />
		   </mvt:if>
		   <mvt:if expr="l.settings:attribute:type NE 'checkbox'">
		    <mvt:if expr="l.settings:attribute:image">
		     <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" />
		    <mvt:else>
		     <mvt:if expr="l.settings:attribute:required">
		      <span class="required">
		     <mvt:else>
		      <span>
		     </mvt:if>
		       &mvt:attribute:prompt;
		      </span>
		    </mvt:if>
		   <mvt:else>
		    &nbsp;
		   </mvt:if>
		  </td>
		  <td class="field">
		   <mvt:if expr="l.settings:attribute:type EQ 'text'">
		    <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" class="textfield" />
		   <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
		    <textarea name="Product_Attributes[&mvt:attribute:index;]:value">&mvte:attribute:value;</textarea>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
		    <mvt:foreach iterator="option" array="attribute:options">
		     <div>
		     <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND
		         ( l.settings:option:id EQ l.settings:attribute:default_id ) )   OR
		         ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
		      <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked />
		     <mvt:else>
		      <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" />
		     </mvt:if>
		     <mvt:if expr="l.settings:option:image">
		      <img src="&mvte:option:image;" alt="&mvte:option:prompt;" />
		     <mvt:else>
		      &mvte:option:prompt;
		     </mvt:if>
		     </div>
		    </mvt:foreach>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
		    <mvt:foreach iterator="option" array="attribute:options">
		     <img src="&mvte:attribute:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" class="swatches" />
		    </mvt:foreach>
		    <select name="Product_Attributes[&mvt:attribute:index;]:value">
		     <mvt:foreach iterator="option" array="attribute:options">
		      <mvt:if expr="((g.Product_Attributes[l.settings:attribute:index]:value EQ 0) AND (l.settings:option:id EQ l.settings:attribute:default_id)) OR(g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code)">
		       <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;" selected>&mvte:option:prompt;</option>
		      <mvt:else>
		       <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;">&mvte:option:prompt;</option>
		      </mvt:if>
		     </mvt:foreach>
		    </select>
		   <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
		    <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
		     <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked />
		    <mvt:else>
		     <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" />
		    </mvt:if>
		    <mvt:if expr="l.settings:attribute:image">
		     <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" />
		    <mvt:else>
		     <mvt:if expr="l.settings:attribute:required">
		      <span class="required">
		     <mvt:else>
		      <span>
		     </mvt:if>
		       &mvt:attribute:prompt;
		      </span>
		    </mvt:if>    
		   </mvt:if>
		  </td>
		 </tr>
		</mvt:foreach>
		</table>
		<div class="clear"></div>