Fix #3

magepow · Jul 3, 2021 · be03afa · be03afa
1 parent af9ab05
commit be03afa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/view/frontend/templates/product/view/gallery_mega.phtml b/view/frontend/templates/product/view/gallery_mega.phtml
@@ -36,17 +36,16 @@ if ( empty($images) ) return;
         var slider    = $('.<?php echo $selector?>');
         var sliderFor = slider.find('.slider-for');
         var sliderNav = slider.find('.slider-nav');
-        if(!$(sliderFor).hasClass('slick-initialized')) {
-             sliderFor.slick({
+        var sliderForConfig = {
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 pauseOnHover: true,
                 arrows: true,
                 fade: true,
                 asNavFor: sliderNav,
                 speed: 100
-            });
-            sliderNav.slick({
+            };
+        var sliderNavConfig = {
                 vertical: true,
                 verticalSwiping: true,
                 slidesToShow: 2,
@@ -59,7 +58,17 @@ if ( empty($images) ) return;
                 focusOnSelect: true,
                 infinite: false,
                 speed: 100
-            });
+            };
+
+        if( $('body').hasClass('rtl') ){
+            sliderFor.attr('dir', 'rtl');
+            sliderNav.attr('dir', 'rtl');
+            sliderForConfig = $.extend(sliderForConfig, { 'rtl': true});
+            sliderNavConfig = $.extend(sliderNavConfig, { 'rtl': true});
+        }
+        if(!$(sliderFor).hasClass('slick-initialized')) {
+            sliderFor.slick(sliderForConfig);
+            sliderNav.slick(sliderNavConfig);
         }
 
     });

diff --git a/view/frontend/web/js/magicproduct.js b/view/frontend/web/js/magicproduct.js
@@ -214,11 +214,19 @@ define([
                 el.each(function() {
 	                var gallery = $(this).find('.gallery-items');
 	                if(gallery.hasClass('slick-initialized')) return;
-	                var nav     = $(this).find('.slider-nav');
-	                var galleryConfig = $.extend(gallery.data(), {'asNavFor': nav});
-	                var navConfig 	  = $.extend(nav.data(), {'asNavFor': gallery});
-	                gallery.slick(galleryConfig);
-	                nav.slick(navConfig);
+	                var nav        = $(this).find('.slider-nav');
+	                var galleryCfg = gallery.data();
+	                var navCfg 	   = nav.data();
+	                var isRTL 	   = false;
+	                if( !navCfg.vertical && $('body').hasClass('rtl') ){
+	                	gallery.attr('dir', 'rtl');
+	                	nav.attr('dir', 'rtl');
+	                	isRTL 	   = true;
+	                }
+	                var galleryCfg = $.extend(galleryCfg, {'asNavFor': nav, 'rtl': isRTL});
+	                var navCfg 	   = $.extend(navCfg, {'asNavFor': gallery, 'rtl': isRTL});
+	                gallery.slick(galleryCfg);
+	                nav.slick(navCfg);
 	            }); 
             },