STRF-2487 - Make display of quantity selection box on PDP configurable

bigcommerce · Dec 11, 2018 · 91a0666 · 91a0666
1 parent 7386c29
commit 91a0666
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added default rule for product carousel card title to break words on overflow. [#1389](https://github.com/bigcommerce/cornerstone/pull/1389)
 - Only show cookie privacy notice for EU IP addresses [#1381](https://github.com/bigcommerce/cornerstone/pull/1381)
 - Move Cart Quantity header value to a FE API call [#1379](https://github.com/bigcommerce/cornerstone/pull/1379)
+- Make display of quantity selection box on PDP configurable. [#1398](https://github.com/bigcommerce/cornerstone/pull/1398)
 
 ## 2.6.0 (2018-11-05)
 - Add support for Card Management: List, Delete, Edit, Add and Default Payment Method [#1376](https://github.com/bigcommerce/cornerstone/pull/1376)

diff --git a/config.json b/config.json
@@ -62,6 +62,7 @@
     "brandpage_products_per_page": 12,
     "searchpage_products_per_page": 12,
     "show_product_quick_view": true,
+    "show_product_quantity_box": true,
     "show_powered_by": true,
     "shop_by_brand_show_footer": true,
     "show_copyright_footer": true,

diff --git a/schema.json b/schema.json
@@ -1239,6 +1239,12 @@
         "force_reload": true,
         "id": "show_product_quick_view"
       },
+      {
+        "type": "checkbox",
+        "label": "Show quantity selection on product pages",
+        "force_reload": true,
+        "id": "show_product_quantity_box"
+      },
       {
         "type": "checkbox",
         "label": "Show product description tabs",

diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
@@ -1,36 +1,37 @@
-<div class="form-field form-field--increments">
-    <label class="form-label form-label--alternate"
-           for="qty[]">{{lang 'products.quantity'}}</label>
-
-    <div class="form-increment" data-quantity-change>
-        <button class="button button--icon" data-action="dec">
-            <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
-            <i class="icon" aria-hidden="true">
-                <svg>
-                    <use xlink:href="#icon-keyboard-arrow-down"/>
-                </svg>
-            </i>
-        </button>
-        <input class="form-input form-input--incrementTotal"
-               id="qty[]"
-               name="qty[]"
-               type="tel"
-               value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
-               data-quantity-min="{{product.min_purchase_quantity}}"
-               data-quantity-max="{{product.max_purchase_quantity}}"
-               min="1"
-               pattern="[0-9]*"
-               aria-live="polite">
-        <button class="button button--icon" data-action="inc">
-            <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
-            <i class="icon" aria-hidden="true">
-                <svg>
-                    <use xlink:href="#icon-keyboard-arrow-up"/>
-                </svg>
-            </i>
-        </button>
+{{#if theme_settings.show_product_quantity_box}}
+    <div class="form-field form-field--increments">
+        <label class="form-label form-label--alternate"
+               for="qty[]">{{lang 'products.quantity'}}</label>
+            <div class="form-increment" data-quantity-change>
+                <button class="button button--icon" data-action="dec">
+                    <span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
+                    <i class="icon" aria-hidden="true">
+                        <svg>
+                            <use xlink:href="#icon-keyboard-arrow-down"/>
+                        </svg>
+                    </i>
+                </button>
+                <input class="form-input form-input--incrementTotal"
+                       id="qty[]"
+                       name="qty[]"
+                       type="tel"
+                       value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
+                       data-quantity-min="{{product.min_purchase_quantity}}"
+                       data-quantity-max="{{product.max_purchase_quantity}}"
+                       min="1"
+                       pattern="[0-9]*"
+                       aria-live="polite">
+                <button class="button button--icon" data-action="inc">
+                    <span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
+                    <i class="icon" aria-hidden="true">
+                        <svg>
+                            <use xlink:href="#icon-keyboard-arrow-up"/>
+                        </svg>
+                    </i>
+                </button>
+            </div>
     </div>
-</div>
+{{/if}}
 
 <div class="alertBox productAttributes-message" style="display:none">
     <div class="alertBox-column alertBox-icon">