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;"> [COLOR=#e74c3c][B]<option value="Select One">Select One</option>[/B][/COLOR] <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: