fix(storefront): BCTHEME-265 Return heading to product card

bigcommerce · Sep 23, 2020 · fae85eb · fae85eb
1 parent a244865
commit fae85eb
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Changelog
 
+- Return heading to product card. [#1847](https://github.com/bigcommerce/cornerstone/pull/1847)
 - Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
 
 ## Draft

diff --git a/assets/scss/components/citadel/cards/_cards.scss b/assets/scss/components/citadel/cards/_cards.scss
@@ -72,11 +72,12 @@
 .card-title {
     font-size: $card-title-fontSize;
     margin: $card-title-margin;
-
+    
     > a {
         color: $card-title-color;
         text-decoration: $card-title-textDecoration;
-
+        display: block;
+
         // scss-lint:disable NestingDepth
         &:hover {
             color: $card-title-color-hover;

diff --git a/templates/components/amp/products/card.html b/templates/components/amp/products/card.html
@@ -22,9 +22,9 @@
         {{#if brand.name}}
             <p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
         {{/if}}
-        <span class="card-title">
+        <h3 class="card-title">
             <a data-vars-product-link="{{url}}" data-vars-product-id="{{id}}" data-vars-product-name="{{name}}" href="{{url}}">{{name}}</a>
-        </span>
+        </h3>
 
         <div class="card-text" data-test-info-type="price">
             {{#or customer (if theme_settings.restrict_to_login '!==' true)}}

diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -74,9 +74,9 @@
         {{#if brand.name}}
             <p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
         {{/if}}
-        <span class="card-title">
+        <h3 class="card-title">
             <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
-        </span>
+        </h3>
 
         <div class="card-text" data-test-info-type="price">
             {{#or customer (if theme_settings.restrict_to_login '!==' true)}}

diff --git a/templates/pages/brands.html b/templates/pages/brands.html
@@ -27,9 +27,9 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
                         </a>
                     </figure>
                     <div class="card-body">
-                        <span class="card-title">
+                        <h3 class="card-title">
                             <a href="{{url}}">{{name}}</a>
-                        </span>
+                        </h3>
                     </div>
                 </article>
             </li>

diff --git a/templates/pages/compare.html b/templates/pages/compare.html
@@ -32,9 +32,9 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                             {{#if brand.name}}
                                 <p class="card-text"><a href="{{brand.url}}">{{ brand.name }}</a></p>
                             {{/if}}
-                            <span class="card-title">
+                            <h3 class="card-title">
                                 <a href="{{url}}">{{ name }}</a>
-                            </span>
+                            </h3>
                             {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
                                 {{#if price_range}}
                                     {{> components/products/price-range}}