Add an out of stock note for quick add bulk, like the one for quick a…

…dd standard.
Shopify · May 24, 2024 · 73ade8f · 73ade8f
1 parent 091a371
commit 73ade8f
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -384,7 +384,31 @@
             {%- endif -%}
           </div>
         {% elsif quick_add == 'bulk' %}
-          {% if card_product.variants.size == 1 %}
+          {% if card_product.selected_or_first_available_variant.available == false %}
+            <quick-add-bulk
+              data-min="{{ card_product.selected_or_first_available_variant.quantity_rule.min }}"
+              id="quick-add-bulk-{{ card_product.selected_or_first_available_variant.id }}-{{ section.id }}"
+              class="quick-add-bulk"
+              data-index="{{ card_product.selected_or_first_available_variant.id }}"
+            >
+              <button
+                id="{{ product_form_id }}-submit"
+                type="submit"
+                name="add"
+                class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
+                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>
+                <span class="sold-out-message hidden">
+                  {{ 'products.product.sold_out' | t }}
+                </span>
+              </button>
+            </quick-add-bulk>
+          {% elsif card_product.variants.size == 1 %}
             <quick-add-bulk
               data-min="{{ card_product.selected_or_first_available_variant.quantity_rule.min }}"
               id="quick-add-bulk-{{ card_product.selected_or_first_available_variant.id }}-{{ section.id }}"