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. (#2131)

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
+- 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 basic validation for Account Signup Date Field when it's empty [#2126](https://github.com/bigcommerce/cornerstone/pull/2126)
 - Fixed Quick View modal "X" button focus bubble being slightly off center [#2130](https://github.com/bigcommerce/cornerstone/pull/2130)
 - Apply dependency updates (jest & lighthouse). [#2132](https://github.com/bigcommerce/cornerstone/pull/2132)

lang/en.json

@@ -161,6 +161,7 @@
         "change": "Change",
         "sign_up": "Register",
         "login": "Sign in",
+        "login_for_pricing": "Log in for pricing",
         "logout": "Sign out",
         "account": "Account",
         "cart": "Cart",

templates/components/common/login-for-pricing.html

@@ -1 +1 @@
-<p translate>Log in for pricing</p>
+<p translate>{{lang 'common.login_for_pricing'}}</p>

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}}

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 (unless theme_settings.restrict_to_login)}}
+            {{#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}}
@@ -55,9 +59,10 @@
                 {{/if}}
             {{/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">
@@ -119,7 +124,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}}
             >

templates/components/products/list-item.html

@@ -1,20 +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 (unless theme_settings.restrict_to_login)}}
+        {{#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}}
@@ -77,8 +78,10 @@
                 {{/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="{{> components/products/product-info}}"
+                    {{#if settings.data_tag_enabled}}
+                    data-event-type="product-click"
+                    {{/if}}
                     >
                         {{name}}
                     </a>

templates/components/products/product-info.html

@@ -0,0 +1,5 @@
+{{#or customer (unless theme_settings.restrict_to_login)}}
+{{name}}, {{> components/products/product-aria-label}}
+{{else}}
+{{name}}
+{{/or}}"

templates/components/products/product-view.html

@@ -1,5 +1,26 @@
-<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}}>
-{{#each product.reviews.messages}}
+<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 (unless theme_settings.restrict_to_login)}}
+        {{#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}}
         {{/if}}