feat(storefront): BCTHEME-608 Translation mechanism for config.json values should be implemented

assets/js/theme/common/utils/translations-utils.js

@@ -26,3 +26,27 @@ 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);
+        }
+    });
+};

assets/js/theme/global.js

@@ -15,11 +15,21 @@ 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,
+            channelId,
+            cartId,
+            productId,
+            categoryId,
+            secureBaseUrl,
+            maintenanceModeSettings,
+            adminBarLanguage,
+            showAdminBar,
+            isProductCardPresented,
+            isProductListPresented,
         } = this.context;
         cartPreview(secureBaseUrl, cartId);
         quickSearch();
@@ -35,5 +45,9 @@ export default class Global extends PageManager {
         }
         loadingProgressBar();
         svgInjector();
+
+        if (isProductListPresented || isProductCardPresented) {
+            translatePageBuilderValues();
+        }
     }
 }

lang/en.json

@@ -960,5 +960,13 @@
         "price_max_not_entered": "Max. price is required.",
         "price_invalid_value": "Input must be greater than 0.",
         "invalid_gift_certificate": "Please enter your valid certificate code."
+    },
+    "page_builder": {
+        "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"
     }
 }

templates/components/amp/products/card.html

@@ -1,3 +1,5 @@
+{{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}}

templates/components/amp/products/list.html

@@ -1,3 +1,5 @@
+{{inject "isProductListPresented" true}}
+
 <ul class="productList">
     {{#each products}}
 	    <li class="product">

templates/components/products/card.html

@@ -1,3 +1,5 @@
+{{inject "isProductCardPresented" true}}
+
 <article
     class="card
     {{#if alternate}} card--alternate{{/if}}"
@@ -29,13 +31,17 @@
                 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}}
                 {{> 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")
                 }}
             {{/or}}
         {{/if}}
@@ -105,7 +111,10 @@
         <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}}>{{name}}</a>
