From 8a49f8eba0ee5b5ecb23221cc90c2e76f1f6b9b3 Mon Sep 17 00:00:00 2001
From: "Jason Zamora (jz)" <jason.zamora@bigcommerce.com>
Date: Wed, 23 Jan 2019 07:40:02 -0600
Subject: [PATCH] STRF-4173 - Ensure SKU and UPC display correctly for Variants
 when they are not set on base product.

---
 CHANGELOG.md                                  |  1 +
 assets/js/theme/common/product-details.js     | 22 +++++++++++++++----
 .../components/products/product-view.html     | 12 ++++------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 108c39f66f..237db10d71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ## 3.1.1 (2019-01-23)
 
 - Downgrade Webpack to last known good version during development. [#1428](https://github.com/bigcommerce/cornerstone/pull/1428)
+- Ensure SKU and UPC display correctly for Variants on PDP. [#1431](https://github.com/bigcommerce/cornerstone/pull/1431)
 
 ## 3.1.0 (2019-01-21)
 
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index 76fe076e26..d1b402144e 100644
--- 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
index 117ed603d7..9695dc7625 100644
--- 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>