Add min/max values for single-variant products with quantity rules in…

… Quick Add (#3408)
Shopify · Apr 9, 2024 · 7eb51b7 · 7eb51b7
1 parent 089b8d0
commit 7eb51b7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/assets/component-card.css b/assets/component-card.css
@@ -198,6 +198,10 @@
     transform: translate(-50%);
     width: calc(100% + var(--border-width) + 3.5rem);
   }
+
+   .grid--6-col-desktop .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+    width: calc(100% + var(--border-width) + 1rem);
+  }
 }
 
 @media screen and (max-width: 749px) {
@@ -209,18 +213,30 @@
     width: calc(100% + var(--border-width) + 1rem);
   }
 
+  .grid--2-col-tablet-down .card--standard .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+    width: calc(100% + var(--border-width) + 0.5rem);
+  }
+
+  .grid--2-col-tablet-down .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
+    margin-top: 4.2rem;
+  }
+
   .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
     width: auto;
   }
 }
 
 .card-information quantity-popover volume-pricing {
-  margin-top: 4.2rem;
+  margin-top: 0;
 }
 
-@media screen and (min-width: 990px) {
-  .card-information quantity-popover volume-pricing {
-    margin-top: 0;
+@media screen and (max-width: 989px) {
+  .card-information quantity-popover .quantity__rules ~ volume-pricing {
+     margin-top: 0;
+  }
+
+  .card-information quantity-popover  volume-pricing {
+    margin-top: 4.2rem;
   }
 }
 

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -207,8 +207,9 @@
             {%- if card_product.quantity_price_breaks_configured? -%}
               {% if card_product.variants.size == 1 and quick_add == 'bulk' %}
                 {% liquid
+                  assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
                   assign has_qty_rules = false
-                  if variant.quantity_rule.increment > 1 or variant.quantity_rule.min > 1 or variant.quantity_rule.max != null
+                  if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
                     assign has_qty_rules = true
                   endif
                 %}
@@ -233,27 +234,27 @@
                 >
                   {%- if has_qty_rules -%}
                     <div class="quantity__rules caption no-js-hidden">
-                      {%- if card_product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
+                      {%- if quantity_rule.increment > 1 -%}
                         <span class="divider">
                           {{-
                             'products.product.quantity.multiples_of'
-                            | t: quantity: card_product.selected_or_first_available_variant.quantity_rule.increment
+                            | t: quantity: quantity_rule.increment
                           -}}
                         </span>
                       {%- endif -%}
-                      {%- if variant.quantity_rule.min > 1 -%}
+                      {%- if quantity_rule.min > 1 -%}
                         <span class="divider">
                           {{-
                             'products.product.quantity.min_of'
-                            | t: quantity: card_product.selected_or_first_available_variant.quantity_rule.min
+                            | t: quantity: quantity_rule.min
                           -}}
                         </span>
                       {%- endif -%}
-                      {%- if variant.quantity_rule.max != null -%}
+                      {%- if quantity_rule.max != null -%}
                         <span class="divider">
                           {{-
                             'products.product.quantity.max_of'
-                            | t: quantity: card_product.selected_or_first_available_variant.quantity_rule.max
+                            | t: quantity: quantity_rule.max
                           -}}
                         </span>
                       {%- endif -%}