STRF-4173 - Ensure SKU and UPC display correctly for Variants when th…

…ey are not set on base product.
bigcommerce · Jan 23, 2019 · b31bd89 · b31bd89
1 parent 703128b
commit b31bd89
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -216,8 +216,14 @@ export default class ProductDetails {
                 $container: $('.form-field--stock', $scope),
                 $input: $('[data-product-stock]', $scope),
             },
-            $sku: $('[data-product-sku]'),
-            $upc: $('[data-product-upc]'),
+            sku: {
+                $dt: $('dt.sku-label', $scope),
+                $dd: $('[data-product-sku]', $scope),
+            },
+            upc: {
+                $dt: $('dt.upc-label', $scope),
+                $dd: $('[data-product-upc]', $scope),
+            },
             quantity: {
                 $text: $('.incrementTotal', $scope),
                 $input: $('[name=qty\\[\\]]', $scope),
@@ -552,12 +558,20 @@ export default class ProductDetails {
 
         // If SKU is available
         if (data.sku) {
-            viewModel.$sku.text(data.sku);
+            viewModel.sku.$dd.text(data.sku);
+            viewModel.sku.$dt.show();
+        } else {
+            viewModel.sku.$dt.hide();
+            viewModel.sku.$dd.text('');
         }
 
         // If UPC is available
         if (data.upc) {
-            viewModel.$upc.text(data.upc);
+            viewModel.upc.$dd.text(data.upc);
+            viewModel.upc.$dt.show();
+        } else {
+            viewModel.upc.$dt.hide();
+            viewModel.upc.$dd.text('');
         }
 
         // if stock view is on (CP settings)

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -61,14 +61,10 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
             </div>
             {{product.detail_messages}}
             <dl class="productView-info">
-                {{#if product.sku}}
-                    <dt class="productView-info-name">{{lang 'products.sku'}}</dt>
-                    <dd class="productView-info-value" data-product-sku>{{product.sku}}</dd>
-                {{/if}}
-                {{#if product.upc}}
-                    <dt class="productView-info-name">{{lang 'products.upc'}}</dt>
-                    <dd class="productView-info-value" data-product-upc>{{product.upc}}</dd>
-                {{/if}}
+                <dt class="productView-info-name sku-label"{{#unless product.sku}} style="display: none;"{{/unless}}>{{lang 'products.sku'}}</dt>
+                <dd class="productView-info-value" data-product-sku>{{product.sku}}</dd>
+                <dt class="productView-info-name upc-label"{{#unless product.upc}} style="display: none;"{{/unless}}>{{lang 'products.upc'}}</dt>
+                <dd class="productView-info-value" data-product-upc>{{product.upc}}</dd>
                 {{#if product.condition}}
                     <dt class="productView-info-name">{{lang 'products.condition'}}</dt>
                     <dd class="productView-info-value">{{product.condition}}</dd>