Displaying SOLD OUT button for Inventory Variant level of 0

[lesliekirk]

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

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

[Matt Zimmermann]

Hi Leslie,

You might try replacing the button with something like this:

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

[lesliekirk]

Hi Leslie,

You might try replacing the button with something like this:

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

[Matt Zimmermann]

Hi Leslie,

You could try adding 'disabled' to the button, might help.

[lesliekirk]

Hi Leslie,

You could try adding 'disabled' to the button, might help.

As a class?

[Matt Zimmermann]

As an attribute

[lesliekirk]

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

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

[Matt Zimmermann]

Hi Leslie,

Since you are working with variants, try this:

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

[lesliekirk]

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)

[Matt Zimmermann]

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.

[lesliekirk]

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

[lesliekirk]

Still trying to make this work

 <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

[Matt Zimmermann]

Hi Leslie,

What text is it displaying? You may want to check your scripts.js file under the outOfStock function.

[lesliekirk]

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:

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

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

[Matt Zimmermann]

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.