Multiple Attributes with swatches

[lesliekirk]

Brennan posted code for MM5.5 http://extranet.mivamerchant.com/for...955#post413955 but I need to this in Iron and Wool. Has anybody been able to accomplish this?

[Matt Zimmermann]

Hi Leslie,

Using the same code should work although you may need to make some class adjustments and make sure the swatch select element is not hidden or commented out.

[lesliekirk]

The code is a tad bit different, so where would I edit this?

<mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
        <mvt:assign name="g.hasSwatches" value="'1'" />
        <mvt:assign name="g.swatch_prompt" value="l.settings:attribute:prompt" />
        <div class="form-row all-hidden">
            <mvt:if expr="l.settings:attribute:required">
                <label for="js-swatch-select" title="&mvt:attribute:prompt;" class="medium">&mvt:attribute:prompt;</label>
            <mvt:else>
                <label for="js-swatch-select" title="&mvt:attribute:prompt;">&mvt:attribute:prompt;</label>
            </mvt:if>
            <select name="Product_Attributes[&mvt:attribute:index;]:value" id="js-swatch-select" class="input-medium" data-attribute="&mvte:attribute:code;">
                <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;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
                            &mvte:option:prompt;
                            <mvt:if expr="l.settings:option:price">
                                <mvt:if expr="l.settings:option:price GT 0">
                                    &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
                                <mvt:else>
                                    &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
                                </mvt:if>
                            </mvt:if>
                        </option>
                    <mvt:else>
                        <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
                            &mvte:option:prompt;
                            <mvt:if expr="l.settings:option:price">
                                <mvt:if expr="l.settings:option:price GT 0">
                                    &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
                                <mvt:else>
                                    &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)" />
                                </mvt:if>
                            </mvt:if>
                        </option>
                    </mvt:if>
                </mvt:foreach>
            </select>
        </div>

I think I may need to go look at a fresh install of Iron & Wool to make sure I have all the correct parts. I was just wondering if someone had already been able to do this in one of the MM9 ReadyThemes and might be able to provide some insight.

[Matt Zimmermann]

Hi Leslie,

For the product attribute template code, you might try this:

<mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
    <div class="form-row">
        <mvt:if expr="l.settings:attribute:required">
            <label for="js-swatch-select" title="&mvt:attribute:prompt;" class="medium">&mvt:attribute:prompt;</label>
        <mvt:else>
            <label for="js-swatch-select" title="&mvt:attribute:prompt;">&mvt:attribute:prompt;</label>
        </mvt:if>
        <span id="js-swatch-name" class="bold swatch-name">&nbsp;</span>
        <hr noshade />
        <mvt:if expr="l.settings:attribute:attemp_id NE 0">
            <div id="js-swatch-&mvt:attribute:attmpat_id;" class="product-swatches"></div>
        <mvt:else>
            <div id="js-swatch-&mvt:attribute:id;" class="product-swatches"></div>
        </mvt:if>
        <select name="Product_Attributes[&mvt:attribute:index;]:value" id="js-swatch-select" class="input-medium" data-attribute="&mvte:attribute:code;">
            <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;" data-option-price="&mvt:option:price;" data-regular-price="" selected>
                        &mvte:option:prompt;
                        <mvt:if expr="l.settings:option:price">
                            <mvt:if expr="l.settings:option:price GT 0">
                                &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)"/>
                            <mvt:else>
                                &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)"/>
                            </mvt:if>
                        </mvt:if>
                    </option>
                <mvt:else>
                    <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
                        &mvte:option:prompt;
                        <mvt:if expr="l.settings:option:price">
                            <mvt:if expr="l.settings:option:price GT 0">
                                &nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)"/>
                            <mvt:else>
                                &nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:option:price, 2)"/>
                            </mvt:if>
                        </mvt:if>
                    </option>
                </mvt:if>
            </mvt:foreach>
        </select>
    </div>

Be sure to remove this section from the product details to prevent conflict:

<mvt:if expr="g.hasSwatches">
    <div class="column whole product-swatches">
        <label class="medium">&mvte:global:swatch_prompt;</label>
        <span id="js-swatch-name" class="bold swatch-name">&nbsp;</span>
        <hr noshade />
        <div id="js-swatches"></div>
    </div>
</mvt:if>

[lesliekirk]

Thanks Matt, I still think I'm going to need to try this on a fresh install. Something is conflicting. The product details didn't have the g.hasSwatches - so something is going on probably within some other modification I have.

[lesliekirk]

Following up on this. I changed the code in the attribute template and removed the section from the product details. I did this in a fresh install. Before I made the change I had 3 sets of thumbnails but only one Attribute prompt (for the third set of attribute swatch swaps). But even with 3 sets of swatches, they all controlled the one Attribute Prompt / Option



After I changed the code, I lost all the thumbnails, it reverted to just drop downs with only the first set of them displaying the Option name.




Yes, there are swatches messing, yada yada but I had to throw this together in a dts site to be able to do a fresh install of Iron & Wool.