[QUICK ADD] Quick add button should be hidden on sold out products

[bacounts]

Describe the current behavior
The quick add button is visible on product with all variants sold out (see screenshot below).

Describe the expected behavior
The button should NOT BE VISIBLE on product with all variants sold out.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 4.0.0
• Chrome Version Version 99.0.4844.83 (Official Build) (x86_64)
• macOS Version 12.3

Possible solution
Add a line of {liquid} to check for variant availability

Additional context/screenshots

[BrenLong]

Instead of removing the quick add button entirely for products that have no variants in stock, we could change the text of the button to Sold out so that it's consistent with products that only have one variant.

In the example below, Anchor Bracelet Mens has two variants, both of which are sold out, and Choose options still displays. Antique Drawers has one variant, which is sold out, and Sold out correctly displays.

As a workaround, I added the following to card-product.liquid [Dawn 7.0.1], directly above the {% else %} on line 251. This checks whether variants have stock, and if all variants do not, it adds a Sold out button in place of Choose options.

{%- elsif card_product.variants.size > 1 and card_product.selected_or_first_available_variant.available == false -%}
  <button
    id="{{ product_form_id }}-submit"
    type="submit"
    name="add"
    class="quick-add__submit button button--full-width button--secondary"
    aria-haspopup="dialog"
    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
    aria-live="polite"
    data-sold-out-message="true"
    disabled
  >
  <span>
    {{ 'products.product.sold_out' | t }}
  </span>

[bredowmax]

Fully agree with @BrenLong - hiding it could result in some product cards being much shorter than others. It would be a cleaner look if it were simply “disabled”

[MegsParkinson]

This is still happening on Sense 15.2.0 and a core merchant has reported this as an issue. It would be great to get this fixed as it causes a bit of confusion. This merchant had installed a custom badges app and had added CSS to hide all the built-in badges, so there was no indication to the customer that the product with two variants was not available. (I used the code @BrenLong shared above to create a fix.)

ZD Ticket
Internal