first commit

templates/shop-product/products-box.php

@@ -0,0 +1,68 @@
+<? $hash = md5( time() . rand( 0, 9999999999 ) );?>
+<div class="products-box-<?= $hash;?>">
+  <div class="swiper">
+    <div class="swiper-wrapper">
+      <?
+        foreach ( $this -> products as $product ):
+          if ( $product -> status ):
+            echo \Tpl::view( 'shop-product/product-mini', [
+                'product' => $product,
+                'class'   => 'item',
+                'product_mini_class' => 'swiper-slide'
+            ] );
+          endif;
+        endforeach;
+      ?>
+    </div>
+  </div>
+  <div class="swiper-button-next products-box-<?= $hash;?>-next"></div>
+  <div class="swiper-button-prev products-box-<?= $hash;?>-prev"></div>
+</div>
+<script class="footer" type="text/javascript">
+  $( function()
+  {
+    if( $( ".products-box-<?= $hash;?> .swiper").length ) {
+      const swiper<?= $hash;?> = new Swiper(".products-box-<?= $hash;?> .swiper", {
+        slidesPerView: 6,
+        spaceBetween: 30,
+        initialSlide : 1,
+        centeredSlides: true,
+        lazy: true,
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+        },
+        navigation: {
+          nextEl: ".products-box-<?= $hash;?>-next",
+          prevEl: ".products-box-<?= $hash;?>-prev",
+        },
+
+        breakpoints: {
+          1400: {
+            slidesPerView: 6,
+          },
+          1200: {
+            slidesPerView: 5,
+          },
+          991: {
+            slidesPerView: 4,
+          },
+          576: {
+            slidesPerView: 3,
+          },
+          300: {
+            slidesPerView: 2,
+          },
+          200: {
+            slidesPerView: 1,
+          }
+        },
+        on: {
+          slideChange: function() {
+            observer.observe();
+          }
+        }
+      });
+    }
+  });
+</script>