A Better UX for Dropdowns that are not required on Product Attributes.

[SidFeyDesigns]

I would like to create a better UX for our product pages since we use a lot of drop downs that are not required to be selected.

We are using the suivant theme which is why I posted here but I suppose it could apply to any cssui store.

I came across this. https://demo.mobiscroll.com/jquery/select/multiline#

I like the functionality of being able to cancel the selection and also the fact that the words wrap. Being able to style it to match the site's look and feel across all devices is another plus.

I just need to know if this will be compatible with miva's product attributes.

I think its available in Plain Javascript, jQuery and jQuery Mobile, Angular JS and Ionic 1, Angular and Ionic 2/3, and React.

If i were to take a guess it would be one of the first two options that might work.

Thanks in advance for any input.

-Nick Harkins

[Matt Zimmermann]

Hi Nick,

Without doing a deep-delve into Mobiscroll, I would say so long as the core form elements are left intact, you should be able to lay their UI over it.

[SidFeyDesigns]

Okay would you suggest using the jQuery version? or the Plain Javascript?

[Matt Zimmermann]

Suivant ships with jQuery, however I would say use whichever you are most comfortable with.

[SidFeyDesigns]

Okay thank you for the input Matt.

You've been a big help with everything.

-Nick

[Bruce - PhosphorMedia]

For what its worth....took me over 30 seconds to even figure out what was going on with that demo and still not sure how it worked. From a pure UX perspective, I'd call that a failure. (Though I understand your point about being able to make multi line selections.

Basically, any UX component can be used in Miva, CSS, JS, JQUERY etc...I'd keep looking :)

[SidFeyDesigns]

I appreciate the input but more than likely this would only be implemented on mobile. I would also have the drop down look exactly as a normal drop down would look and remove the clear and show buttons. They would simply touch the drop down just like any other drop down.

I believe it will be a better UX mainly because of the cancel button. For drop downs select menus that are not required, it would allow the user to cancel selecting anything in case they just opened the drop down to see the available options. I do also like the word wrap feature as well especially for narrower device screens.

Default behavior of drop downs on a lot of mobile platforms requires you to make some sort of selection in order to exit the drop down and the user may not know to chose the Select One option in order to exit without adding the option.

If only average shoppers / users were all familiar with how things work like developers or webmasters (me) do. Then I wouldn't bother, but the fact is that most of them don't. Just because we know how to exit the drop down with out selecting doesn't necessarily mean they will.

Just my two cents and a little bit about my motivation to try it out.

[SidFeyDesigns]

Well implementing the Mobiscroll UI was a bit more involved than I expected. I decided to just add a "Cancel Selection" option to our product attribute dropdowns that are not required to be selected.

Here is the code in case anyone else was interested in using it as well:

    <mvt:elseif expr="l.settings:attribute:type EQ 'select'">
        <div class="form-row">
            <mvt:if expr="l.settings:attribute:required">
                <label for="&mvt:attributeID;" title="&mvt:attribute:prompt;" class="required 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;" 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>
                <select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="input-medium" style="margin-top:0.25rem" data-attribute="&mvte:attribute:code;">
                    <option value="">Select One</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="" selected>
                                &mvt: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: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>
            <mvt:else>
                <label for="&mvt:attributeID;">&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;" 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>
                <select name="Product_Attributes[&mvt:attribute:index;]:value" id="&mvt:attributeID;" class="input-medium" style="margin-top:0.25rem" data-attribute="&mvte:attribute:code;">
                    <option value="">Select One</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="" selected>
                                &mvt: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: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>
                    <option value="">Cancel Selection</option>
                </select>
            </mvt:if>
        </div>
    <mvt:elseif expr="l.settings:attribute:type EQ 'swatch-select'">