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

…uct-price attributes if set to Hidden for guests
bigcommerce · Oct 12, 2021 · fe73708 · fe73708
1 parent 31ac15a
commit fe73708
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 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". [#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/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}}"
+            Log in for pricing
+        {{/or}}"
     {{/if}}>
     <figure class="card-figure">
         {{#if stock_level '===' 0}}
@@ -39,9 +43,15 @@
                 }}
             {{/or}}
         {{/if}}
+
         <a href="{{url}}"
            class="card-figure__link"
-           aria-label="{{name}},{{> components/products/product-aria-label}}"
+           aria-label="
+           {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+               {{name}},{{> components/products/product-aria-label}}
+           {{else}}
+               {{name}}
+           {{/or}}"
            {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
         >
             <div class="card-img-container">
@@ -103,7 +113,12 @@
             <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="
+               {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+                   {{name}},{{> components/products/product-aria-label}}
+               {{else}}
+                   {{name}}
+               {{/or}}"
                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,26 @@
 {{#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}}
+        Log in 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="
+           {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+               {{name}},{{> components/products/product-aria-label}}
+           {{else}}
+               {{name}}
+           {{/or}}"
            {{#if settings.data_tag_enabled}}
            data-event-type="product-click"
            {{/if}}
@@ -53,7 +67,12 @@
                 {{/if}}
                 <h4 class="listItem-title">
                     <a href="{{url}}"
-                    aria-label="{{name}},{{> components/products/product-aria-label}}"
+                    aria-label="
+                    {{#or customer (if theme_settings.restrict_to_login '===' false)}}
+                        {{name}},{{> components/products/product-aria-label}}
+                    {{else}}
+                        {{name}}
+                    {{/or}}"
                     {{#if settings.data_tag_enabled}}
                     data-event-type="product-click"
                     {{/if}}

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}}
+    Log in for pricing
+{{/or}}"
+data-product-variant="single-product-option"{{/if}}>
 {{#each product.reviews.messages}}
         {{#if error}}
             {{> components/common/alert/alert-error error}}