Swatch Select: Active Class not Working?

[afiumano]

Here is a sample page using the Select Swatch attribute: https://dts2290.mivamerchantdev.com/...-memorial-tree The first thumbnail is 'highlighted' and uses the 'active' class. But if you select any other option, the active class does not move - it stays with the first thumbnail. Any fix for this?

[Matt Zimmermann]

Is this a stock layout for Colossus or has any custom functionality been added? I ask because the swatch function appears to be working fine on the demonstration site: https://colossus.mivareadythemes.com...hirt-mens.html

[afiumano]

It isn't 100% stock - I was playing with the main navigation - everything in the PROD template is stock. I am not seeing any errors in developer console. Any ideas what I can check? It isn't working in my dev store either but it is heavily modified.

[Matt Zimmermann]

That's a puzzler. In Firefox, I am seeing an error relating to the navigation, but it doesn't appear in Chrome. Have you added any event handlers for clicks that may be hijacking the action?

[afiumano]

Weird - I am not seeing any errors in Firefox. (I was playing with it a little while ago to try to revert all my nav changes but that just caused more problems so I undid that). I don't think I have done any event handlers on this particular site. I had reuploaded the stock version of the themes.js file a bit ago.

[afiumano]

I reverted everything back to stock colossus, but I still can't get the thumbnail selector to work properly: https://dts2290.mivamerchantdev.com/southern-magnolia-memorial-tree. This is the Head Template for the Attribute Machine in the PROD template:

AttributeMachine.prototype.Generate_Discount = function (discount) {
    var discount_div;

    discount_div = document.createElement('div');
    discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;

    return discount_div;
};

AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
    var swatch_container = document.querySelector('#&mvt:attributemachine:swatch_element_id;');
    var swatch = document.createElement('li');
    var img = document.createElement('img');

    img.src = option.image;
    img.setAttribute('alt', option.prompt);
    img.setAttribute('title', option.prompt);
    swatch.classList.add('o-list-inline__item');
    swatch.setAttribute('data-code', option.code);
    swatch.setAttribute('data-color', option.prompt);
    swatch.appendChild(img);

    setTimeout(function () {
        if (swatch_container) {
            var swatch_element = swatch_container.querySelector('ul');
            var swatch_select = document.querySelector('[data-hook="attribute-swatch-select"]');
            var swatch_selected = swatch_select.options[swatch_select.selectedIndex].text;
            var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
            var swatchElements = swatch_element.querySelectorAll('li');

            swatch_element.removeAttribute('style');
            swatch_element.classList.add('o-list-inline');
            /**
             * Adds the selected swatch name to the label.
             */
            swatch_name_element.textContent = swatch_selected;

            /**
             * Adds an active class to the selected swatch.
             */
            swatchElements.forEach(function (swatchElement) {
                var swatchColor = swatchElement.getAttribute('data-code');
                var swatchImage = swatchElement.querySelector('img');

                if (swatchColor === swatch_select.options[swatch_select.selectedIndex].value) {
                    swatchImage.classList.add('x-product-layout-purchase__swatches--active');
                }
            });
        }
    }, 0);

    return swatch;
};

AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
    var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
    var i;

    for (i = 0; i < input.select.options.length; i++) {
        if (input.select.options[i].value === option.code) {
            input.select.selectedIndex = i;
        }
    }

    if (attribute.inventory) {
        this.Attribute_Changed(input);
    }

    swatch_name_element.innerHTML = option.prompt;
};

[Matt Zimmermann]

Do you have any other products with swatches and, when you reverted the code, did you also revert the product attribute template?

[afiumano]

I actually had not made any changes to the attribute template on this one. See code below. This was the only product with the swatches but I went ahead and added another: https://dts2290.mivamerchantdev.com/...membrance-gift

