BCTHEME-693: Update translation mechanism for config.json values (#2089)

* Update translation mechanism for config.json values
bigcommerce · Aug 3, 2021 · 84b4231 · 84b4231
1 parent b6f5a7d
commit 84b4231
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 152 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Translation mechanism for config.json has been updated. [#2089](https://github.com/bigcommerce/cornerstone/pull/2089)
 - As a shopper I want to see gift wrapping price in product list the cart. [#2093](https://github.com/bigcommerce/cornerstone/pull/2093)
 - Fixed wishlist dropdown shift on quick view modal. [#2102](https://github.com/bigcommerce/cornerstone/pull/2102)
 - Empty email input in newsletter field should trigger an error. [#2101](https://github.com/bigcommerce/cornerstone/pull/2101)

diff --git a/assets/js/theme/common/utils/translations-utils.js b/assets/js/theme/common/utils/translations-utils.js
@@ -26,27 +26,3 @@ export const createTranslationDictionary = (context) => {
         return acc;
     }, {});
 };
-
-const defaultPageBuilderValues = {
-    pdp_sale_badge_label: 'On Sale!',
-    pdp_sold_out_label: 'Sold Out',
-    'pdp-sale-price-label': 'Now:',
-    'pdp-non-sale-price-label': 'Was:',
-    'pdp-retail-price-label': 'MSRP:',
-    'pdp-custom-fields-tab-label': 'Additional Information',
-};
-
-/**
- * defines Translation for values from page builder (locally could be found in config.json)
- */
-export const translatePageBuilderValues = () => {
-    $('[data-page-builder-key]').each((_, selector) => {
-        const $item = $(selector);
-        const itemText = $item.text().trim();
-        const itemDefaultTranslation = $item.data('default-translation');
-
-        if (itemText === defaultPageBuilderValues[$item.data('page-builder-key')] && itemText !== itemDefaultTranslation) {
-            $item.text(itemDefaultTranslation);
-        }
-    });
-};
diff --git a/assets/js/theme/global.js b/assets/js/theme/global.js
@@ -15,21 +15,11 @@ import adminBar from './global/adminBar';
 import carousel from './common/carousel';
 import loadingProgressBar from './global/loading-progress-bar';
 import svgInjector from './global/svg-injector';
-import { translatePageBuilderValues } from './common/utils/translations-utils';
 
 export default class Global extends PageManager {
     onReady() {
         const {
-            channelId,
-            cartId,
-            productId,
-            categoryId,
-            secureBaseUrl,
-            maintenanceModeSettings,
-            adminBarLanguage,
-            showAdminBar,
-            isProductCardPresented,
-            isProductListPresented,
+            channelId, cartId, productId, categoryId, secureBaseUrl, maintenanceModeSettings, adminBarLanguage, showAdminBar,
         } = this.context;
         cartPreview(secureBaseUrl, cartId);
         quickSearch();
@@ -45,9 +35,5 @@ export default class Global extends PageManager {
         }
         loadingProgressBar();
         svgInjector();
-
-        if (isProductListPresented || isProductCardPresented) {
-            translatePageBuilderValues();
-        }
     }
 }
diff --git a/config.json b/config.json
@@ -318,12 +318,12 @@
     "navigation_design": "simple",
     "price_ranges": true,
     "pdp-price-label": "",
-    "pdp_sale_badge_label": "On Sale!",
-    "pdp_sold_out_label": "Sold Out",
-    "pdp-sale-price-label": "Now:",
-    "pdp-non-sale-price-label": "Was:",
-    "pdp-retail-price-label": "MSRP:",
-    "pdp-custom-fields-tab-label": "Additional Information",
+    "pdp_sale_badge_label": "",
+    "pdp_sold_out_label": "",
+    "pdp-sale-price-label": "",
+    "pdp-non-sale-price-label": "",
+    "pdp-retail-price-label": "",
+    "pdp-custom-fields-tab-label": "",
     "paymentbuttons-paypal-layout": "vertical",
     "paymentbuttons-paypal-color": "gold",
     "paymentbuttons-paypal-shape": "rect",

diff --git a/templates/components/amp/products/card.html b/templates/components/amp/products/card.html
@@ -1,5 +1,3 @@
-{{inject "isProductCardPresented" true}}
-
 <article class="card {{#if alternate}}card--alternate{{/if}}">
     <figure class="card-figure">
         {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}

diff --git a/templates/components/amp/products/list.html b/templates/components/amp/products/list.html
@@ -1,5 +1,3 @@
-{{inject "isProductListPresented" true}}
-
 <ul class="productList">
     {{#each products}}
 	    <li class="product">

diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -1,5 +1,3 @@
-{{inject "isProductCardPresented" true}}
-
 <article
     class="card
     {{#if alternate}} card--alternate{{/if}}"
@@ -27,22 +25,34 @@
     {{/if}}>
     <figure class="card-figure">
         {{#if stock_level '===' 0}}
-            {{> components/products/product-badge
-                badge-type='sold-out'
-                badge_view=theme_settings.product_sold_out_badges
-                badge_label=theme_settings.pdp_sold_out_label
-                page_builder_key="pdp_sold_out_label"
-                default_translation=(lang "page_builder.pdp_sold_out_label")
-            }}
-        {{else}}
-            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+            {{#if theme_settings.pdp_sold_out_label '===' ''}}
+                {{> components/products/product-badge
+                    badge-type='sold-out'
+                    badge_view=theme_settings.product_sold_out_badges
+                    badge_label=(lang "page_builder.pdp_sold_out_label")
+                }}
+            {{else}}
                 {{> components/products/product-badge
-                    badge-type='sale'
-                    badge_view=theme_settings.product_sale_badges
-                    badge_label=theme_settings.pdp_sale_badge_label
-                    page_builder_key="pdp_sale_badge_label"
-                    default_translation=(lang "page_builder.pdp_sale_badge_label")
+                    badge-type='sold-out'
+                    badge_view=theme_settings.product_sold_out_badges
+                    badge_label=theme_settings.pdp_sold_out_label
                 }}
+            {{/if}}
+        {{else}}
+            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+                {{#if theme_settings.pdp_sale_badge_label '===' ''}}
+                    {{> components/products/product-badge
+                        badge-type='sale'
+                        badge_view=theme_settings.product_sale_badges
+                        badge_label=(lang "page_builder.pdp_sale_badge_label")
+                    }}
+                {{else}}
+                    {{> components/products/product-badge
+                        badge-type='sale'
+                        badge_view=theme_settings.product_sale_badges
+                        badge_label=theme_settings.pdp_sale_badge_label
+                    }}
+                {{/if}}
             {{/or}}
         {{/if}}
         <a href="{{url}}"
@@ -111,7 +121,7 @@
         <h3 class="card-title">
             <a aria-label="{{name}},{{> components/products/product-aria-label}}"
                href="{{url}}"
-               {{#if settings.data_tag_enabled}}data-event-type="product-click"{{/if}}
+               {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
             >
                 {{name}}
             </a>

diff --git a/templates/components/products/description-tabs.html b/templates/components/products/description-tabs.html
@@ -13,8 +13,6 @@
         <li class="tab">
             <a class="tab-title"
                href="#tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}"
-               data-page-builder-key="pdp-custom-fields-tab-label"
-               data-default-translation="{{lang "page_builder.pdp-custom-fields-tab-label"}}"
             >
                 {{sanitize theme_settings.pdp-custom-fields-tab-label}}
             </a>

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -20,22 +20,34 @@
            {{/if}}
         >
         {{#if stock_level '===' 0}}
-            {{> components/products/product-badge
-                badge-type='sold-out'
-                badge_view=theme_settings.product_sold_out_badges
-                badge_label=theme_settings.pdp_sold_out_label
-                page_builder_key="pdp_sold_out_label"
-                default_translation=(lang "page_builder.pdp_sold_out_label")
-            }}
-        {{else}}
-            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+            {{#if theme_settings.pdp_sold_out_label '===' ''}}
                 {{> components/products/product-badge
-                    badge-type='sale'
-                    badge_view=theme_settings.product_sale_badges
-                    badge_label=theme_settings.pdp_sale_badge_label
-                    page_builder_key="pdp_sale_badge_label"
-                    default_translation=(lang "page_builder.pdp_sale_badge_label")
+                    badge-type='sold-out'
+                    badge_view=theme_settings.product_sold_out_badges
+                    badge_label=(lang "page_builder.pdp_sold_out_label")
                 }}
+            {{else}}
+                {{> components/products/product-badge
+                    badge-type='sold-out'
+                    badge_view=theme_settings.product_sold_out_badges
+                    badge_label=theme_settings.pdp_sold_out_label
+                }}
+            {{/if}}
+        {{else}}
+            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+                {{#if theme_settings.pdp_sale_badge_label '===' ''}}
+                    {{> components/products/product-badge
+                        badge-type='sale'
+                        badge_view=theme_settings.product_sale_badges
+                        badge_label=(lang "page_builder.pdp_sale_badge_label")
+                    }}
+                {{else}}
+                    {{> components/products/product-badge
+                        badge-type='sale'
+                        badge_view=theme_settings.product_sale_badges
+                        badge_label=theme_settings.pdp_sale_badge_label
+                    }}
+                {{/if}}
             {{/or}}
         {{/if}}
         {{> components/common/responsive-img
@@ -65,8 +77,8 @@
                 {{/if}}
                 <h4 class="listItem-title">
                     <a href="{{url}}"
-                       aria-label="{{name}},{{> components/products/product-aria-label}}"
-                       {{#if settings.data_tag_enabled}}data-event-type="product-click"{{/if}}
+                        aria-label="{{name}},{{> components/products/product-aria-label}}"
+                        {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
                     >
                         {{name}}
                     </a>

diff --git a/templates/components/products/list.html b/templates/components/products/list.html
@@ -1,5 +1,3 @@
-{{inject "isProductListPresented" true}}
-
 <ul class="productList">
     {{#each products}}
     <li class="product">

diff --git a/templates/components/products/price-label.html b/templates/components/products/price-label.html
@@ -0,0 +1,5 @@
+{{#if label_value '===' ''}}
+    {{fallback}}
+{{else}}
+    {{label_value}}
+{{/if}}
diff --git a/templates/components/products/price-range.html b/templates/components/products/price-range.html
@@ -1,15 +1,21 @@
 {{#and price.retail_price_range.min.with_tax price.retail_price_range.max.with_tax}}
     <div class="price-section price-section--withTax rrp-price--withTax">
-        <span data-page-builder-key="pdp-retail-price-label" data-default-translation="{{lang "page_builder.pdp-retail-price-label"}}">
-            {{theme_settings.pdp-retail-price-label}}
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-retail-price-label
+                fallback=(lang "page_builder.pdp-retail-price-label")
+            }}
         </span>
         <span data-product-rrp-price-with-tax class="price price--rrp">{{price.retail_price_range.min.with_tax.formatted}} - {{price.retail_price_range.max.with_tax.formatted}}</span>
     </div>
 {{else}}
     {{#if price.with_tax}}
         <div class="price-section price-section--withTax rrp-price--withTax" style="display: none;">
-            <span data-page-builder-key="pdp-retail-price-label" data-default-translation="{{lang "page_builder.pdp-retail-price-label"}}">
-                {{theme_settings.pdp-retail-price-label}}
+            <span>
+                {{> components/products/price-label
+                    label_value=theme_settings.pdp-retail-price-label
+                    fallback=(lang "page_builder.pdp-retail-price-label")
+                }}
             </span>
             <span data-product-rrp-with-tax class="price price--rrp">
                 {{price.rrp_with_tax.formatted}}
@@ -20,21 +26,23 @@
 {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}
     {{!-- Never display the "non-sales price" if there is a price range to be shown, but we do want the element on the page --}}
     <div class="price-section price-section--withTax non-sale-price--withTax" style="display: none;">
-        <span data-page-builder-key="pdp-non-sale-price-label" data-default-translation="{{lang "page_builder.pdp-non-sale-price-label"}}">
-            {{theme_settings.pdp-non-sale-price-label}}
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-non-sale-price-label
+                fallback=(lang "page_builder.pdp-non-sale-price-label")
+            }}
         </span>
         <span data-product-non-sale-price-with-tax class="price price--non-sale">
             {{price.non_sale_price_with_tax.formatted}}
         </span>
     </div>
     <div class="price-section price-section--withTax" {{#if schema_org}}itemprop="offers" itemscope itemtype="https://schema.org/Offer"{{/if}}>
         <span class="price-label">{{theme_settings.pdp-price-label}}</span>
-        <span class="price-now-label"
-              style="display: none;"
-              data-page-builder-key="pdp-sale-price-label"
-              data-default-translation="{{lang "page_builder.pdp-sale-price-label"}}"
-        >
-            {{theme_settings.pdp-sale-price-label}}
+        <span class="price-now-label" style="display: none;">
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-sale-price-label
+                fallback=(lang "page_builder.pdp-sale-price-label")
+            }}
         </span>
         <span data-product-price-with-tax class="price price--withTax">{{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}}</span>
         {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
@@ -58,16 +66,22 @@
 {{/and}}
 {{#and price.retail_price_range.min.without_tax price.retail_price_range.max.without_tax}}
     <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">
-        <span data-page-builder-key="pdp-retail-price-label" data-default-translation="{{lang "page_builder.pdp-retail-price-label"}}">
-            {{theme_settings.pdp-retail-price-label}}
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-retail-price-label
+                fallback=(lang "page_builder.pdp-retail-price-label")
+            }}
         </span>
         <span data-product-rrp-price-without-tax class="price price--rrp">{{price.retail_price_range.min.without_tax.formatted}} - {{price.retail_price_range.max.without_tax.formatted}}</span>
     </div>
 {{else}}
     {{#if price.without_tax}}
         <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" style="display: none;">
-            <span data-page-builder-key="pdp-retail-price-label" data-default-translation="{{lang "page_builder.pdp-retail-price-label"}}">
-                {{theme_settings.pdp-retail-price-label}}
+            <span>
+                {{> components/products/price-label
+                    label_value=theme_settings.pdp-retail-price-label
+                    fallback=(lang "page_builder.pdp-retail-price-label")
+                }}
             </span>
             <span data-product-rrp-price-without-tax class="price price--rrp">
                 {{price.rrp_without_tax.formatted}}
@@ -78,21 +92,23 @@
 {{#and price.price_range.min.without_tax price.price_range.max.without_tax}}
     {{!-- Never display the "non-sales price" if there is a price range to be shown, but we do want the element on the page --}}
     <div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" style="display: none;">
-        <span data-page-builder-key="pdp-non-sale-price-label" data-default-translation="{{lang "page_builder.pdp-non-sale-price-label"}}">
-            {{theme_settings.pdp-non-sale-price-label}}
+        <span>
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-non-sale-price-label
+                fallback=(lang "page_builder.pdp-non-sale-price-label")
+            }}
         </span>
         <span data-product-non-sale-price-without-tax class="price price--non-sale">
             {{price.non_sale_price_without_tax.formatted}}
         </span>
     </div>
     <div class="price-section price-section--withoutTax{{#and price_range.min.with_tax price_range.max.with_tax}} price-section--minor{{/and}}" {{#if schema_org}}itemprop="offers" itemscope itemtype="https://schema.org/Offer"{{/if}}>
         <span class="price-label">{{theme_settings.pdp-price-label}}</span>
-        <span class="price-now-label"
-              style="display: none;"
-              data-page-builder-key="pdp-sale-price-label"
-              data-default-translation="{{lang "page_builder.pdp-sale-price-label"}}"
-        >
-            {{theme_settings.pdp-sale-price-label}}
+        <span class="price-now-label" style="display: none;">
+            {{> components/products/price-label
+                label_value=theme_settings.pdp-sale-price-label
+                fallback=(lang "page_builder.pdp-sale-price-label")
+            }}
         </span>
         <span data-product-price-without-tax class="price price--withoutTax">{{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}}</span>
         {{#and price.price_range.min.with_tax price.price_range.max.with_tax}}