fix(storefront): BCTHEME-490 Translation Gap: Compare products error message

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Translation Gap: Compare products error message. [#2061](https://github.com/bigcommerce/cornerstone/pull/2061)
 - Translation Gap: Gift Certificate -> Code required message. [#2064](https://github.com/bigcommerce/cornerstone/pull/2064)
 - Added translation for invalid quantity value error on Cart. [#2062](https://github.com/bigcommerce/cornerstone/pull/2062)
 - Translation Gap: Delete from Cart confirmation popup. [#2065](https://github.com/bigcommerce/cornerstone/pull/2065)

assets/js/theme/account.js

@@ -33,7 +33,7 @@ export default class Account extends PageManager {
         const $reorderForm = classifyForm('[data-account-reorder-form]');
         const $invoiceButton = $('[data-print-invoice]');
 
-        compareProducts(this.context.urls);
+        compareProducts(this.context);
 
         // Injected via template
         this.passwordRequirements = this.context.passwordRequirements;

assets/js/theme/brand.js

@@ -11,7 +11,7 @@ export default class Brand extends CatalogPage {
     }
 
     onReady() {
-        compareProducts(this.context.urls);
+        compareProducts(this.context);
 
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();

assets/js/theme/category.js

@@ -34,7 +34,7 @@ export default class Category extends CatalogPage {
 
         this.makeShopByPriceFilterAccessible();
 
-        compareProducts(this.context.urls);
+        compareProducts(this.context);
 
         if ($('#facetedSearch').length > 0) {
             this.initFacetedSearch();

assets/js/theme/compare.js

@@ -4,7 +4,7 @@ import compareProducts from './global/compare-products';
 
 export default class Compare extends PageManager {
     onReady() {
-        compareProducts(this.context.urls);
+        compareProducts(this.context);
 
         const message = this.context.compareRemoveMessage;
 

assets/js/theme/global/compare-products.js

@@ -12,19 +12,19 @@ function incrementCounter(counter, item) {
     counter.push(item);
 }
 
-function updateCounterNav(counter, $link, urlContext) {
+function updateCounterNav(counter, $link, urls) {
     if (counter.length !== 0) {
         if (!$link.is('visible')) {
             $link.addClass('show');
         }
-        $link.attr('href', `${urlContext.compare}/${counter.join('/')}`);
+        $link.attr('href', `${urls.compare}/${counter.join('/')}`);
         $link.find('span.countPill').html(counter.length);
     } else {
         $link.removeClass('show');
     }
 }
 
-export default function (urlContext) {
+export default function ({ noCompareMessage, urls }) {
     let compareCounter = [];
 
     const $compareLink = $('a[data-compare-nav]');
@@ -33,7 +33,7 @@ export default function (urlContext) {
         const $checked = $('body').find('input[name="products\[\]"]:checked');
 
         compareCounter = $checked.length ? $checked.map((index, element) => element.value).get() : [];
-        updateCounterNav(compareCounter, $compareLink, urlContext);
+        updateCounterNav(compareCounter, $compareLink, urls);
     });
 
     $('body').triggerHandler('compareReset');
@@ -48,15 +48,15 @@ export default function (urlContext) {
             decrementCounter(compareCounter, product);
         }
 
-        updateCounterNav(compareCounter, $clickedCompareLink, urlContext);
+        updateCounterNav(compareCounter, $clickedCompareLink, urls);
     });
 
     $('body').on('submit', '[data-product-compare]', event => {
         const $this = $(event.currentTarget);
         const productsToCompare = $this.find('input[name="products\[\]"]:checked');
 
         if (productsToCompare.length <= 1) {
-            showAlertModal('You must select at least two products to compare');
+            showAlertModal(noCompareMessage);
             event.preventDefault();
         }
     });
@@ -65,7 +65,7 @@ export default function (urlContext) {
         const $clickedCheckedInput = $('body').find('input[name="products\[\]"]:checked');
 
         if ($clickedCheckedInput.length <= 1) {
-            showAlertModal('You must select at least two products to compare');
+            showAlertModal(noCompareMessage);
             return false;
         }
     });

assets/js/theme/search.js

@@ -134,7 +134,7 @@ export default class Search extends CatalogPage {
     }
 
     onReady() {
-        compareProducts(this.context.urls);
+        compareProducts(this.context);
         this.arrangeFocusOnSortBy();
 
         const $searchForm = $('[data-advanced-search-form]');

lang/en.json

@@ -213,7 +213,8 @@
         "header": "Comparing {products, plural, one {# Product} other {# Products}}",
         "remove": "Remove",
         "no_remove": "At least 2 products are needed to make a valid comparison.",
-        "add_to_cart": "Add to cart"
+        "add_to_cart": "Add to cart",
+        "no_compare": "You must select at least two products to compare"
     },
     "category": {
         "label": "Categories",

templates/components/brand/product-listing.html

@@ -1,3 +1,5 @@
+{{inject 'noCompareMessage' (lang 'compare.no_compare')}}
+
 {{> components/products/filter sort=pagination.brand.sort}}
 
 <form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Brand: {{brand.name}}" {{/if}} data-product-compare>

templates/components/category/product-listing.html

@@ -1,3 +1,5 @@
+{{inject 'noCompareMessage' (lang 'compare.no_compare')}}
+
 {{#if category.products}}
     {{> components/products/filter sort=pagination.category.sort}}
 

templates/components/search/product-listing.html

@@ -1,3 +1,5 @@
+{{inject 'noCompareMessage' (lang 'compare.no_compare')}}
+
 {{#if product_results.products.length}}
     {{> components/products/filter sort=pagination.product_results.sort}}
 {{/if}}