fix(storefront): BCTHEME-906 Hide prices for aria-label and data-prod…

…uct-price attributes if set to Hidden for guests. Hide currency selection for non-logged in users.
bigcommerce · Oct 18, 2021 · ace1e99 · ace1e99
1 parent 31ac15a
commit ace1e99
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Hide prices for aria-label and data-product-price attributes if set to "Hidden for guests". Hide currency selection for non-logged in users. [#2131](https://github.com/bigcommerce/cornerstone/pull/2131)
 - Added settings for payment banners. [#2021](https://github.com/bigcommerce/cornerstone/pull/2021)
 - Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039)
 - Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)

diff --git a/lang/en.json b/lang/en.json
@@ -159,6 +159,7 @@
         "change": "Change",
         "sign_up": "Register",
         "login": "Sign in",
+        "login_for_pricing": "Log in for pricing",
         "logout": "Sign out",
         "account": "Account",
         "cart": "Cart",

diff --git a/templates/components/common/login-for-pricing.html b/templates/components/common/login-for-pricing.html
@@ -1 +1 @@
-<p translate>Log in for pricing</p>
+<p translate>{{lang 'common.login_for_pricing'}}</p>
diff --git a/templates/components/common/navigation.html b/templates/components/common/navigation.html
@@ -1,5 +1,7 @@
 <nav class="navUser">
-    {{> components/common/currency-selector}}
+    {{#if customer.id}}
+        {{> components/common/currency-selector}}
+    {{/if}}
 
     <ul class="navUser-section navUser-section--alt">
         {{#if customer.store_credit.value '>' 0}}

diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -17,11 +17,15 @@
         {{/each}}"
         data-product-brand="{{brand.name}}"
         data-product-price="
-        {{#if price.with_tax}}
-            {{price.with_tax.value}}
+        {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+            {{#if price.with_tax}}
+                {{price.with_tax.value}}
+            {{else}}
+                {{price.without_tax.value}}
+            {{/if}}
         {{else}}
-            {{price.without_tax.value}}
-        {{/if}}"
+            {{lang 'common.login_for_pricing'}}
+        {{/or}}"
     {{/if}}>
     <figure class="card-figure">
         {{#if stock_level '===' 0}}
@@ -39,9 +43,10 @@
                 }}
             {{/or}}
         {{/if}}
+
         <a href="{{url}}"
            class="card-figure__link"
-           aria-label="{{name}},{{> components/products/product-aria-label}}"
+           aria-label="{{> components/products/product-info}}"
            {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
         >
             <div class="card-img-container">
@@ -103,7 +108,7 @@
             <p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
         {{/if}}
         <h3 class="card-title">
-            <a aria-label="{{name}},{{> components/products/product-aria-label}}"
+            <a aria-label="{{> components/products/product-info}}"
                href="{{url}}"
                {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
         </h3>

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -1,12 +1,21 @@
 {{#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="
+    {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+        {{#if price.with_tax}}
+            {{price.with_tax.value}}
+        {{else}}
+            {{price.without_tax.value}}
+        {{/if}}
+    {{else}}
+        {{lang 'common.login_for_pricing'}}
+    {{/or}}">
 {{else}}
     <article class="listItem">
 {{/if}}
     <figure class="listItem-figure">
         <a href="{{url}}"
            class="listItem-figure__link"
-           aria-label="{{name}},{{> components/products/product-aria-label}}"
+           aria-label="{{> components/products/product-info}}"
            {{#if settings.data_tag_enabled}}
            data-event-type="product-click"
            {{/if}}
@@ -53,7 +62,7 @@
                 {{/if}}
                 <h4 class="listItem-title">
                     <a href="{{url}}"
-                    aria-label="{{name}},{{> components/products/product-aria-label}}"
+                    aria-label="{{> components/products/product-info}}"
                     {{#if settings.data_tag_enabled}}
                     data-event-type="product-click"
                     {{/if}}

diff --git a/templates/components/products/product-info.html b/templates/components/products/product-info.html
@@ -0,0 +1,5 @@
+{{#or customer (if theme_settings.restrict_to_login '===' false)}}
+{{name}}, {{> components/products/product-aria-label}}
+{{else}}
+{{name}}
+{{/or}}"
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -1,4 +1,15 @@
-<div class="productView" {{#if settings.data_tag_enabled}} data-event-type="product" data-entity-id="{{product.id}}" data-name="{{product.title}}" data-product-category="{{#each product.category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{product.brand.name}}" data-product-price="{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}" data-product-variant="single-product-option"{{/if}}>
+<div class="productView" {{#if settings.data_tag_enabled}} data-event-type="product" data-entity-id="{{product.id}}" data-name="{{product.title}}" data-product-category="{{#each product.category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{product.brand.name}}"
+data-product-price="
+{{#or customer (if theme_settings.restrict_to_login '===' false)}}
+    {{#if product.price.with_tax}}
+        {{product.price.with_tax.value}}
+    {{else}}
+        {{product.price.without_tax.value}}
+    {{/if}}
+{{else}}
+    {{lang 'common.login_for_pricing'}}
+{{/or}}"
+data-product-variant="single-product-option"{{/if}}>
 {{#each product.reviews.messages}}
         {{#if error}}
             {{> components/common/alert/alert-error error}}