Something changed when the upgrade to 10.01.02

[lesliekirk]

Something broke the swatch function after the site updated to version 10.01.02. The "is--active" class stays stuck on the first color and the add to cart button stays grayed out until an attribute is clicked - even if there is only one attribute.

"is--active" class example

only one attribute example

Is there still a way to have a "Select One" as part of each attribute so the customer will know to do something?

[Matt Zimmermann]

Hi Leslie,

Yes, there was a change made in Miva 10.01.00 that could cause this. You will have to modify Attribute Machine to remove the inventory check:

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 = document.createElement('li'),
img = document.createElement('img');

img.src = option.image;
img.setAttribute('alt', option.prompt);
img.setAttribute('title', option.prompt);
swatch.setAttribute('data-code', option.code);
swatch.setAttribute('data-color', option.prompt);
swatch.appendChild(img);
return swatch;
};

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

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

this.Attribute_Changed(input);
swatchNameElement.innerHTML = option.prompt;
};

[lesliekirk]

Hi Leslie,

Yes, there was a change made in Miva 10.01.00 that could cause this. You will have to modify Attribute Machine to remove the inventory check:

Thank you! That fixed 2 problems. How do I get the "select one" to display in the drop down lists?

[Matt Zimmermann]

Hi Leslie,

Do you have attribute machine set to look for a "Select One"?

[lesliekirk]

Hi Leslie,

Do you have attribute machine set to look for a "Select One"?

Yes, but I discovered that there is also a hard coded <option>Select One</option>

[lesliekirk]

Yes, but I discovered that there is also a hard coded <option>Select One</option>

Which I should note, doesn't seem to want to work all the time.

Here's the Product Attribute Template code:

<mvt:foreach iterator="attribute" array="attributes">
<mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code)" />
<input type="hidden" name="Product_Attributes[&mvte:attribute:index;]:code" value="&mvte:attribute:code;" data-attribute-type="&mvte:attribute:type;" />
<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="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
</mvt:if>
<input type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">&mvte:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">&mvte:attribute:pr ompt;</label>
</mvt:if>
<textarea name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="">&mvte:attribute:value;</textarea>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="h-nm required">&mvte:attribute:prompt;</legend>
<mvt:else>
<legend for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="h-nm font--regular">&mvte:attribute:prompt;</legend>
</mvt:if>
<mvt:foreach iterator="option" array="attribute:options">
<mvt:assign name="l.settings:optionID" value="'l-' $ tolower(l.settings:option:code)" />
<label for="&mvt:optionID;" title="&mvt:option:prompt;" class="show">
<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[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" checked />
<mvt:else>
<input type="radio" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:option:code;" id="&mvt:optionID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:option:price;" data-regular-price="" />
</mvt:if>
<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 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>
</mvt:if>
</label>
</mvt:foreach>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'select'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt;</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvt:attribute:prompt;">&mvt:attribute:prompt;</label>
</mvt:if>
<select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="border--gray" data-attribute="&mvte:attribute:code;">
<option value="Select One">Select One</option>
<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>
<mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">
<div class="form-row cmp-product-purchase__swatch-attribute">
<mvt:if expr="l.settings:attribute:required">
<label for="l-swatch-select" title="&mvt:attribute:prompt;" class="required">&mvt:attribute:prompt; <span class="font--light" data-hook="swatch-name">&nbsp;</span></label>
<mvt:else>
<label for="l-swatch-select" title="&mvt:attribute:prompt;">&mvt:attribute:prom pt; <span class="font--light" data-hook="swatch-name">&nbsp;</span></label>
</mvt:if>
<select id="l-swatch-select" class="h-all-hidden" data-attribute="&mvte:attribute:code;" data-hook="swatch-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;" 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 id="js-swatches" class="cmp-product-list__swatches" data-hook="product-details__swatches"></div>
</div>
<mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
<div class="form-row">
<mvt:if expr="l.settings:attribute:required">
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;" class="required">
<mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
<mvt:else>
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</mvt:if>
<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 expr="l.settings:attribute:price">
<mvt:if expr="l.settings:attribute:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
</mvt:if>
</mvt:if>
</mvt:if>
</label>
<mvt:else>
<label for="&mvt:attributeID;" title="&mvte:attribute:prompt;">
<mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" value="Yes" id="&mvt:attributeID;" checked="checked" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
<mvt:else>
<input type="checkbox" name="Product_Attributes[&mvte:attribute:index;]:value" id="&mvt:attributeID;" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
</mvt:if>
<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 expr="l.settings:attribute:price">
<mvt:if expr="l.settings:attribute:price GT 0">
&nbsp;<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
<mvt:else>
&nbsp;<mvt:eval expr="' -$' $ rnd(l.settings:attribute:price, 2)" />
</mvt:if>
</mvt:if>
</mvt:if>
</label>
</mvt:if>
</div>
</mvt:if>
</mvt:foreach>
<mvt:if expr="l.settings:subscription:enabled AND l.settings:subscription:term_count">
<div class="form-row">
<mvt:if expr="l.settings:subscription:mandatory">
<label for="l-subscription" title="Subscribe" class="required">Select Subscription</label>
<select id="l-subscription" class="border--gray" name="Product_Subscription_Term_ID">
<mvt:foreach iterator="term" array="subscription:terms">
<option value="&mvte:term:id;">&mvte:term:descrip;</option>
</mvt:foreach>
</select>
<mvt:else>
<div class="cmp-flex-tabs">
<input id="l-tab-one-time" data-flex-tab type="radio" name="flex-tab" checked>
<label class="cmp-flex-tabs__tab font--uppercase" for="l-tab-one-time">One Time Purchase</label>
<input id="l-tab-subscribe" data-flex-tab type="radio" name="flex-tab">
<label class="cmp-flex-tabs__tab font--uppercase" for="l-tab-subscribe">Subscribe</label>
<div class="cmp-flex-tabs__content">
<select id="l-subscription" class="border--gray" name="Product_Subscription_Term_ID">
<mvt:if expr="NOT l.settings:subscription:mandatory">
<option value="0">Select Subscription</option>
</mvt:if>
<mvt:foreach iterator="term" array="subscription:terms">
<option value="&mvte:term:id;">&mvte:term:descrip;</option>
</mvt:foreach>
</select>
</div>
</div>
</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]

Hi Leslie,

For the "Select One" option, I would suggest something like this:

<option value="">Select One</option>