Required Product Attributes Problem

[slabar]

Matt,

It looks like you have some custom code within the loop, I'm not sure if this is interfering with the remaining functions or not. I would recommend trying the attributes without that code or try this version, where I have moved the custom code a down a little, and see if it corrects the issue.

Crap, you are correct I forgot that Juan used custom code in there to replicate a feature I liked from our old site. I will try what you suggested and let you know sir. Thank you!

[slabar]

Matt,

That didn't work sir. It also took the title out of the drop down selector and placed default options in all the attributes so I could not test the required fields. I did check my template and have no options set as default.

[Matt Zimmermann]

Hi Stephen,

With select boxes, if there is no default value, the first option in the list is the selected one. I have modified the code, let me know if this does the trick.

<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>

    <mvt:assign name="l.settings:attributePrice" value="l.settings:attribute:price"/>
    <mvt:comment>Updated Attribute Prices</mvt:comment>
    <mvt:assign name="l.settings:mockProducts" value="''"/>
    <mvt:assign name="l.settings:mockProduct" value="l.settings:product"/>
    <mvt:assign name="l.settings:mockProduct:price" value="l.settings:attribute:price"/>
    <mvt:assign name="l.settings:mockProduct:base_price" value="l.settings:attribute:base_price"/>
    <mvt:do file="g.Module_Feature_TUI_UT" name="l.success" value="CommonComponentFields_Initialize_Product_Runtime( l.settings:mockProduct )"/>
    <mvt:assign name="l.index" value="miva_array_insert( l.settings:mockProducts, l.settings:mockProduct, -1 )"/>
    <mvt:do file="g.Module_Feature_TUI_UT" name="l.success" value="CommonComponentFields_Initialize_Product_Discounts_Runtime( l.settings:mockProducts, 1 )"/>
    <mvt:assign name="l.settings:attribute:price" value="l.settings:mockProducts[1]:price"/>
    <mvt:assign name="l.settings:attribute:formatted_price" value="l.settings:mockProducts[1]:formatted_price"/>
    <mvt:assign name="l.settings:attribute:base_price" value="l.settings:mockProducts[1]:base_price"/>
    <mvt:assign name="l.settings:attribute:formatted_base_price" value="l.settings:mockProducts[1]:formatted_base_price"/>
    <mvt:comment>Updated Option Prices</mvt:comment>
    <mvt:assign name="l.settings:mockProducts" value="''"/>
    <mvt:assign name="l.settings:newOptions" value="''"/>
    <mvt:foreach iterator="option" array="attribute:options">
        <mvt:assign name="l.settings:mockProduct" value="l.settings:product"/>
        <mvt:assign name="l.settings:mockProduct:price" value="l.settings:option:price"/>
        <mvt:assign name="l.settings:mockProduct:base_price" value="l.settings:option:base_price"/>
        <mvt:do file="g.Module_Feature_TUI_UT" name="l.success" value="CommonComponentFields_Initialize_Product_Runtime( l.settings:mockProduct )"/>
        <mvt:assign name="l.index" value="miva_array_insert( l.settings:mockProducts, l.settings:mockProduct, -1 )"/>
    </mvt:foreach>
    <mvt:assign name="l.mockProductCount" value="miva_array_elements(l.settings:mockProducts)"/>
    <mvt:do file="g.Module_Feature_TUI_UT" name="l.success" value="CommonComponentFields_Initialize_Product_Discounts_Runtime( l.settings:mockProducts, l.mockProductCount )"/>
    <mvt:assign name="l.count" value="1"/>
    <mvt:foreach iterator="option" array="attribute:options">
        <mvt:assign name="l.settings:option:price" value="miva_variable_value('l.settings:mockProducts[' $ l.count $ ']:price')"/>
        <mvt:assign name="l.settings:option:formatted_price" value="miva_variable_value('l.settings:mockProducts[' $ l.count $ ']:formatted_price')"/>
        <mvt:assign name="l.settings:option:base_price" value="miva_variable_value('l.settings:mockProducts[' $ l.count $ ']:base_price')"/>
        <mvt:assign name="l.settings:option:formatted_base_price" value="miva_variable_value('l.settings:mockProducts[' $ l.count $ ']:formatted_base_price')"/>
        <mvt:assign name="l.count" value="l.count + 1"/>
        <mvt:assign name="l.index" value="miva_array_insert( l.settings:newOptions, l.settings:option, -1 )"/>
    </mvt:foreach>
    <mvt:assign name="l.settings:attribute:options" value="l.settings:newOptions"/>

    <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 &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="&mvt:attribute:base_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 &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="&mvt:attribute:base_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">
            <span class="c-form-label u-block &mvt:required_attribute_classes;" title="&mvte:attribute:prompt;">&mvte:attribute:prompt;</span>
            <mvt:foreach iterator="option" array="attribute:options">
                <label class="c-form-checkbox c-form-checkbox--radio c-form-checkbox--inline" 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="&mvt:option:base_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="&mvt:option:base_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 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>
                    </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">
            <label class="c-form-label &mvt:required_attribute_classes; u-hidden" for="&mvt:attribute_ID;" title="&mvt:attribute:prompt;">&mvt:attribute:prompt;</label>
            <div class="c-form-select">
                <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;>
                    <option value selected>&mvt:attribute:prompt;</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="&mvt:option:base_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:else>
                            <option value="&mvte:option:code;" data-option-price="&mvt:option:price;" data-regular-price="&mvt:option:base_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>
        </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 &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="&mvt:option:base_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="&mvt:option:base_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>
            <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="&mvt:base_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="&mvt:base_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 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>
                </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">
        <mvt:if expr="l.settings:subscription:mandatory">
            <label class="c-form-label &mvt:required_attribute_classes;" for="l-subscription" title="Subscribe">Select Subscription</label>
            <div class="c-form-select">
                <select id="l-subscription" class="c-form-select__dropdown" 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" for="l-subscription" title="Subscribe">Select Subscription</label>
            <div class="c-form-select">
                <select id="l-subscription" class="c-form-select__dropdown" name="Product_Subscription_Term_ID">
                    <option value="0">One Time Purchase</option>
                    <mvt:foreach iterator="term" array="subscription:terms">
                        <option value="&mvte:term:id;">&mvte:term:descrip;</option>
                    </mvt:foreach>
                </select>
            </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)" />">

[slabar]

Matt,

Much closer now sir. That worked when all fields were empty. I filled a required field in the hit add to cart but, the field still showed as missing an attribute. I filled in another field, hit add to cart, and then it still showed all three fields as needing to be filled in instead of the last missing one.

I hope I explained that properly sir.

[Matt Zimmermann]

Hi Stephen,

The function goes through all the required fields and lists them out regardless if they have a value or not so a customer can make sure they have completed all the fields.

[slabar]

Matt,

Thank you sir. That makes sense.