Out of Stock item let's me add it to the Cart

[ferdware]

Where would I conditionally check for the stock status of the product so I can "disable" the "add to cart" button on the product page in code?

[givanz]

You can hide any element if product is out of stock with data-v-if="product.stock_quantity < 1"

<div data-v-if="product.stock_quantity < 1">
  Out of stock product page
</div>

for product page and for product listing you need to use prod instead of product

<div data-v-if="prod.stock_quantity < 1">
  Out of stock product listing
</div>

You can also use data-v-attr-if-disabled="product.stock_quantity < 1" to add disabled attribute to buttons

<button class="btn btn-primary" data-v-attr-if-disabled="product.stock_quantity < 1">
  Add to cart
</button>

Or you can use data-v-class-if-disabled="product.stock_quantity < 1" to add disabled class to elements

<a class="btn btn-primary" data-v-class-if-disabled="product.stock_quantity < 1">
  Add to cart
</button>

For product page you need to edit public/themes/landing/product/product.html

For product listing you need to edit multiple templates like product/index.html for shop page product/category.html for category page etc if you use landing theme you can edit the partial html code used for product listing https://github.com/givanz/landing/blob/main/src/_includes/product-list-item.html#L38 and then run

npm i 
npm run gulp

inside public/themes/landing to recompile all html templates.

I added code to disable add to cart for out of stock products https://demo.vvveb.com/product/product-seventeen-17 in the latest.zip update, you can redownload the zip and update the files on your server.

[ferdware]

okay thank you!

[ferdware]

So I can set any class or attribute with conditional with…
data-v-class-if-*
data-v-attribute-if-*

[ferdware]

I figured it out. "disabled" is a bootstrap class of a button. So it's not an arbitrary class I can put in the css.

[givanz]

Yes, you can use any class for *, disabled is appropriate for this case to disable the add to cart button.

[ferdware]

Okay great! Thanks