From 5ad8645f66a3d0c7b7d4a564f6b05c334a33fd83 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:17:34 +0100 Subject: [PATCH 1/4] fix product slider direction --- themes/meraki/sections/featured-product-slider.liquid | 2 ++ themes/meraki/snippets/product-slider.liquid | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/themes/meraki/sections/featured-product-slider.liquid b/themes/meraki/sections/featured-product-slider.liquid index 4c94df11..604ece2d 100644 --- a/themes/meraki/sections/featured-product-slider.liquid +++ b/themes/meraki/sections/featured-product-slider.liquid @@ -72,6 +72,7 @@ perMove: 1, snap: true, gap: '20px', + direction: '{{ settings.theme_direction }}', }); const mobileBlocksPerPage = {{ section.settings.slider_mobile_per_page }}; @@ -88,6 +89,7 @@ perMove: 1, gap: '12px', snap: true, + direction: '{{ settings.theme_direction }}', }); mountSlider(isMobile, mobileSlider, desktopSlider); diff --git a/themes/meraki/snippets/product-slider.liquid b/themes/meraki/snippets/product-slider.liquid index e7ae6e59..d32df73b 100644 --- a/themes/meraki/snippets/product-slider.liquid +++ b/themes/meraki/snippets/product-slider.liquid @@ -27,6 +27,15 @@ fill: #000; } + [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--next { + /* border-radius: 8px 0 0 8px; */ + left: -7rem; + } + + [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--prev { + /* border-radius: 0 8px 8px 0; */ + right: -7rem; + } {% endstyle %} {% assign products_exist = false %} From 9f34e238ef216cb5fb503e25199182d42fb14d02 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:17:48 +0100 Subject: [PATCH 2/4] remove commented code --- themes/meraki/snippets/product-slider.liquid | 2 -- 1 file changed, 2 deletions(-) diff --git a/themes/meraki/snippets/product-slider.liquid b/themes/meraki/snippets/product-slider.liquid index d32df73b..d6d0c9af 100644 --- a/themes/meraki/snippets/product-slider.liquid +++ b/themes/meraki/snippets/product-slider.liquid @@ -28,12 +28,10 @@ } [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--next { - /* border-radius: 8px 0 0 8px; */ left: -7rem; } [dir=rtl] #yc_slider_{{ id }} .splide__arrows--rtl .splide__arrow--prev { - /* border-radius: 0 8px 8px 0; */ right: -7rem; } {% endstyle %} From f534b0b65adfc874d67e83cd24eb918a1caa0467 Mon Sep 17 00:00:00 2001 From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com> Date: Thu, 7 Nov 2024 12:05:41 +0100 Subject: [PATCH 3/4] fix related product slider --- themes/meraki/sections/related-products.liquid | 4 +++- themes/meraki/snippets/related-products-slider.liquid | 10 ++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/themes/meraki/sections/related-products.liquid b/themes/meraki/sections/related-products.liquid index 3d0e5f39..6bbc1511 100644 --- a/themes/meraki/sections/related-products.liquid +++ b/themes/meraki/sections/related-products.liquid @@ -31,7 +31,7 @@ (function() { const isMobile = window.matchMedia("(max-width: 768px)"); const products = {{ product.related_products.size }}; - const desktopBlocksPerPage = Math.max(products, 3); + const desktopBlocksPerPage = Math.min(products, 3); const desktopSlider = new Splide(`#yc_slider_{{ id }}.yc-slider__desktop`, { type: products < 4 ? 'slide' : '{{ section.settings.slider_transition_type }}', @@ -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/meraki/snippets/related-products-slider.liquid b/themes/meraki/snippets/related-products-slider.liquid index f5f85565..d32e6ad7 100644 --- a/themes/meraki/snippets/related-products-slider.liquid +++ b/themes/meraki/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 %}