<mvt:foreach iterator="attribute" array="attributes">
    <mvt:assign name="l.settings:attribute_ID" value="'l-' $ tolower(l.settings:attribute:code)" />
    <mvt:if expr="l.settings:attribute:required">
        <mvt:assign name="l.settings:required_attribute" value="'required'" />
        <mvt:assign name="l.settings:required_attribute_classes" value="'u-text-bold is-required'" />
    <mvt:else>
        <mvt:assign name="l.settings:required_attribute" value="''" />
        <mvt:assign name="l.settings:required_attribute_classes" value="''" />
    </mvt:if>
    <input data-attribute-type="&mvte:attribute:type;" type="hidden" name="Product_Attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;">
    <mvt:if expr="l.settings:attribute:template_code NE 0">
        <input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:template_code" value="&mvte:attribute:template_code;">
    </mvt:if>
    <mvt:if expr="l.settings:attribute:type EQ 'text'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item">
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvte:attribute:prompt;</label>
            <input id="&mvt:attribute_ID;" class="c-form-input c-form-input--large" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" placeholder="" &mvt:required_attribute;>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item">
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvte:attribute:prompt;">&mvte:attribute:prompt;</label>
            <textarea id="&mvt:attribute_ID;" class="c-form-input c-form-input--large c-form-input--long" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" name="Product_Attributes[&mvt:attribute:index;]:value" placeholder="" &mvt:required_attribute;>&mvte:attribute:value;</textarea>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item" data-hook="update-selection">
            <span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
                &mvte:attribute:prompt; <span data-hook="update-selection-label">&nbsp;</span>
            </span>
            <mvt:foreach iterator="option" array="attribute:options">
                <label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline x-radio-to-button" title="&mvt:option:prompt;">
                    <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 class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" checked &mvt:required_attribute;>
                    <mvt:else>
                        <input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" &mvt:required_attribute;>
                    </mvt:if>
                    <span class="c-form-checkbox__caption">
                        <mvt:if expr="l.settings:option:image">
                            <img src="&mvte:option:image;" alt="&mvte:option:prompt;" title="&mvte:option:prompt;" />
                        <mvt:else>
                            &mvte:option:prompt;
                        </mvt:if>
                    </span>
                </label>
            </mvt:foreach>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item" data-hook="update-selection">
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvt:attribute:prompt;">
                &mvt:attribute:prompt; <span data-hook="update-selection-label">&nbsp;</span>
            </label>
            <div class="c-form-select u-invisible">
                <select id="&mvt:attribute_ID;" class="c-form-select__dropdown c-form-input--large" data-attribute="&mvte:attribute:code;" name="Product_Attributes[&mvt:attribute:index;]:value" &mvt:required_attribute;>
                    <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;
                            </option>
                        <mvt:else>
                            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
                                &mvte:option:prompt;
                            </option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            </div>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item">
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="&mvt:attribute_ID;" title="&mvt:attribute:prompt;">&mvt:attribute:prompt; <span data-hook="attribute-swatch-name">&nbsp;</span></label>
            <div class="c-form-select u-hidden">
                <select id="&mvt:attribute_ID;" class="c-form-select__dropdown c-form-input--large" data-attribute="&mvte:attribute:code;" data-hook="attribute-swatch-select" name="Product_Attributes[&mvt:attribute:index;]:value" &mvt:required_attribute;>
                    <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;
                            </option>
                        <mvt:else>
                            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="">
                                &mvte:option:prompt;
                            </option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            </div>
            <div id="swatches" class="x-product-layout-purchase__swatches"></div>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
        <div class="x-product-layout-purchase__options-attribute o-layout__item">
            <span class="c-form-label u-block">&nbsp;</span>
            <label class="c-form-checkbox &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">
                <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
                    <input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" checked &mvt:required_attribute;>
                <mvt:else>
                    <input class="c-form-checkbox__input" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" &mvt:required_attribute;>
                </mvt:if>
                <span class="c-form-checkbox__caption">
                    <mvt:if expr="l.settings:attribute:image">
                        <img src="&mvte:attribute:image;" alt="&mvte:attribute:prompt;" title="&mvte:attribute:prompt;">
                    <mvt:else>
                        &mvte:attribute:prompt;
                    </mvt:if>
                </span>
            </label>
        </div>
    </mvt:if>
