added products slider theme part

resources/views/segments/products/ProductsSlider/ProductsSlider.blade.php

@@ -0,0 +1,15 @@
+<section class='ProductsSlider'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($part->area_name . '_' . $part->part.'_title')}}
+        </h1>
+
+        <div class="products-slider">
+            @foreach(getProductsQueryBySetting($part->area_name . '_' . $part->part.'_query') as $product)
+                <div class="slider-content">
+                    @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),compact('product'))
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>

resources/views/segments/products/ProductsSlider/ProductsSlider.js

@@ -0,0 +1,41 @@
+import {tns} from "tiny-slider/src/tiny-slider";
+
+var productSlider ;
+document.addEventListener('DOMContentLoaded',function () {
+
+    document.querySelectorAll('.products-slider')?.forEach(function (el) {
+        if (el.classList.contains('.tns-slider')){
+            console.log('ignore');
+            return 'ignore';
+        }
+        productSlider = tns({
+            container: el,
+            autoplay: true,
+            autoplayButton: false,
+            // nextButton: false,
+            controls: false,
+            autoplayHoverPause: true,
+            mouseDrag: true,
+            gutter: 0,
+            slideBy: 1,
+            autoplayTimeout: 5000,
+            responsive:{
+                420:{
+                    items: 1,
+                },
+                768:{
+                    items:2,
+                },
+                1000:{
+                    items: 3,
+                },
+                1400:{
+                    items: 4,
+                },
+
+            }
+            // speed:10000,
+        });
+    });
+
+});

resources/views/segments/products/ProductsSlider/ProductsSlider.json

@@ -0,0 +1,10 @@
+{
+    "name": "ProductsSlider",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/products/ProductsSlider/ProductsSlider.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Category;
+use App\Models\Part;
+use App\Models\Setting;
+
+class ProductsSlider
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_title';
+        $setting->value = 'Lorem ipsum dolor sit amet';
+        $setting->type = 'TEXT';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part .' title';
+        $setting->save();
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_query';
+        $setting->value = Category::first()->id.',id,DESC';
+        $setting->type = 'PRODUCT_QUERY';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part .' query';
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/products/ProductsSlider/ProductsSlider.scss

@@ -0,0 +1,51 @@
+.ProductsSlider {
+    // scss
+    position: relative;
+
+    h1{
+        font-size: 30px;
+        font-weight: 300;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+
+    background: #00000011;
+    padding: 4rem 0 2rem;
+
+    .slider-content{
+        padding: 1rem .5rem;
+        margin-bottom: 2rem;
+
+        img{
+            height: 40vh;
+            object-fit: cover;
+        }
+    }
+
+    .tns-nav{
+        position: absolute;
+        display: flex !important;
+        width: 200px;
+        left: 50%;
+        height: 50px;
+        bottom: .5rem;
+        transform: translateX(-50%);
+
+        align-items: center;
+        justify-content: space-evenly;
+        button{
+            display: inline-block;
+            margin: 3px;
+            width: 10px;
+            height: 10px;
+            border-radius: var(--xshop-border-radius);
+            background: #ffffff;
+            border: 0;
+        }
+
+        .tns-nav-active{
+
+            background: var(--xshop-primary);
+        }
+    }
+}