+               {{#if settings.data_tag_enabled}}data-event-type="product-click"{{/if}}
+            >
+                {{name}}
+            </a>
         </h3>
 
         <div class="card-text" data-test-info-type="price">

templates/components/products/description-tabs.html

@@ -11,7 +11,13 @@
     {{/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>
+            <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>
         </li>
     {{/all}}
     {{#all settings.show_product_reviews theme_settings.show_product_reviews product.reviews.total}}

templates/components/products/list-item.html

@@ -1,5 +1,13 @@
 {{#if settings.data_tag_enabled}}
-    <article class="listItem" data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}">
+    <article class="listItem"
+             data-event-type="{{event}}"
+             data-entity-id="{{id}}"
+             data-position="{{position}}"
+             data-name="{{name}}"
+             data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}"
+             data-product-brand="{{brand.name}}"
+             data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}"
+    >
 {{else}}
     <article class="listItem">
 {{/if}}
@@ -16,13 +24,17 @@
                 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}}
                 {{> 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")
                 }}
             {{/or}}
         {{/if}}
@@ -53,10 +65,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>

templates/components/products/list.html

@@ -1,3 +1,5 @@
+{{inject "isProductListPresented" true}}
+
 <ul class="productList">
     {{#each products}}
     <li class="product">

templates/components/products/price-range.html

@@ -1,12 +1,16 @@
 {{#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">
-        {{theme_settings.pdp-retail-price-label}}
+        <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>
         <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;">
-            {{theme_settings.pdp-retail-price-label}}
+            <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>
             <span data-product-rrp-with-tax class="price price--rrp">
                 {{price.rrp_with_tax.formatted}}
             </span>
@@ -16,14 +20,22 @@
 {{#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;">
-        {{theme_settings.pdp-non-sale-price-label}}
+        <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>
         <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;">{{theme_settings.pdp-sale-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>
         <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}}
             <abbr title="{{lang 'products.including_tax'}}">{{lang 'products.price_with_tax' tax_label=price.price_range.min.tax_label}}</abbr>
@@ -46,13 +58,17 @@
 {{/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}}">
-        {{theme_settings.pdp-retail-price-label}}
+        <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>
         <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;">
-            {{theme_settings.pdp-retail-price-label}}
+            <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>
             <span data-product-rrp-price-without-tax class="price price--rrp">
                 {{price.rrp_without_tax.formatted}}
             </span>
@@ -62,14 +78,22 @@
 {{#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;">
-        {{theme_settings.pdp-non-sale-price-label}}
+        <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>
         <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;">{{theme_settings.pdp-sale-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>
         <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}}
             <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.price_range.min.tax_label}}</abbr>

templates/components/products/price.html

@@ -1,4 +1,4 @@
-{{!-- There are 2 code paths for generating the PDP pricing HTML determined by the following #and condition. 
+{{!-- There are 2 code paths for generating the PDP pricing HTML determined by the following #and condition.
 If a 'price_range' exists then we generate all HTML in price-range.html, otherwise it is defined here. Both code
 paths generate the same HTML structure with some differences in whether that element is displayed by default (css styling).
 
@@ -9,13 +9,17 @@
 {{else}}
     {{#if price.with_tax}}
         <div class="price-section price-section--withTax rrp-price--withTax" {{#unless price.rrp_with_tax}}style="display: none;"{{/unless}}>
-            {{theme_settings.pdp-retail-price-label}}
+            <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>
             <span data-product-rrp-with-tax class="price price--rrp">
                 {{price.rrp_with_tax.formatted}}
             </span>
         </div>
         <div class="price-section price-section--withTax non-sale-price--withTax" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
-            {{theme_settings.pdp-non-sale-price-label}}
+            <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>
             <span data-product-non-sale-price-with-tax class="price price--non-sale">
                 {{price.non_sale_price_with_tax.formatted}}
             </span>
@@ -24,12 +28,16 @@
             <span class="price-label" {{#if price.non_sale_price_with_tax}}style="display: none;"{{/if}}>
                 {{theme_settings.pdp-price-label}}
             </span>
-            <span class="price-now-label" {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}>
+            <span class="price-now-label"
+                  {{#unless price.non_sale_price_with_tax}}style="display: none;"{{/unless}}
+                  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>
             <span data-product-price-with-tax class="price price--withTax">{{price.with_tax.formatted}}</span>
             {{#if schema_org}}
-                <meta itemprop="availability" itemtype="https://schema.org/ItemAvailability" 
+                <meta itemprop="availability" itemtype="https://schema.org/ItemAvailability"
                 	content="https://schema.org/{{#if product.pre_order}}PreOrder{{else if product.out_of_stock}}OutOfStock{{else if product.can_purchase '===' false}}OutOfStock{{else}}InStock{{/if}}">
                 <meta itemprop="itemCondition" itemtype="https://schema.org/OfferItemCondition" content="https://schema.org/{{product.condition}}Condition">
                 <meta itemprop="priceCurrency" content="{{currency_selector.active_currency_code}}">
@@ -47,13 +55,17 @@
     {{/if}}
     {{#if price.without_tax}}
         <div class="price-section price-section--withoutTax rrp-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.rrp_without_tax}}style="display: none;"{{/unless}}>
-            {{theme_settings.pdp-retail-price-label}}
-            <span data-product-rrp-price-without-tax class="price price--rrp"> 
+            <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>
+            <span data-product-rrp-price-without-tax class="price price--rrp">
                 {{price.rrp_without_tax.formatted}}
             </span>
         </div>
         <div class="price-section price-section--withoutTax non-sale-price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
-            {{theme_settings.pdp-non-sale-price-label}}
+            <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>
             <span data-product-non-sale-price-without-tax class="price price--non-sale">
                 {{price.non_sale_price_without_tax.formatted}}
             </span>
@@ -62,7 +74,11 @@
             <span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
                 {{theme_settings.pdp-price-label}}
             </span>
-            <span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
+            <span class="price-now-label"
+                  {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}
+                  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>
             <span data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>