fix(storefront): BCTHEME-384 When default option is out of stock add to cart button does not populate for in stock options

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)
 - Dots on carousel should have similar colours as other slider controls. [#1958](https://github.com/bigcommerce/cornerstone/pull/1958)
 - PDP - Fixed Empty "Description" Hiding All Tabs When in Tab View. [#1947](https://github.com/bigcommerce/cornerstone/pull/1947)
 - Added custom event for product price change on PDP page. [#1948](https://github.com/bigcommerce/cornerstone/pull/1948)

assets/js/theme/common/product-details-base.js

@@ -264,6 +264,12 @@ export default class ProductDetailsBase {
         } else if (typeof (data.bulk_discount_rates) !== 'undefined') {
             viewModel.$bulkPricing.html('');
         }
+
+        const addToCartWrapper = $('#add-to-cart-wrapper');
+
+        if (addToCartWrapper.is(':hidden') && data.purchasable) {
+            addToCartWrapper.show();
+        }
     }
 
     /**

templates/components/amp/products/product-options.html

@@ -8,9 +8,7 @@
                     {{{dynamicComponent 'components/products/options'}}}
                 {{/each}}
             </div>
-            {{#if product.can_purchase}}
-                {{> components/products/add-to-cart}}
-            {{/if}}
+            {{> components/products/add-to-cart}}
             <div class="loadingOverlay"></div>
         </form>
     </div>

templates/components/products/add-to-cart.html

@@ -1,43 +1,51 @@
-{{#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>
-{{/if}}
+<div id="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
+    {{#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>
+    {{/if}}
 
-<div class="alertBox productAttributes-message" style="display:none">
-    <div class="alertBox-column alertBox-icon">
-        <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
+    <div class="alertBox productAttributes-message" style="display:none">
+        <div class="alertBox-column alertBox-icon">
+            <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
+        </div>
+        <p class="alertBox-column alertBox-message"></p>
     </div>
-    <p class="alertBox-column alertBox-message"></p>
+    {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
+        <div class="form-action" role="status" aria-live="polite">
+            <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit"
+                value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
+        </div>
+    {{/or}}
 </div>
 {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
     <div class="form-action">

templates/components/products/product-view.html

@@ -230,9 +230,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                         <span data-product-stock>{{product.stock_level}}</span>
                     </label>
                 </div>
-                {{#if product.can_purchase}}
-                    {{> components/products/add-to-cart}}
-                {{/if}}
+                {{> components/products/add-to-cart}}
                 {{#if product.out_of_stock}}
                     {{#if product.out_of_stock_message}}
                         {{> components/common/alert/alert-error product.out_of_stock_message}}