Display DIV if condition exist

I'm adding a Gift Wrap droplist (No/Yes) attribute to all products.  When YES is selected a DIV displays with a textarea to be used for a gift message input.  An onchange event applied to the Gift Wrap droplist works great to toggle the giftmessage DIV display.  The issue I have is displaying the giftmessage DIV if the customer chooses the "edit" function from the shopping cart.

If the Gift Wrap droplist is defaulted to YES, I need the DIV's display property to be block when the customer is returned to the product page.  This is easy if the customer actually entered text in the giftmessge textarea, since I can query for attribute.DefaultValue != null.  The problem occurs when the customer selects YES from the Gift Wrap attribute, but does not initially enter a gift message.  Upon returning to the product page, the giftmessage DIV does not display, since the DefaultValue is null.

In short, I need the giftmessage DIV to display any time the Gift Wrap droplist attribute is YES, regardless of whether the giftmessage textarea has a value.

Sorry for the long post.  Any insight and assistance you have to offer is greatly appreciated.

JohnJ

https://www.nopcommerce.com/boards/t/18325/suggestion-conditional-product-variant-and-checkout-attributes-depending-on-other-attributes.aspx

Eduardo,

Thank you for the reply.  The post does not seem to answer my issue.  I'm working on the product page.  I've added two attributes to the product.  1. A gift wrap drop selection and 2. a gift message text area.  I need the gift message text area to display anytime the gift wrap selection is set to Yes.  The only way I see to do this is to capture the value of the Gift Wrap selection while in the case AttributeControlType.MultilineTextbox context.  I just can't figure out how to capture or call the value of the Gift Wrap selection from the MultilineTextbox context.

Again, any advice you can give is greatly appreciated.

It can be done with jQuery by adding the following code to _ProductAttributes.cshtml (first, copy this file to "\Themes\YourTheme\Views\Products\" to edit):

<script type="text/javascript">
    $(function () {
        $('div.attributes').find('select').each(function () {
            var id = $(this).attr('id');
            ShowHideTextArea(id);
            $(this).change(function () {
                ShowHideTextArea(id);
            });
        });

        function ShowHideTextArea(controlId) {
            var c = $('#' + controlId);
            var txt = $.trim(c.find('option:selected').text());
            var ta = c.parent().siblings('dd').find('textarea').parent();

            if (txt === 'Yes') {
                // show textarea
                ta.show();
                ta.siblings().show();
            } else {
                ta.hide();
                ta.prev('dt').hide();
            }
        }
    });
</script>

JSFiddle of the code.  Edit the JSFiddle and add selected="selected" to the Yes option to see how it would load when Yes is already selected (editing product from cart).

Note that the above code is untested with other product attributes.

.

Karma,

Thank you for the reply and suggestion.  By editing the JSFiddle I was able to get the functionality to work when using Chrome and Firefox, but not when using IE11.  Is there a known issue with JQuery and IE?

JSFiddle

I was really hoping to be able to query the database object model directly, since all product objects are accessible to the product page.  I just have not been able to correctly identify the correct object and syntax.

Again,  Thank you for your assistance and advice.

JohnJ

I noticed in your JSFiddle that you have a price adjustment with the Yes option so I updated the JSFiddle to work with price adjustments and it should also now work better with other product attributes (if your product attribute is required, you can remove the following in the 'else if': || txt.indexOf("---") >= 0).

In case it isn't clear, you don't need to modify anything else in _ProductAttributes.cshtml (you don't need to add an onchange attribute to selects or the toggle_visibility(idd) function) - just add the jQuery code to the unmodified file.

Updated code:

<script type="text/javascript">
    $(function () {
        $('div.attributes').find('select').each(function () {
            var id = $(this).attr('id');
            ShowHideTextArea(id);
            $(this).change(function () {
                ShowHideTextArea(id);
            });
        });

        function ShowHideTextArea(id) {
            var c = $('#' + id);
            var txt = $.trim(c.find('option:selected').text());
            var ta = c.parent().siblings('dd').find('textarea').parent();

            if (txt.toLowerCase().indexOf("yes") >= 0) {
                ta.show();
                ta.siblings().show();                
            } else if (txt.toLowerCase().indexOf("no") >= 0 || txt.indexOf("---") >= 0) {
                ta.hide();
                ta.prev('dt').hide();
            }
        }
    });
</script>

.

Karma,

I really appreciate your help.  The insight to jquery is really helpful.  Looking at JSFiddle, IE's behavior is still not correct.  The textarea displays regardless of the selection in the Select dropdown.  Is this something to do with the IE DOM?  Is there a minor change that can be made to correct the issue?

Thank you again for your great assistance.

JohnJ

Karma,

OK.  I've found that by changing the jQuery framework to 2.x makes the code work across browsers.  

Again, thank you for your assistance.

JohnJ

Karma,

I've added the code to my test site.  It works as well.

Thank you.