Slider on store front implemented with html content, css and transition animations left

packages/Webkul/Channel/src/Channel.php

@@ -18,4 +18,10 @@ class Channel
 
         return $channel->code;
     }
+
+    public function getCurrentChannel() {
+        //just retrieve only three columns id, name and code
+        $current_channel = collect(ChannelModel::select('id','name','code')->first());
+        return $current_channel;
+    }
 }

packages/Webkul/Core/src/Eloquent/Repository.php

@@ -1,4 +1,4 @@
-<?php 
+<?php
 
 namespace Webkul\Core\Eloquent;
 
@@ -52,7 +52,7 @@ abstract class Repository implements RepositoryInterface {
     {
         return $this->resetScope()->model->with($with)->get($columns);
     }
- 
+
     /**
      * @param int $perPage
      * @param array $columns
@@ -158,7 +158,7 @@ abstract class Repository implements RepositoryInterface {
 
         return $this->model = $model->newQuery();
     }
-    
+
     /**
      * @return $this
      */

packages/Webkul/Core/src/Repositories/SliderRepository.php

@@ -28,13 +28,13 @@ class SliderRepository extends Repository
      */
     public function create(array $data)
     {
-        $image = request()->file('image');
+        $image = request()->hasFile('image');
 
-        $image_name = trim($data['title']).'.'.$image->getClientOriginalExtension();
+        $image_name = uniqid(20).'.'.$image->getClientOriginalExtension();
 
         $destinationPath = public_path('/vendor/webkul/shop/assets/images/slider');
         $path = $image->move($destinationPath, $image_name);
-        $path= $path->getrealPath();
+        $path= 'vendor/webkul/shop/assets/images/slider/'.$image_name;
         $data['path'] = $path;
         $this->model->create($data);
     }

packages/Webkul/Shop/src/Http/Controllers/HomeController.php

@@ -5,7 +5,8 @@ namespace Webkul\Shop\Http\Controllers;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Routing\Controller;
-
+use Webkul\Core\Repositories\SliderRepository as Sliders;
+use Webkul\Channel\Channel as Channel;
 /**
  * Admin user session controller
  *
@@ -15,13 +16,22 @@ use Illuminate\Routing\Controller;
 class HomeController extends controller
 {
     protected $_config;
+    protected $sliders;
+    protected $current_channel;
 
-    public function __construct()
+    public function __construct(Sliders $s,Channel $c)
     {
         $this->_config = request('_config');
+        $this->sliders = $s;
+        $this->current_channel = $c;
 
     }
-    public function index(){
-        return view($this->_config['view']);
+    public function index() {
+
+        $current_channel = $this->current_channel->getCurrentChannel();
+
+        $all_sliders = $this->sliders->findWhere(['channel_id'=>$current_channel['id']]);
+
+        return view($this->_config['view'])->with('data',$all_sliders);
     }
 }

packages/Webkul/Shop/src/Http/Controllers/SliderController.php

@@ -45,7 +45,7 @@ class SliderController extends controller
 
     public function create() {
         $call = new Channel();
-        $channels = $call->getChannelWithLocales();
+        $channels = $call->getAllChannels();
         return view($this->_config['view'])->with('channels',[$channels]);
     }
 
@@ -54,8 +54,8 @@ class SliderController extends controller
      * sider item
      */
     public function store() {
-        // dd($request->title,$full_path->getrealPath(),$request->content,$request->channel);
         $this->slider->create(request()->all());
+        session()->flash('success', 'Slider created successfully.');
         return redirect()->back();
     }
 }

packages/Webkul/Shop/src/Resources/assets/js/components/imageSlider.vue

@@ -2,7 +2,8 @@
     <div class="slider-content">
         <ul class="slider-images">
             <li>
-                <img class="slider-item" :src="images[currentIndex]" />
+              <img class="slider-item" :src="images[currentIndex]" />
+              <div class="show-content"></div>
             </li>
             <div class="slider-control">
                 <span class="icon dark-left-icon slider-left" @click="changeIndexLeft"></span>
@@ -13,30 +14,84 @@
 </template>
 <script>
 export default {
+
+  props:{
+    slides: {
+      type: Array,
+      required: true,
+      default: () => [],
+    }
+  },
+
   data: function() {
+
     return {
       images: [
-        "vendor/webkul/shop/assets/images/banner.png",
+        // "vendor/webkul/shop/assets/images/banner.png"
       ],
-      currentIndex: 0
+      currentIndex: 0,
+      content: [],
+
     };
   },
-  mounted: function() {},
+
+  mounted(){
+    this.getProps();
+  },
+
   methods: {
+
+    getProps() {
+      this.setProps();
+    },
+
+    setProps() {
+      for(var i=0;i<this.slides.length;i++) {
+        this.images.push(this.slides[i].path);
+        this.content.push(this.slides[i].content);
+      }
+      if($('.show-content').html(this.content[0]))
+        console.log('content pushed');
+      else
+        console.log('cannot push');
+    },
+
     changeIndexLeft: function() {
       if (this.currentIndex > 0) {
         this.currentIndex--;
+        if($('.show-content').html(this.content[this.currentIndex]))
+          console.log('content pushed');
+        else
+          console.log('cannot push');
       }
+
+      else if(this.currentIndex == 0) {
+        this.currentIndex = this.images.length-1;
+        if($('.show-content').html(this.content[this.currentIndex]))
+          console.log('content pushed');
+        else
+          console.log('cannot push');
+      }
+
     },
     changeIndexRight: function() {
-      if (this.currentIndex < 3) {
+      if(this.currentIndex < this.images.length-1) {
         this.currentIndex++;
-        console.log(this.currentIndex);
-      } else if (this.currentIndex == 3) {
-        this.currentIndex = 0;
-        console.log(this.currentIndex);
+        if($('.show-content').html(this.content[this.currentIndex]))
+          console.log('content pushed');
+        else
+          console.log('cannot push');
       }
+
+      else if(this.currentIndex == this.images.length-1) {
+        this.currentIndex = 0;
+        if($('.show-content').html(this.content[this.currentIndex]))
+          console.log('content pushed');
+        else
+          console.log('cannot push');
+      }
+
     }
   }
 };
-</script>
+</script>

packages/Webkul/Shop/src/Resources/assets/sass/app.scss

@@ -315,6 +315,7 @@ body {
         ul.slider-images {
             li img {
                 width: 100%;
+                height: 500px;
                 object-fit: fill;
             }
             .slider-control {

packages/Webkul/Shop/src/Resources/views/store/slider/slider.blade.php

@@ -1,3 +1,3 @@
 <section class="slider-block">
-    <image-slider></image-slider>
+    <image-slider :slides='@json($data)'> </image-slider>
 </section>