Swatch functionality with radio buttons/attribute templates

[emdub]

Is this possible, or can you only do swatches as a drop-down?

I watched the video on Attributes and Swatches, but what I need to do isn't exactly the same as that.

I have a software product that is available in 8 formats(attributes): each format has a different logo on the box cover. I want the cover to change to reflect the selected swatch. It seems that the Swatch Attribute would do it, but I need the attributes to display as radio buttons using an attribute template that I am already using on most of my other products.

(It needs to use the same attribute template in order for it to work properly with our softgoods module).

[Mark Hood]

Re: Swatch functionality with radio buttons/attribute templates

Radio buttons will also swap out the image just like the drop down swatch select does.

http://www.vermontgear.com/A10X.html

[emdub]

Re: Swatch functionality with radio buttons/attribute templates

Very cool!

How did you set that up? I only see "Swatch - Drop-down List".

If I'm using attribute templates, what would happen if some products using the swatch attribute don't have/need different swatches? Can I get away with not giving them extra images?

[Mark Hood]

Re: Swatch functionality with radio buttons/attribute templates

It's set up exactly the same as the swatch select as far as making it work (simply choose radio button option instead of swatch select) but having the image and name both shown is part of the product attribute template.

<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;" /> &mvte:option:prompt;
                    <mvt:else>
                        &mvte:option:prompt;
                    </mvt:if>
                    </div>
                </mvt:foreach>
            <mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-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>

[Mark Hood]

Re: Swatch functionality with radio buttons/attribute templates

To swap images you have to use inventory variants. Do you already?

Regardless though if you upload an image to the main product and not variants it will simply default to that if nothing is uploaded to the variant. Uploading more that one image to each variant is also possible but for that situation you would only upload one image to the main product. Next comment begin using image types and make sure you assign them to the images. This is the only way to get additional images to export to a file.

[emdub]

Re: Swatch functionality with radio buttons/attribute templates

Are you saying that if I use the regular "Radio Button" attribute, but use inventory variants, all I have to do is give those variants different main images, then the image will be swapped when a customer selects a different radio button in the parent product?

I just tried doing a test of that, but it doesn't seem to work.

[Mark Hood]

Re: Swatch functionality with radio buttons/attribute templates

Are you saying that if I use the regular "Radio Button" attribute, but use inventory variants, all I have to do is give those variants different main images, then the image will be swapped when a customer selects a different radio button in the parent product?

I just tried doing a test of that, but it doesn't seem to work.

Yes basically as long as you have all your templates done correctly a radio button will swap the same way the swatch select drop down works.

[emdub]

Re: Swatch functionality with radio buttons/attribute templates

I guess I need to take a look at my product page templates to sort this out.

[BkraM]

Re: Swatch functionality with radio buttons/attribute templates

Is there a way to get the main radio button images (not individual attribute images) swappable with the main product image on a click. I dont want to use inventory variants for this. This page is using the toolkit multiple product addition functions but I would like to be able to click those images on the right and swap an image with the main image.

http://www.racquetgalaxy.com/RG/product/AdiTenCloAdizeroCrew.html

[lesliekirk]

Re: Swatch functionality with radio buttons/attribute templates

Mark do you have another example of this in action?

Radio buttons will also swap out the image just like the drop down swatch select does.
http://www.vermontgear.com/A10X.html

Thanks!
Leslie

[Mark Hood]

Re: Swatch functionality with radio buttons/attribute templates

Mark do you have another example of this in action?



Thanks!
Leslie

http://www.vermontgear.com/100631.html