For the "Select One" option, I would suggest something like this:
Code:
<option value="">Select One</option>
<option value="">Select One</option>
<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">
<mvt:eval expr="'+ $' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
<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"> </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"> </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">
<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
<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">
<mvt:eval expr="' +$' $ rnd(l.settings:option:price, 2)" />
<mvt:else>
<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">
<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
<mvt:else>
<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">
<mvt:eval expr="' +$' $ rnd(l.settings:attribute:price, 2)" />
<mvt:else>
<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)" />" />
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; };
Leave a comment: