Announcement

Collapse
No announcement yet.

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

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

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

    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
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    #2
    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.
    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
      Okay would you suggest using the jQuery version? or the Plain Javascript?
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment


        #4
        Suivant ships with jQuery, however I would say use whichever you are most comfortable with.
        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


          #5
          Okay thank you for the input Matt.

          You've been a big help with everything.

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

          Comment


            #6
            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 :)
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              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.
              Nick Harkins
              www.loveisarose.com
              *Web Developer
              *Miva
              *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

              Comment


                #8
                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:

                Code:
                    <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'">
                Nick Harkins
                www.loveisarose.com
                *Web Developer
                *Miva
                *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                Comment

                Working...
                X