Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Colour Swatch

Colour variations in the form of coloured square swatches, giving people a visual breakdown of the hues on offer.

Industries

  • Fashion
  • Health & Beauty
  • Furniture & Homewares
  • Music & Instruments
  • Jewellery & Accessories
  • Arts & Crafts
  • Events & Party Supplies

Wireframe

Colour Swatch

Coding Instructions

Open thumbs/product/template.html, and paste the below code directly underneath the <h3> line:

<div class="nColourList">
    [%if [@has_child@]%]
            [%list_item_variations id:'[@sku@]'%]
                [%param *variation_body%]
                    [%if [@specific_name@] eq 'Colour'%]
                        [%if [@value_image@]%]
                            <div class="nSwatch" style="background-image:url([@value_image@])"></div>
                        [%else%]
                            <div class="nSwatch" style="background-color:[@value_swatch@];"></div>
                        [%/if%]
                    [%/if%]
                [%/param%]
            [%/list_item_variations%]
    [%/if%]
</div>

Notes On The Above Code

This code outputs the "Colour" specific values for every child variation of the product. In order for the above to work, the specific name itself must be set to "Colour".

Firstly, the code tests to see whether an image exists for that particular specific value, and displays it if so. In the absence of an image, it displays the "swatch" value for the specific instead.

Step 2. Add the variations code to the list view thumb

Open thumbs/product/list.template.html, and paste the below code directly underneath the <p>[@short_description@]</p> line:

<div class="nColourList">
    [%if [@has_child@]%]
            [%list_item_variations id:'[@sku@]'%]
                [%param *variation_body%]
                    [%if [@specific_name@] eq 'Colour'%]
                        [%if [@value_image@]%]
                            <div class="nSwatch" style="background-image:url([@value_image@])"></div>
                        [%else%]
                            <div class="nSwatch" style="background-color:[@value_swatch@];"></div>
                        [%/if%]
                    [%/if%]
                [%/param%]
            [%/list_item_variations%]
    [%/if%]
</div>

Step 3. Add the CSS

Add the below CSS to the appropriate stylesheet:

.nSwatch {
    margin: 0;
    border-radius:100%;
    box-shadow:inset 0px 0px 1px 0px rgba(0, 0, 0, 1);
    height: 20px;
    width:20px;
    display:inline-block;
}
.nColourList {
    margin:0 0 10px;
    min-height:25px;
}

Final Result

Download Files

Download Files

Adding support for image swapping on hover

Load product variations on hover

This feature generates a list of variations, then changes the loaded image on the thumbnail to reflect the image that belongs to this variation during a hover state. Typically, you'll see this used for something like a product colour, where, for example, hovering over the colour specific, "Green" will load the "Green" primary image of the product.

Coding instructions

On your thumbnail template, you'll need

[%list_item_variations id:'[@sku@]'%]
    [%param *variation_body%]
        <a href="#" data-variation-image="[%asset_url type:'product' thumb:'thumb' id:'[@variation_sku@]'/%]" class="thumbnailVariation" >
        [%if [@value_image@]%]
            <img src="[@value_image@]" alt="[@value_name@]" />
        [%else%]
            <div style="background-color:[@value_swatch@];">[@value_name@]</div>
        [%/if%]
        </a>
    [%/param%]
[%/list_item_variations%]

Then you'll want to load this Javascript globally (As thumbnails appear in most places in your website). The footer is ideal.

[%site_value id:'footer_javascript'%]
    <script>
        $('.thumbnailVariation').hover(function(){
            var newSource = $(this).attr('data-variation-image');
            $(this).siblings('.thumbnail-image').children('img').attr('src', newSource);
        });
    </script>
[%/site_value%]