</mvt:foreach>
<mvt:if expr="l.settings:subscription:enabled AND l.settings:subscription:term_count">
    <div class="x-product-layout-purchase__options-attribute o-layout__item x-subscription-combo">
        <mvt:if expr="l.settings:subscription:mandatory">
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="l-subscription-mandatory" title="Subscribe">Select Subscription</label>
            <div class="c-form-select">
                <select id="l-subscription-mandatory" class="c-form-select__dropdown c-form-input--large" name="Product_Subscription_Term_ID" &mvt:required_attribute;>
                    <mvt:foreach iterator="term" array="subscription:terms">
                        <option value="&mvte:term:id;">&mvte:term:descrip;</option>
                    </mvt:foreach>
                </select>
            </div>
        <mvt:else>
            <label class="c-form-label u-block &mvt:required_attribute_classes;" for="l-subscription" title="Subscribe">Subscription</label>

            <label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline" title="Order Once">
                <mvt:if expr="g.Product_Subscription_Term_ID EQ 0">
                    <input class="c-form-checkbox__input" type="radio" name="Product_Subscription_Term_ID" value="0" checked>
                <mvt:else>
                    <input class="c-form-checkbox__input" type="radio" name="Product_Subscription_Term_ID" value="0">
                </mvt:if>
                <span class="c-form-checkbox__caption">
                    <span class="u-text-uppercase">Order</span>
                    <strong>Once</strong>
                </span>
            </label>

            <label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline" data-hook="select-subscription" title="Select Subscription">
                <mvt:if expr="g.Product_Subscription_Term_ID NE 0">
                    <input class="c-form-checkbox__input" type="radio" name="Product_Subscription_Term_ID" value="" aria-label="Select Subscription" checked>
                <mvt:else>
                    <input class="c-form-checkbox__input" type="radio" name="Product_Subscription_Term_ID" value="" aria-label="Select Subscription">
                </mvt:if>
                <span class="c-form-checkbox__caption">
                    <span class="c-form-select">
                        <select id="l-subscription" class="c-form-select__dropdown c-form-input--large" name="Product_Subscription_Term_ID">
                            <mvt:foreach iterator="term" array="subscription:terms">
                                <option value="&mvte:term:id;">&mvte:term:descrip;</option>
                            </mvt:foreach>
                        </select>
                    </span>
                </span>
            </label>

        </mvt:if>
    </div>
</mvt:if>
<input data-hook="product-attribute__count" type="hidden" name="Product_Attribute_Count" value="<mvt:eval expr="miva_array_elements(l.settings:attributes)" />">

[Matt Zimmermann]

I am honestly at a loss here as all the code looks correct. I would recommend contacting Support or Professional Services and have them take a look at the configuration and code within the site.

[afiumano]

So the fix for this was switching out the code in the Attribute Machine Head tag on the PROD page because for some reason it was missing. Below is the replacement code from support that made it work:

AttributeMachine.prototype.Generate_Discount = function (discount) {
    var discount_div;

    discount_div = document.createElement('div');
    discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;

    return discount_div;
};

AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
    var swatch_container = document.querySelector('#&mvt:attributemachine:swatch_element_id;');
    var swatch = document.createElement('li');
    var img = document.createElement('img');

    img.src = option.image;
    img.setAttribute('alt', option.prompt);
    img.setAttribute('title', option.prompt);
    swatch.classList.add('o-list-inline__item');
    swatch.setAttribute('data-code', option.code);
    swatch.setAttribute('data-color', option.prompt);
    swatch.appendChild(img);

    setTimeout(function () {
        if (swatch_container) {
            var swatch_element = swatch_container.querySelector('ul');
            var swatch_select = document.querySelector('[data-hook="attribute-swatch-select"]');
            var swatch_selected = swatch_select.options[swatch_select.selectedIndex].text;
            var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
            var swatchElements = swatch_element.querySelectorAll('li');

            swatch_element.removeAttribute('style');
            swatch_element.classList.add('o-list-inline');
            /**
             * Adds the selected swatch name to the label.
             */
            swatch_name_element.textContent = swatch_selected;

            /**
             * Adds an active class to the selected swatch.
             */
            swatchElements.forEach(function (swatchElement) {
                var swatchColor = swatchElement.getAttribute('data-code');
                var swatchImage = swatchElement.querySelector('img');

                if (swatchColor === swatch_select.options[swatch_select.selectedIndex].value) {
                    swatchImage.classList.add('x-product-layout-purchase__swatches--active');
                } else {
                    swatchImage.classList.remove('x-product-layout-purchase__swatches--active');
                }
            });
        }
    }, 0);

    return swatch;
};

AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
    var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
    var i;

    for (i = 0; i < input.select.options.length; i++) {
        if (input.select.options[i].value === option.code) {
            input.select.selectedIndex = i;
        }
    }

    if (attribute.inventory) {
        this.Attribute_Changed(input);
    }

    swatch_name_element.innerHTML = option.prompt;
    this.Generate_Swatch(input, attribute, option);
};