CATALOG-2408 Fix updateView firing when there are no default options

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

@@ -22,6 +22,7 @@ export default class ProductDetails {
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
         const hasOptions = $productOptionsElement.html().trim().length;
+        const hasDefaultOptions = $productOptionsElement.find('[data-default]').length;
 
         $productOptionsElement.on('change', event => {
             this.productOptionsChanged(event);
@@ -33,7 +34,7 @@ export default class ProductDetails {
 
         // Update product attributes. Also update the initial view in case items are oos
         // or have default variant properties that change the view
-        if (hasOptions) {
+        if ((_.isEmpty(productAttributesData) || hasDefaultOptions) && hasOptions) {
             const $productId = $('[name="product_id"]', $form).val();
 
             utils.api.productAttributes.optionChange($productId, $form.serialize(), 'products/bulk-discount-rates', (err, response) => {
@@ -396,7 +397,7 @@ export default class ProductDetails {
         }
 
         // If Bulk Pricing rendered HTML is available
-        if (content) {
+        if (data.bulk_discount_rates && content) {
             viewModel.$bulkPricing.html(content);
         } else {
             viewModel.$bulkPricing.html('');

templates/components/products/options/input-checkbox.html

@@ -13,7 +13,10 @@
         name="attribute[{{id}}]"
         id="attribute-{{id}}"
         value="{{value}}"
-        {{#if checked}}checked{{/if}}
+        {{#if checked}}
+            checked
+            data-default
+        {{/if}}
         {{#if required}}required{{/if}}>
 
     <label class="form-label {{class}}" for="attribute-{{id}}">{{label}}</label>

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

@@ -35,7 +35,10 @@
                             name="attribute[{{../id}}]"
                             value="{{id}}"
                             id="attribute_{{id}}"
-                            {{#if selected}}checked{{/if}}
+                            {{#if selected}}
+                                checked
+                                data-default
+                            {{/if}}
                             {{#if ../required}}required{{/if}}>
                         <label data-product-attribute-value="{{id}}" class="form-label" for="attribute_{{id}}">{{label}}</label>
                     </div>

templates/components/products/options/set-radio.html

@@ -14,7 +14,10 @@
             id="attribute_{{id}}"
             name="attribute[{{../id}}]"
             value="{{id}}"
-            {{#if selected}}checked{{/if}}
+            {{#if selected}}
+                checked
+                data-default
+            {{/if}}
             {{#if ../required}}required{{/if}}>
         <label data-product-attribute-value="{{id}}" class="form-label" for="attribute_{{id}}">{{this.label}}</label>
     {{/each}}

templates/components/products/options/set-rectangle.html

@@ -13,7 +13,10 @@
             id="attribute_{{id}}"
             name="attribute[{{../id}}]"
             value="{{id}}"
-            {{#if selected}}checked{{/if}}
+            {{#if selected}}
+                checked
+                data-default
+            {{/if}}
             {{#if ../required}}required{{/if}}>
         <label class="form-option" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
             <span class="form-option-variant">{{this.label}}</span>

templates/components/products/options/set-select.html

@@ -10,7 +10,7 @@
     <select class="form-select form-select--small" name="attribute[{{this.id}}]" id="attribute_{{id}}" {{#if required}}required{{/if}}>
         <option value="">{{lang 'products.choose_options'}}</option>
         {{#each this.values}}
-            <option data-product-attribute-value="{{id}}" value="{{id}}" {{#if selected}}selected{{/if}}>{{label}}</option>
+            <option data-product-attribute-value="{{id}}" value="{{id}}" {{#if selected}}selected data-default{{/if}}>{{label}}</option>
         {{/each}}
     </select>
 </div>

templates/components/products/options/swatch.html

@@ -9,7 +9,7 @@
     </label>
 
     {{#each this.values}}
-        <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_{{id}}" {{#if selected}}checked{{/if}} {{#if ../required}}required{{/if}}>
+        <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_{{id}}" {{#if selected}}checked data-default{{/if}} {{#if ../required}}required{{/if}}>
         <label class="form-option form-option-swatch" for="attribute_{{id}}" data-product-attribute-value="{{id}}">
             {{#if image}}
                 <span class='form-option-variant form-option-variant--pattern' title="{{this.label}}" style="background-image: url('{{getImage image "swatch_option_size"}}');"></span>