From 912da51700dd5142dd2024a16faf56191205c059 Mon Sep 17 00:00:00 2001
From: sacr3dc0w <mshettles@gmail.com>
Date: Fri, 29 Jun 2018 16:15:46 -0700
Subject: [PATCH] Add option to display custom fields under "Specifications"
 tab on PDP

---
 CHANGELOG.md                                      |  2 +-
 assets/scss/components/foundation/tabs/_tabs.scss |  4 ++++
 config.json                                       |  2 ++
 schema.json                                       | 14 ++++++++++++++
 .../components/products/description-tabs.html     | 15 +++++++++++++++
 templates/components/products/product-view.html   | 10 ++++++----
 6 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60226d667b..d079e99a34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,9 @@
 # Changelog
 
 ## Draft
+- Add option to display custom fields under "Specifications" tab on PDP [#1295](https://github.com/bigcommerce/cornerstone/pull/1295)
 
 ## 3.1.0 (2019-01-21)
-
 - Fix for ESLint "func-names" warnings. [#1420](https://github.com/bigcommerce/cornerstone/pull/1420)
 - Major performance improvements. Reduce Javascript bundle size from 376kb to 286kb. [#1390](https://github.com/bigcommerce/cornerstone/pull/1390)
 - Fixed breadcrumbs for product and category pages [#1403](https://github.com/bigcommerce/cornerstone/pull/1403)
diff --git a/assets/scss/components/foundation/tabs/_tabs.scss b/assets/scss/components/foundation/tabs/_tabs.scss
index eefe8d7404..01e2bb158d 100644
--- a/assets/scss/components/foundation/tabs/_tabs.scss
+++ b/assets/scss/components/foundation/tabs/_tabs.scss
@@ -44,6 +44,10 @@
     @include breakpoint("medium") {
         padding: spacing("half") spacing("single");
     }
+
+    @include breakpoint("large") {
+        padding: remCalc(11px) remCalc(18px);
+    }
 }
 
 .tab-content {
diff --git a/config.json b/config.json
index 141708610c..38ef2b956a 100644
--- a/config.json
+++ b/config.json
@@ -73,6 +73,7 @@
     "show_accept_visa": false,
     "show_product_details_tabs": true,
     "show_product_reviews_tabs": false,
+    "show_custom_fields_tabs": false,
     "show_product_weight": true,
     "show_product_dimensions": false,
     "product_list_display_mode": "grid",
@@ -298,6 +299,7 @@
     "pdp-sale-price-label": "Now:",
     "pdp-non-sale-price-label": "Was:",
     "pdp-retail-price-label": "MSRP:",
+    "pdp-custom-fields-tab-label": "Specifications",
     "paymentbuttons-paypal-layout": "horizontal",
     "paymentbuttons-paypal-color": "gold",
     "paymentbuttons-paypal-shape": "pill",
diff --git a/schema.json b/schema.json
index 980dae5782..a333ad8f9c 100644
--- a/schema.json
+++ b/schema.json
@@ -1251,6 +1251,20 @@
         "force_reload": true,
         "id": "show_product_details_tabs"
       },
+      {
+         "type": "checkbox",
+         "label": "Product custom fields in tabs",
+         "force_reload": true,
+         "id": "show_custom_fields_tabs"
+      },
+      {
+        "type": "text",
+        "label": "Product custom fields tab label",
+        "force_reload": true,
+        "reference": "show_custom_fields_tabs",
+        "reference_default": false,
+        "id": "pdp-custom-fields-tab-label"
+      },
       {
         "type": "checkbox",
         "label": "Show product weight",
diff --git a/templates/components/products/description-tabs.html b/templates/components/products/description-tabs.html
index 63e682dd1f..42b2d239eb 100644
--- a/templates/components/products/description-tabs.html
+++ b/templates/components/products/description-tabs.html
@@ -7,6 +7,11 @@
             <a class="tab-title" href="#tab-warranty">{{lang 'products.warranty'}}</a>
         </li>
     {{/if}}
+    {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
+        <li class="tab">
+            <a class="tab-title" href="#tab-specs">{{theme_settings.pdp-custom-fields-tab-label}}</a>
+        </li>
+    {{/all}}
     {{#all settings.show_product_reviews theme_settings.show_product_reviews_tabs product.reviews.total}}
         <li class="tab">
             <a class="tab-title productView-reviewTabLink" href="#tab-reviews">{{lang 'products.reviews.header' total=product.reviews.total}}</a>
@@ -23,6 +28,16 @@
            {{{product.warranty}}}
        </div>
    {{/if}}
+   {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
+      <div class="tab-content" id="tab-specs">
+         <dl class="productView-info">
+            {{#each product.custom_fields}}
+               <dt class="productView-info-name">{{name}}:</dt>
+               <dd class="productView-info-value">{{{value}}}</dd>
+            {{/each}}
+         </dl>
+      </div>
+   {{/all}}
    {{#all settings.show_product_reviews theme_settings.show_product_reviews_tabs}}
        <div class="tab-content" id="tab-reviews">
            {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
index 117ed603d7..9278021545 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -143,10 +143,12 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                     </div>
                 {{/if}}
 
-                {{#each product.custom_fields}}
-                    <dt class="productView-info-name">{{name}}:</dt>
-                    <dd class="productView-info-value">{{{value}}}</dd>
-                {{/each}}
+                {{#if theme_settings.show_custom_fields_tabs '!==' true}}
+                    {{#each product.custom_fields}}
+                        <dt class="productView-info-name">{{name}}:</dt>
+                        <dd class="productView-info-value">{{{value}}}</dd>
+                    {{/each}}
+                {{/if}}
             </dl>
         </div>
     </section>