Announcement

Collapse
No announcement yet.

Displaying SOLD OUT button for Inventory Variant level of 0

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

  • Displaying SOLD OUT button for Inventory Variant level of 0

    I'm trying to get the SOLD OUT to display instead of ADD TO CART in the button. I've looked at how other ReadyThemes are doing this but the Levels ReadyTheme seems to have slightly different button coding


    Code:
    <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>

    I would like the button to display the SOLD OUT message instead of the ADD TO CART (greyed out) when the Inventory Variant with the 0 level is selected.

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    You might try replacing the button with something like this:
    Code:
    <mvt:if expr="l.settings:product:inv_level EQ 'out'">
        <button class="button button-block uppercase add-to-cart bg-gray white bold">Sold Out</button>
    <mvt:else>
        <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>
    </mvt:if>
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      You might try replacing the button with something like this:
      Code:
      <mvt:if expr="l.settings:product:inv_level EQ 'out'">
      <button class="button button-block uppercase add-to-cart bg-gray white bold">Sold Out</button>
      <mvt:else>
      <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>
      </mvt:if>
      Would you believe that this code displays a grayed out SOLD OUT button for the 0 level Inventory Variant and bright SOLD OUT for the in-stock Inventory Variant?
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Hi Leslie,

        You could try adding 'disabled' to the button, might help.
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          You could try adding 'disabled' to the button, might help.
          As a class?
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • As an attribute
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


            • Originally posted by Matt Zimmermann View Post
              As an attribute
              That had no effect on it. I'd share the link but you would need to be part of a price group to see the button in action.

              This is the active button (it should be green and say ADD TO CART))



              This is the button for out of stock (it should be grayed out red)






              This is the code

              Code:
              <mvt:if expr="l.settings:product:inv_level EQ 'out'">
                  <button class="button button-block uppercase add-to-cart bg-red white bold" disabled>Sold Out</button>
              <mvt:else>
                  <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>
              </mvt:if>
              
                        </mvt:if>



              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


              • Hi Leslie,

                Since you are working with variants, try this:
                Code:
                <mvt:if expr="l.settings:product:inv_level EQ 'out' OR l.settings:attributemachine:product:inv_level EQ 'out'">
                    <button class="button button-block uppercase add-to-cart bg-gray white bold" disabled>Sold Out</button>
                <mvt:else>
                    <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green white bold">Add <span class="small-inline-block hide">to Cart</span></button>
                </mvt:if>
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                Comment


                • Well that was interesting


                  Out of stock (I tweaked the CSS for disabled to get the red background)



                  The in stock item (trying to figure out where that gray came from - but it still says SOLD OUT)

                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                  • Hi Leslie,

                    Come to think of it, I think you are going to have to control this via JavaScript, maybe using the variant_changed listener.
                    Matt Zimmermann
                    Director of UI/UX Standards and Theme Development
                    / Miva, Inc.

                    Comment


                    • Originally posted by Matt Zimmermann View Post
                      Hi Leslie,

                      Come to think of it, I think you are going to have to control this via JavaScript, maybe using the variant_changed listener.
                      Geee and I was hoping it would be something simple...
                      Leslie Kirk
                      Miva Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way
                      (aka Leslie Nord leslienord)

                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment

                      Working...
                      X

                      This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                      This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                      Accept