Announcement

Collapse
No announcement yet.

Required Product Attributes Problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Required Product Attributes Problem

    I'm having an issue with the suivant theme when required product attributes are present.

    When clicking the add to cart button, if a customer happens to accidentally not select or fill out a required attribute, the page doesn't do anything. At least not to the average user. Through some investigating I noticed that a message pops up ( About the middle of the page vertically) and it says this:

    "All Required options have not been selected.
    Please review the following options: ."

    Now I would assume that the product attribute Prompt should show up in that message but instead its just a period after the initial message.

    Not only that but I would think the default behavior would be that when the add to cart button is clicked, the page should at least scroll up to that message. If a user doesn't look for the message they will not see it and think the site isn't working. Plus the message disappears after about 5 or 6 seconds creating even more confusion.

    You can see what i'm referring to here: https://dev.loveisarose.com/MDR11C.html

    Yes we do have a lot of options but we have very personalized products and find that a customer is more likely to add additional items such as vases and whatnot (we sell Real Roses dipped in 24k Gold) directly from the product page by simply selecting the option to add those items.

    I would really like it to scroll to the missing attribute that is required and have the error message show up there too.

    Any help would be greatly appreciated.

    Thanks,
    -Nick Harkins
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    #2
    Hi Nick,

    It looks like the labels for your required attributes are missing the class of 'required'. If there is a missing required attribute, the function looks for these in the page to display what is needed. As for the fading and scrolling, in your 'scripts.js' file, at line 1180, replace this...
    Code:
    responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn().delay(5000).fadeOut();
    With this...
    Code:
    responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn();
    $('html, body').animate({scrollTop: '0px'}, 250);
    Additionally, in your 'pages.css' file, I would recommend locating '.purchase-message' and removing all the values except 'display: none;'.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Matt,

      THANK YOU!! That worked beautifully.

      Thanks for the quick and easy fix!

      -Nick
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment


        #4
        There's one other thing I have noticed with any attribute templates that are assigned to a product. a good example is our Add birthstones attribute seen on the same page linked in this thread.

        When you click on the label for adding the 2nd birthstone, it highlights the first drop down for selecting the 1st birthstone month.

        Same goes for selecting a heart charm color. We you click that label it highlights the text field for the heart charm message.

        It seems to only be happening on attributes that are part of the same attribute template.
        Nick Harkins
        www.loveisarose.com
        *Web Developer
        *Miva
        *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

        Comment


          #5
          Hi Nick,

          It appears that although the two select attributes are part of separate attribute templates, they have the same attribute code which is being used to set the "for" attribute of the label and the "id" of the attribute.
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment


            #6
            They are actually a part of the same attribute template and the code for that template (add02birthstone1flower) is what is being used in the "for " attribute of the label and the "id" of the attribute.

            I will post the code that's used for all the labels and id's below.

            Code:
                <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 red bold">&mvt:attribute:prompt;
                                <mvt:if expr="l.settings:attribute:image">
                                    <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>
                                     &nbsp;<a href="&mvte:attribute:image;" title="&mvte:attribute:prompt;" class="button button-mini bg-gray" onclick="return !window.open(this.href,'_blank','toolbar=yes,location=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=375,height=375');">View Image</a>
                                <mvt:else>
                                    <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:attribute:prompt;
            Nick Harkins
            www.loveisarose.com
            *Web Developer
            *Miva
            *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

            Comment


              #7
              Hi Nick,

              Try changing the MVT:ASSIGN at the start of your code with this:
              Code:
              <mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code) $ '_' $ l.settings:attribute:index" />
              Matt Zimmermann

              Miva Web Developer
              Alchemy Web Development
              https://www.alchemywebdev.com
              Site Development - Maintenance - Consultation

              Miva Certified Developer
              Miva Professional Developer

              https://www.dev4web.net | Twitter

              Comment


                #8
                Sorry I thought i had included the code with the id as well. Here it is:

                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 red bold">&mvt:attribute:prompt;
                                    <mvt:if expr="l.settings:attribute:image">
                                        <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>
                                         &nbsp;<a href="&mvte:attribute:image;" title="&mvte:attribute:prompt;" class="button button-mini bg-gray" onclick="return !window.open(this.href,'_blank','toolbar=yes,location=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=375,height=375');">View Image</a>
                                    <mvt:else>
                                        <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:attribute:prompt;
                                    <mvt:if expr="l.settings:attribute:image">
                                        <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>
                                         &nbsp;<a href="&mvte:attribute:image;" title="&mvte:attribute:prompt;" class="button button-mini bg-gray" onclick="return !window.open(this.href,'_blank','toolbar=yes,location=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=375,height=375');">View Image</a>
                                    <mvt:else>
                                        <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>
                            <input type="text" name="Product_Attributes[&mvte:attribute:index;]:value" value="&mvte:attribute:value;" id="&mvt:attributeID;" placeholder="30 characters including spaces" maxlength="30" class="input-medium" style="margin-top:0.25rem" data-attribute="&mvte:attribute:code;" data-option-price="&mvt:attribute:price;" data-regular-price="" />
                        </div>
                Nick Harkins
                www.loveisarose.com
                *Web Developer
                *Miva
                *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                Comment


                  #9
                  Matt,

                  That did the trick!

                  I do have another question regarding a better UX for product attribute drop downs but I will start a new thread for that.

                  Thanks again!

                  -Nick
                  Nick Harkins
                  www.loveisarose.com
                  *Web Developer
                  *Miva
                  *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                  Comment


                    #10
                    Matt,

                    I'm having the same exact issue with the Shadows Theme not highlighting required fields. I replaced the following code located on line 40:

                    Code:
                    <mvt:assign name="l.settings:attribute_ID" value="'l-' $ tolower(l.settings:attribute:code)" />
                    with your code from above:

                    Code:
                    <mvt:assign name="l.settings:attribute_ID" value="'l-' $ tolower(l.settings:attribute:code) $ '_' $ l.settings:attribute:index" />
                    and it had no effect. Did I miss something sir?
                    Sincerely,

                    Stephen M. LaBar, Jr.
                    (770) 441-9447
                    The Martial Arts Store

                    Please Visit Our Site At:
                    http://www.themartialartsstore.com

                    Comment


                      #11
                      Hi Stephen,

                      Based on the design, the required fields are only semi-bold which may not display as desired depending on the font used. To modify this, change the font-weight setting for the section in your theme-styles.css file.
                      Code:
                          .x-product-layout-purchase .is-required {
                              font-weight: 500;
                          }
                      Matt Zimmermann

                      Miva Web Developer
                      Alchemy Web Development
                      https://www.alchemywebdev.com
                      Site Development - Maintenance - Consultation

                      Miva Certified Developer
                      Miva Professional Developer

                      https://www.dev4web.net | Twitter

                      Comment


                        #12
                        Matt,

                        I should have been a lot more specific in what I needed sir. Please see below. Sorry.

                        "All Required options have not been selected.
                        Please review the following options: ."
                        Sincerely,

                        Stephen M. LaBar, Jr.
                        (770) 441-9447
                        The Martial Arts Store

                        Please Visit Our Site At:
                        http://www.themartialartsstore.com

                        Comment


                          #13
                          Hi Stephen,

                          Can you post a link to a product with this issue?
                          Matt Zimmermann

                          Miva Web Developer
                          Alchemy Web Development
                          https://www.alchemywebdev.com
                          Site Development - Maintenance - Consultation

                          Miva Certified Developer
                          Miva Professional Developer

                          https://www.dev4web.net | Twitter

                          Comment


                            #14
                            Matt,

                            Here's the link sir: http://dev.themartialartsstore.com/p...-11-90XKC.html

                            and here's the code for the product attributes: (only change I made was line 40)

                            Code:
                            <mvt:foreach iterator="attribute" array="attributes">
                                <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"/>
                            
                            
                                <mvt:assign name="l.settings:attribute_ID" value="'l-' $ tolower(l.settings:attribute:code) $ '_' $ l.settings:attribute:index" />
                                <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 &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">
                                        <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)" />">
                            Sincerely,

                            Stephen M. LaBar, Jr.
                            (770) 441-9447
                            The Martial Arts Store

                            Please Visit Our Site At:
                            http://www.themartialartsstore.com

                            Comment


                              #15
                              Hi Stephen,

                              It looks like the is-required class is not being applied to the labels of required attributes, nor is the required value being added to the attributes themselves. 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.
                              Code:
                              <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="" 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="" 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="" 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 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;" 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;>
                                                  <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>
                                      </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="" 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>
                                          <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 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)" />">
                              Matt Zimmermann

                              Miva Web Developer
                              Alchemy Web Development
                              https://www.alchemywebdev.com
                              Site Development - Maintenance - Consultation

                              Miva Certified Developer
                              Miva Professional Developer

                              https://www.dev4web.net | Twitter

                              Comment

                              Working...
                              X