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

    #2
    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

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


        #4
        Hi Leslie,

        You could try adding 'disabled' to the button, might help.
        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
          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


            #6
            As an attribute
            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


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


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

                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


                  #9
                  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


                    #10
                    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

                    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


                      #11
                      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


                        #12
                        Still trying to make this work

                        Code:
                         <mvt:if expr="l.settings:product:inv_level EQ '0' OR l.settings:attributemachine:product:inv_level EQ '0'">
                            <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green 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" disabled>Add <span class="small-inline-block hide">to Cart</span></button>
                        </mvt:if>
                        The button is disabled for Inventory Variants - but it doesn't display 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


                          #13
                          Hi Leslie,

                          What text is it displaying? You may want to check your scripts.js file under the outOfStock function.
                          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


                            #14
                            Originally posted by Matt Zimmermann View Post
                            Hi Leslie,

                            What text is it displaying? You may want to check your scripts.js file under the outOfStock function.
                            Using this code for the button:



                            Code:
                            <mvt:if expr="l.settings:product:inv_level EQ '0' OR l.settings:attributemachine:product:inv_level EQ '0'">
                                <button id="js-add-to-cart" class="button button-block uppercase add-to-cart bg-green 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" disabled>Add <span class="small-inline-block hide">to Cart</span></button>
                            </mvt:if>
                                      </mvt:if>
                            This is the javascript:

                            Code:
                             
                             // ---- Update Button For "Out Of Stock" ---- // 		function outOfStock () { 			var button = $('#js-add-to-cart'), 				buttonText = button.val();  			if (button.is(':disabled') === true) { 				button.addClass('bg-gray').val('Sold Out'); 			} 			else { 				button.removeClass('bg-gray').val(buttonText); 			} 		} 		outOfStock();
                            The Add to Cart button displays grayed out for a product with Inventory Variants.

                            If it's a product without any variants and has an inventory level, it displays as a grayed out Add to Cart

                            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


                              #15
                              Hi Leslie,

                              That is because the IF statement does not get reevaluated when you change variants; that is the reason we have JavaScript checking the disabled state of the button.
                              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

                              Working...
                              X