TH-211: Aura > Fix product & featured products sliders direction not …

…same as document direction (#85)
youcan-shop · Nov 8, 2024 · ffa71db · ffa71db
1 parent 7b0ec92
commit ffa71db
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/themes/aura/sections/featured-product-slider.liquid b/themes/aura/sections/featured-product-slider.liquid
@@ -88,6 +88,7 @@
       snap: true,
       gap: '20px',
       focus: 'center',
+      direction: '{{ settings.theme_direction }}'
     });
 
     const mobileBlocksPerPage = {{ section.settings.slider_mobile_per_page }};
@@ -105,6 +106,7 @@
       perMove: 1,
       gap: '12px',
       snap: true,
+      direction: '{{ settings.theme_direction }}'
     });
 
     mountSlider(isMobile, mobileSlider, desktopSlider);

diff --git a/themes/aura/sections/related-products.liquid b/themes/aura/sections/related-products.liquid
@@ -49,6 +49,7 @@
         snap: true,
         gap: '20px',
         focus: 'center',
+        direction: '{{ settings.theme_direction }}'
       });
 
       const mobileBlocksPerPage = 2;
@@ -66,6 +67,7 @@
         perMove: 1,
         gap: '12px',
         snap: true,
+        direction: '{{ settings.theme_direction }}'
       });
 
       mountSlider(isMobile, mobileSlider, desktopSlider);

diff --git a/themes/aura/snippets/product-slider.liquid b/themes/aura/snippets/product-slider.liquid
@@ -37,6 +37,15 @@
     }
   }
 
+  [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--next {
+    border-radius: 8px 0 0 8px;
+    left: -26rem;
+  }
+
+  [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--prev {
+    border-radius: 0 8px 8px 0;
+    right: -26rem;
+  }
 {% endstyle %}
 
 {% assign products_exist = false %}

diff --git a/themes/aura/snippets/related-products-slider.liquid b/themes/aura/snippets/related-products-slider.liquid
@@ -54,6 +54,16 @@
     width: 16px;
     fill: #000;
   }
+
+  [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--next {
+    border-radius: 8px 0 0 8px;
+    left: -26rem;
+  }
+
+  [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--prev {
+    border-radius: 0 8px 8px 0;
+    right: -26rem;
+  }
 {% endstyle %}
 <div
   class='splide yc-slider__{{ view }}'