From a4245eabd15d6ec71e2a66a027dc8f4d6023579e Mon Sep 17 00:00:00 2001
From: yurytut1993 <66325265+yurytut1993@users.noreply.github.com>
Date: Fri, 2 Oct 2020 15:18:48 +0300
Subject: [PATCH] BCTHEME-229 Product carousel with related products - arrows
 not working (#1828)

Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
---
 CHANGELOG.md                                | 1 +
 assets/js/theme/common/carousel.js          | 8 ++++----
 templates/components/products/carousel.html | 8 ++++----
 templates/components/products/tabs.html     | 6 +++---
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e969eaa6bf..b7cb68b09a 100644
--- 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
index e8a730b252..e5d33bdd4b 100644
--- 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
index de3b2f2236..d0228638df 100644
--- 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,7 +27,7 @@
         ]
     }'>
     {{#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">
@@ -35,6 +35,6 @@
     </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
index c85f0996a3..e3a23c9c85 100644
--- 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}}