Required Product Attributes Problem

[SidFeyDesigns]

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.

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

[Matt Zimmermann]

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.

[SidFeyDesigns]

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.

[SidFeyDesigns]

Matt,

THANK YOU!! That worked beautifully.

Thanks for the quick and easy fix!

-Nick

[Matt Zimmermann]

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

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

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;'.

[SidFeyDesigns]

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