How to make swatches show up next to their respective attribute

[Brennan]

If you have every worked with swatches and have tried to setup a product where there are multiple swatch drop downs on a single product (color, material, etc) you will know that by default Miva groups all swatches into a single "swatches" container.

Here is how you can change it so each swatch group displays next to its corresponding drop down:

1. Add a swatches div for each attribute
- Go to PROD, edit the Product Attribute Template
- Look for the code that starts the swatches drop down:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">

add this line below the line above:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">
[COLOR=#ff0000]<div id="swatch-&mvt:attribute:id;" class="swatches"></div>[/COLOR]

2. Modify the Generate Swatch Function:
-Go to PROD, then Attribute Machine Tab
- In the Head section replace what is there with this (new code in red):

<script>
AttributeMachine.prototype.Generate_Swatch = function( product_code, attribute, option )
{
	[COLOR=#ff0000]this.swatches   =  document.getElementById('swatch-' + attribute.id);[/COLOR]
        var swatch	= document.createElement( 'li' );
	var span	= document.createElement( 'span' ); // to vertically center the swatch images
	var img		= document.createElement( 'img' );
	img.src		= option.image;


	swatch.appendChild( span );
	swatch.appendChild( img );


	return swatch;
}
[COLOR=#ff0000]AttributeMachine.prototype.oninitializeswatches = function( attributes, possible )[/COLOR]
[COLOR=#ff0000]{[/COLOR]
[COLOR=#ff0000]	$(".swatches").empty();[/COLOR]
[COLOR=#ff0000]	this.Initialize_Swatches( attributes, possible );[/COLOR]
[COLOR=#ff0000]}[/COLOR]
</script>

The code above uses jQuery to empty the swatches div when you change a selection. In order for that to work correctly you also need to have jQuery being called in:

Add this to your Head Tag if you are currently not using jQuery:

[FONT=monospace]<script type="text/javascript" src="[URL="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"]//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]">[/FONT][FONT=monospace]</script>[/FONT][COLOR=#000000][FONT=monospace][/FONT][/COLOR]

[anne226]

Re: How to make swatches show up next to their respective attribute

Can you use this with the inventory variants?

[Brennan]

Re: How to make swatches show up next to their respective attribute

Yeah you can use this with or without variants. It shouldn't matter either way.

[alphabet]

Re: How to make swatches show up next to their respective attribute

Thank you Brennan for sharing that code. I was able to get the multiple swatches to display next to their respective attributes.

I made thumbnails for the swatches and included a popover of a larger swatch preview when the user mouse over the thumbnail.

Here are the additional changes to the attribute template in blue:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">

[COLOR=#0000ff]<div class="swatch-container">[/COLOR]
[COLOR=#0000cd]<mvt:foreach iterator="option" array="attribute:options">[/COLOR]
[COLOR=#0000cd]<div id="&mvte:option:id;_swatch_preview" class="swatch_preview" style="display: none;">[/COLOR]
[COLOR=#0000cd]<img src="&mvte:option:image;" alt="&mvte:option:prompt; preview swatch">[/COLOR]
[COLOR=#0000cd]<div class="swatch_caption">&mvt:option:prompt;</div>[/COLOR]
[COLOR=#0000cd]</div>[/COLOR]
[COLOR=#0000cd]</mvt:foreach>[/COLOR]


[COLOR=#ff0000]<div id="swatch-&mvt:attribute:id;" class="swatches"></div>[/COLOR]<[COLOR=#0000cd]div class="clear"></div>[/COLOR] 
           <div class="prompt">&mvt:attribute:prompt;</div>
            <div class="optselect">
                <select <mvt:if expr="l.all_settings:attribute:required">required="required"</mvt:if> 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; [COLOR=#0000cd]<mvt:if expr="l.settings:option:price GT 0">&nbsp;+&mvte:option:formatted_price;</mvt:if>[/COLOR]</option>
                        <mvt:else>
                            <option value="&mvte:option:code;">&mvte:option:prompt; [COLOR=#0000cd]<mvt:if expr="l.settings:option:price GT 0">&nbsp;+&mvte:option:formatted_price;</mvt:if>[/COLOR]</option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            [COLOR=#000000]</div>[/COLOR]
[COLOR=#0000cd]</div> <!-- .swatch-container -->[/COLOR]

Then in the Attribute Machine Head Template I added the code in blue:

<script>
AttributeMachine.prototype.Generate_Swatch = function( product_code, attribute, option )
{
    [COLOR=#ff0000]this.swatches   =  document.getElementById('swatch-' + attribute.id);[/COLOR]
        var swatch    = document.createElement( 'li' );
[COLOR=#0000cd]       var a = document.createAttribute('data-target');[/COLOR]
[COLOR=#0000cd]       a.nodeValue = (option.id + '_swatch_preview');[/COLOR]
[COLOR=#0000cd]       swatch.setAttributeNode(a);[/COLOR]
    var span    = document.createElement( 'span' ); // to vertically center the swatch images
    var img        = document.createElement( 'img' );
    img.src        = option.image;


    swatch.appendChild( span );
    swatch.appendChild( img );


    return swatch;
}
[COLOR=#ff0000]AttributeMachine.prototype.oninitializeswatches = function( attributes, possible )[/COLOR]
[COLOR=#ff0000]{[/COLOR]
[COLOR=#ff0000]   $(".swatches").empty();[/COLOR]
[COLOR=#ff0000]   this.Initialize_Swatches( attributes, possible );[/COLOR]
[COLOR=#0000cd]    $('.swatches li').hover([/COLOR]
[COLOR=#0000cd]        function () {[/COLOR]
[COLOR=#0000cd]   $('#'+$(this).attr('data-target')).css({"display":"block"});[/COLOR]
[COLOR=#0000cd]        }, [/COLOR]
[COLOR=#0000cd]        function () {[/COLOR]
[COLOR=#0000cd]   $('#'+$(this).attr('data-target')).css({"display":"none"});[/COLOR]
[COLOR=#0000cd]        }[/COLOR]
[COLOR=#0000cd]    );[/COLOR]
[COLOR=#ff0000]}[/COLOR]
</script>

I made my swatch thumbnails 16 x 16 px and the swatch-previews 120 x 120px. Each merchant can style to their taste but here is some CSS to start with for the popover effect:

.swatch-container {
    position:relative;
    width:100%;
    display:block;
    clear:both;
}

.swatch_preview {
    position: absolute;
    top: -140px;
    right: 50px;
    width: 120px;
    height: 140px;
    z-index: 1;
    border: 1px solid gray;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    background: #fff;
}

A caveat: I tested this in all four modern browsers and IE7+ without any problems. This code does not work on touch devices. A solution would be to add some javascript or touch library that will convert hover to click events. Another solution is to add code to be device responsive.

I am using large variant images in the product-image div. The small swatch thumbnails with a large swatch-preview allows me to display the attribute swatch-selections above the fold and next to the product-image-variants. This makes it easier for a user to make a swatch-selection and see the product-variant image displayed without scrolling. It would also leave the user's mouse near the add-to-cart button.

I have this on a test page template that may not stay active so PM me for a link if you need to see it in action.

[jburton]

Re: How to make swatches show up next to their respective attribute

Hey Everyone,

I just wanted to make a quick addition to this post. We've seen some issues in using this code with attribute templates due to the fact that the IDs tend to work a little bit differently in cases where products are using an attribute template that contains swatch attributes.

To fix this, You can update the code in your Product Attribute Template to account for the attribute templates when they exist.

Replace

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )"> 
[COLOR=#ff0000]<div id="swatch-&mvt:attribute:id;" class="swatches"></div>[/COLOR]

With

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">[COLOR=#ff0000]
[/COLOR][COLOR=#ff0000]<mvt:if expr="l.settings:attribute:attemp_id NE 0">
<div id="swatch-&mvt:attribute:attmpat_id;" class="swatches"></div>
<mvt:else>
<div id="swatch-&mvt:attribute:id;" class="swatches"></div>
</mvt:if>[/COLOR]

[alphabet]

Re: How to make swatches show up next to their respective attribute

Thank you. That is a nice addition to the code.

[lesliekirk]

If you have every worked with swatches and have tried to setup a product where there are multiple swatch drop downs on a single product (color, material, etc) you will know that by default Miva groups all swatches into a single "swatches" container.

Here is how you can change it so each swatch group displays next to its corresponding drop down:

1. Add a swatches div for each attribute
- Go to PROD, edit the Product Attribute Template
- Look for the code that starts the swatches drop down:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">

add this line below the line above:

<mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">
[COLOR=#ff0000]<div id="swatch-&mvt:attribute:id;" class="swatches"></div>[/COLOR]

2. Modify the Generate Swatch Function:
-Go to PROD, then Attribute Machine Tab
- In the Head section replace what is there with this (new code in red):

<script>
AttributeMachine.prototype.Generate_Swatch = function( product_code, attribute, option )
{
[COLOR=#ff0000]this.swatches = document.getElementById('swatch-' + attribute.id);[/COLOR]
var swatch = document.createElement( 'li' );
var span = document.createElement( 'span' ); // to vertically center the swatch images
var img = document.createElement( 'img' );
img.src = option.image;


swatch.appendChild( span );
swatch.appendChild( img );


return swatch;
}
[COLOR=#ff0000]AttributeMachine.prototype.oninitializeswatches = function( attributes, possible )[/COLOR]
[COLOR=#ff0000]{[/COLOR]
[COLOR=#ff0000] $(".swatches").empty();[/COLOR]
[COLOR=#ff0000] this.Initialize_Swatches( attributes, possible );[/COLOR]
[COLOR=#ff0000]}[/COLOR]
</script>

The code above uses jQuery to empty the swatches div when you change a selection. In order for that to work correctly you also need to have jQuery being called in:

Add this to your Head Tag if you are currently not using jQuery:

[FONT=monospace]<script type="text/javascript" src="[URL="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"]//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]">[/FONT][FONT=monospace]</script>[/FONT][COLOR=#000000][FONT=monospace][/FONT][/COLOR]

I just realized that this snippet is for MM5.5 - I need to do this in MM9 Iron & Wool Ready Theme. Has anybody accomplished this?