Merge pull request #1480 from sacr3dc0w/specs-tab

Add option to display custom fields under "Additional Information" tab on PDP
bigcommerce · Apr 25, 2019 · dbb0800 · dbb0800
2 parents be5a76e + 88a4665
commit dbb0800
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Remove deprecated "snippet" locations [#1479](https://github.com/bigcommerce/cornerstone/pull/1479)
 - Fix dropdown cart not showing discounts [#1481](https://github.com/bigcommerce/cornerstone/pull/1481)
 - Fix mobile banner text displaying with underline on mobile. [#1482](https://github.com/bigcommerce/cornerstone/pull/1482)
+- Add option to display custom fields under "Specifications" tab on PDP [#1480](https://github.com/bigcommerce/cornerstone/pull/1480)
 
 ## 3.4.1 (2019-04-11)
 - Sanitize faceted search item's title [#1426](https://github.com/bigcommerce/cornerstone/pull/1426)

diff --git 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
@@ -79,6 +79,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",
@@ -304,6 +305,7 @@
     "pdp-sale-price-label": "Now:",
     "pdp-non-sale-price-label": "Was:",
     "pdp-retail-price-label": "MSRP:",
+    "pdp-custom-fields-tab-label": "Additional Information",
     "paymentbuttons-paypal-layout": "horizontal",
     "paymentbuttons-paypal-color": "gold",
     "paymentbuttons-paypal-shape": "pill",

diff --git a/schema.json b/schema.json
@@ -1285,6 +1285,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
@@ -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-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">{{sanitize 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>
@@ -22,6 +27,16 @@
            {{{product.warranty}}}
        </div>
    {{/if}}
+   {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
+      <div class="tab-content" id="tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">
+         <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
@@ -139,10 +139,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>