BCTHEME-229 Product carousel with related products - arrows not worki…

…ng (#1828) Co-authored-by: BC-tymurbiedukhin <[email protected]>
bigcommerce · Oct 2, 2020 · a4245ea · a4245ea
1 parent 0b75be3
commit a4245ea
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Product carousel with related products - arrows not working. [#1828](https://github.com/bigcommerce/cornerstone/pull/1828)
 - Fixed contrast on buttons border color in compliance with AA standard [#1817](https://github.com/bigcommerce/cornerstone/pull/1817)
 - Fixed contrast on carousel arrows input according to AA standard [#1814](https://github.com/bigcommerce/cornerstone/pull/1814)
 - Fixed contrast on product ratings according to AA standard [#1799](https://github.com/bigcommerce/cornerstone/pull/1799)

diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js
@@ -26,7 +26,7 @@ const arrowAriaLabling = ($arrowLeft, $arrowRight, currentSlide, lastSlide) => {
 
     const arrowAriaLabelBaseText = $arrowLeft.attr('aria-label');
 
-    const isInit = arrowAriaLabelBaseText.includes(['NUMBER']);
+    const isInit = arrowAriaLabelBaseText.includes('[NUMBER]');
     const valueToReplace = isInit ? '[NUMBER]' : integerRegExp;
 
     const leftGoToNumber = currentSlide === 1 ? lastSlide : currentSlide - 1;
@@ -40,10 +40,10 @@ const arrowAriaLabling = ($arrowLeft, $arrowRight, currentSlide, lastSlide) => {
 
 const onCarouselChange = (event, carousel) => {
     const { options: { prevArrow, nextArrow }, currentSlide, slideCount } = carousel;
+    const $target = $(event.target);
 
-    setSlideTabindexes($(event.target).find('.slick-slide'));
-
-    arrowAriaLabling($(prevArrow), $(nextArrow), currentSlide + 1, slideCount);
+    setSlideTabindexes($target.find('.slick-slide'));
+    arrowAriaLabling($target.find(prevArrow), $target.find(nextArrow), currentSlide + 1, slideCount);
 };
 
 export default function () {

diff --git a/templates/components/products/carousel.html b/templates/components/products/carousel.html
@@ -7,8 +7,8 @@
         "slidesToShow": 2,
         "slidesToScroll": 1,
         "slide": ".js-product-slide",
-        "prevArrow": ".js-product-prev-arrow",
-        "nextArrow": ".js-product-next-arrow",
+        "prevArrow": "{{#if customArrowClass}}.{{customArrowClass}}{{/if}}.js-product-prev-arrow",
+        "nextArrow": "{{#if customArrowClass}}.{{customArrowClass}}{{/if}}.js-product-next-arrow",
         "responsive": [
             {
                 "breakpoint": 800,
@@ -27,14 +27,14 @@
         ]
     }'>
     {{#if products.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-prev-arrow slick-prev slick-arrow"></button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="{{#if customArrowClass}}{{customArrowClass}} {{/if}}js-product-prev-arrow slick-prev slick-arrow"></button>
     {{/if}}
     {{#each products}}
     <div class="productCarousel-slide js-product-slide">
         {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
     </div>
     {{/each}}
     {{#if products.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-next-arrow slick-next slick-arrow"></button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="{{#if customArrowClass}}{{customArrowClass}} {{/if}}js-product-next-arrow slick-next slick-arrow"></button>
     {{/if}}
 </section>
diff --git a/templates/components/products/tabs.html b/templates/components/products/tabs.html
@@ -15,16 +15,16 @@
 {{#if product.related_products}}
     <div role="tabpanel" aria-hidden="false" class="tab-content has-jsContent is-active" id="tab-related">
         {{#if settings.data_tag_enabled}}
-            {{> components/products/carousel products=product.related_products columns=6 list="Related Products"}}
+            {{> components/products/carousel products=product.related_products columns=6 customArrowClass='js-related-product-arrow' list="Related Products"}}
         {{else}}
-            {{> components/products/carousel products=product.related_products columns=6}}
+            {{> components/products/carousel products=product.related_products columns=6 customArrowClass='js-related-product-arrow'}}
         {{/if}}
     </div>
 {{/if}}
 
 {{#if product.similar_by_views}}
     <div role="tabpanel" aria-hidden="{{#if product.related_products}}true{{else}}false{{/if}}" class="tab-content has-jsContent{{#unless product.related_products}} is-active{{/unless}}" id="tab-similar">
-            {{> components/products/carousel products=product.similar_by_views columns=6 list="Customers Also Viewed"}}
+            {{> components/products/carousel products=product.similar_by_views columns=6 list="Customers Also Viewed" customArrowClass='js-viewed-product-arrow' }}
 
     </div>
 {{/if}}