Merge pull request #1431 from bc-jz/STRF-4173

STRF-4173 - Ensure SKU and UPC display correctly for Variants when th…
bigcommerce · Jan 24, 2019 · 8f2010d · 8f2010d
2 parents 7e7647d + 1d19fea
commit 8f2010d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Draft
 
+- Ensure SKU and UPC display correctly for Variants on PDP. [#1431](https://github.com/bigcommerce/cornerstone/pull/1431)
+
 ## 3.1.1 (2019-01-23)
 
 - Downgrade Webpack to last known good version during development. [#1428](https://github.com/bigcommerce/cornerstone/pull/1428)

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: {
+                $label: $('dt.sku-label', $scope),
+                $value: $('[data-product-sku]', $scope),
+            },
+            upc: {
+                $label: $('dt.upc-label', $scope),
+                $value: $('[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.$value.text(data.sku);
+            viewModel.sku.$label.show();
+        } else {
+            viewModel.sku.$label.hide();
+            viewModel.sku.$value.text('');
         }
 
         // If UPC is available
         if (data.upc) {
-            viewModel.$upc.text(data.upc);
+            viewModel.upc.$value.text(data.upc);
+            viewModel.upc.$label.show();
+        } else {
+            viewModel.upc.$label.hide();
+            viewModel.upc.$value.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>