store front slide and segregation of view templates

packages/Webkul/Shop/package.json

@@ -16,5 +16,9 @@
         "laravel-mix-merge-manifest": "^0.1.1",
         "jquery": "^3.2",
         "vue": "^2.1.10"
+    },
+    "dependencies": {
+        "vee-validate": "2.0.0-rc.26",
+        "vue-flatpickr": "^2.3.0"
     }
 }

packages/Webkul/Shop/src/Http/routes.php

@@ -1,12 +1,11 @@
 <?php
 
 Route::group(['middleware' => ['web']], function () {
-     Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
+    Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
-            'view' => 'shop::home.index'
+            'view' => 'shop::store.home.index'
         ]);
 });
 
 Route::group(['middleware' => ['web']], function () {
-     Route::get('/foo', 'Webkul\Shop\Http\Controllers\HomeController@index1');
+    Route::get('/foo', 'Webkul\Shop\Http\Controllers\HomeController@index1');
 });
-

packages/Webkul/Shop/src/Providers/EventServiceProvider.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Webkul\Customer\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\View;
+use Webkul\Shop\Menu;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->createStoreNavigationMenu();
+    }
+
+    /**
+     * This method fires an event for menu creation, any package can add their menu item by listening to the customer.menu.build event
+     *
+     * @return void
+     */
+
+    public function createStoreNavigationMenu()
+    {
+        Event::listen('shop.navmenu.create', function () {
+            return Menu::create(function ($menu) {
+                Event::fire('shop.navmenu.build', $menu);
+            });
+        });
+
+        Event::listen('shop.navmenu.build', function ($menu) {
+            $menu->add('customer.account.profile', 'Profile');
+            $menu->add('customer.account.profile', 'Wishlist');
+        });
+    }
+}

packages/Webkul/Shop/src/Providers/ShopServiceProvider.php

@@ -3,6 +3,11 @@
 namespace Webkul\Shop\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Routing\Router;
+use Illuminate\Support\Facades\Blade;
+
+// use Webkul\Shop\Providers\EventServiceProvider;
 
 class ShopServiceProvider extends ServiceProvider
 {
@@ -21,6 +26,13 @@ class ShopServiceProvider extends ServiceProvider
 
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'shop');
 
+        // $this->composeView();
+
+        Blade::directive('continue', function () {
+            return "<?php continue; ?>";
+        });
+
+        // $this->app->register(EventServiceProvider::class);
     }
 
     /**

packages/Webkul/Shop/src/Resources/assets/images/arrow-left-dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-left-dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="arrow-left-dark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow" transform="translate(24.000000, 24.500000) scale(-1, 1) translate(-24.000000, -24.500000) translate(12.000000, 14.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M23.249,11.786 L15.433,19.6 C15.0757568,19.9908753 14.5327035,20.1539647 14.0192179,20.0245859 C13.5057324,19.8952072 13.1047928,19.4942676 12.9754141,18.9807821 C12.8460353,18.4672965 13.0091247,17.9242432 13.4,17.567 L18.965,12 L1.5,12 C0.6715729,12 6.32202717e-08,11.3284271 6.32202717e-08,10.5 C6.32202717e-08,9.6715729 0.6715729,9.00000003 1.5,9 L18.965,9 L13.4,3.433 C13.0091247,3.07575678 12.8460353,2.53270346 12.9754141,2.01921793 C13.1047928,1.5057324 13.5057324,1.10479285 14.0192179,0.975414078 C14.5327035,0.846035307 15.0757568,1.00912465 15.433,1.4 L23.249,9.215 C23.9381714,9.93951416 24.0376587,10.793396 23.249,11.786 Z"></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Shop/src/Resources/assets/images/arrow-right-light.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-right-light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="arrow-right-light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow" transform="translate(12.000000, 14.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M23.249,11.786 L15.433,19.6 C15.0757568,19.9908753 14.5327035,20.1539647 14.0192179,20.0245859 C13.5057324,19.8952072 13.1047928,19.4942676 12.9754141,18.9807821 C12.8460353,18.4672965 13.0091247,17.9242432 13.4,17.567 L18.965,12 L1.5,12 C0.6715729,12 6.32202717e-08,11.3284271 6.32202717e-08,10.5 C6.32202717e-08,9.6715729 0.6715729,9.00000003 1.5,9 L18.965,9 L13.4,3.433 C13.0091247,3.07575678 12.8460353,2.53270346 12.9754141,2.01921793 C13.1047928,1.5057324 13.5057324,1.10479285 14.0192179,0.975414078 C14.5327035,0.846035307 15.0757568,1.00912465 15.433,1.4 L23.249,9.215 C23.9381714,9.93951416 24.0376587,10.793396 23.249,11.786 Z"></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Shop/src/Resources/assets/js/app.js

@@ -1,8 +1,8 @@
 window.jQuery = window.$ = $ = require("jquery");
 window.Vue = require("vue");
-// window.VeeValidate = require('vee-validate');
+window.VeeValidate = require("vee-validate");
 
-// Vue.use(VeeValidate);
+Vue.use(VeeValidate);
 
 //pure JS for resizing of browser purposes only
 
@@ -29,6 +29,7 @@ $(window).resize(function() {
 });
 
 $(document).ready(function() {
+    Vue.component("image-slider", require("./components/imageSlider.vue"));
     /* Responsiveness script goes here */
     var w = $(document).width();
     var window = {};

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

@@ -0,0 +1,45 @@
+<template>
+    <div class="slider-content">
+        <ul class="slider-images">
+            <li>
+                <img class="slider-item" :src="images[currentIndex]" />
+            </li>
+            <div class="slider-control">
+                <span class="icon dark-left-icon slider-left" @click="changeIndexLeft"></span>
+                <span class="icon light-right-icon slider-right" @click="changeIndexRight"></span>
+            </div>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+  data: function() {
+    return {
+      images: [
+        "vendor/webkul/shop/assets/images/banner.png",
+        "vendor/webkul/shop/assets/images/1.png",
+        "vendor/webkul/shop/assets/images/2.png",
+        "vendor/webkul/shop/assets/images/3.png"
+      ],
+      currentIndex: 0
+    };
+  },
+  mounted: function() {},
+  methods: {
+    changeIndexLeft: function() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+      }
+    },
+    changeIndexRight: function() {
+      if (this.currentIndex < 3) {
+        this.currentIndex++;
+        console.log(this.currentIndex);
+      } else if (this.currentIndex == 3) {
+        this.currentIndex = 0;
+        console.log(this.currentIndex);
+      }
+    }
+  }
+};
+</script>

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

@@ -1,6 +1,7 @@
 //shop variables
 $font-name: "Montserrat", sans-serif;
 $background-color: #f2f2f2;
+$fbackground-color: #f2f2f2;
 $list-heading-color: rgba(165, 165, 165, 1);
 $list-color: #242424;
 $subscribe-btn-color: black;

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

@@ -208,6 +208,30 @@ body {
                 width: 100%;
                 object-fit: fill;
             }
+            .slider-control {
+                display: inline-block;
+                vertical-align: middle;
+                position: absolute;
+                right: 10%;
+                margin-top: -60px;
+                margin-right: 10px;
+
+                .dark-left-icon {
+                    background-color: white;
+                    height: 48px;
+                    width: 48px;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+
+                .light-right-icon {
+                    background-color: black;
+                    height: 48px;
+                    width: 48px;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
         }
     }
 }
@@ -329,7 +353,7 @@ body {
 }
 
 .footer {
-    background-color: $background-color;
+    background-color: $fbackground-color;
     padding-left: 10%;
     padding-right: 10%;
 
@@ -1296,7 +1320,7 @@ body {
         }
     }
     .footer {
-        background-color: $background-color;
+        background-color: $fbackground-color;
         padding-left: 4%;
         padding-right: 4%;
 

packages/Webkul/Shop/src/Resources/views/customers/login/index.blade.php

@@ -1,4 +1,4 @@
-@extends('shop::layouts.master')
+@extends('shop::store.layouts.master')
 @section('content-wrapper')
     <div class="content">
         <div class="sign-up-text">

packages/Webkul/Shop/src/Resources/views/customers/profile/edit/index.blade.php

@@ -1,4 +1,4 @@
-@extends('shop::layouts.master')
+@extends('shop::store.layouts.master')
 @section('content-wrapper')
     <div class="account-content">
         @include('shop::customers.profile.partials.sidemenu')

packages/Webkul/Shop/src/Resources/views/customers/profile/home/index.blade.php

@@ -1,4 +1,4 @@
-@extends('shop::layouts.master')
+@extends('shop::store.layouts.master')
 @section('content-wrapper')
 <div class="account-content">
     @include('shop::customers.profile.partials.sidemenu')

packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php

@@ -1,4 +1,4 @@
-@extends('shop::layouts.master')
+@extends('shop::store.layouts.master')
 @section('content-wrapper')
 <div class="content">
     <div class="sign-up-text">

packages/Webkul/Shop/src/Resources/views/home/index.blade.php

@@ -1,9 +0,0 @@
-@extends('shop::layouts.master')
-@section('slider')
-    @include('shop::layouts.slider')
-@endsection
-@section('content-wrapper')
-    @include('shop::layouts.featuredproductgrid')
-    @include('shop::layouts.newproductgrid')
-    @include('shop::layouts.newsupdategrid')
-@endsection

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

@@ -1,9 +0,0 @@
-<section class="slider-block">
-    <div class="slider-content">
-        <ul class="slider-images">
-            <li>
-                <img class="slider-item" src="vendor/webkul/shop/assets/images/banner.png" />
-            </li>
-        </ul>
-    </div>
-</section>

packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php

@@ -3,7 +3,9 @@
         <div class="left-content">
             <ul class="logo-container">
                 <li>
-                    <img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
+                    <a href="">
+                        <img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
+                    </a>
                 </li>
             </ul>
             <ul class="search-container">

packages/Webkul/Shop/src/Resources/views/store/home/index.blade.php

@@ -0,0 +1,9 @@
+@extends('shop::store.layouts.master')
+@section('slider')
+    @include('shop::store.slider.slider')
+@endsection
+@section('content-wrapper')
+    @include('shop::store.grids.featured.featuredproductgrid')
+    @include('shop::store.grids.newproduct.newproductgrid')
+    @include('shop::store.grids.newsupdate.newsupdategrid')
+@endsection

packages/Webkul/Shop/src/Resources/views/store/layouts/master.blade.php

@@ -16,14 +16,14 @@
 
 <body>
     <div id="app">
-    @include('shop::layouts.header')
+    @include('shop::store.header.index')
         @yield('slider')
         <div class="main-container-wrapper">
             <div class="content-container">
                 @yield('content-wrapper')
             </div>
         </div>
-    @include('shop::layouts.footer')
+    @include('shop::store.footer.index')
     </div>
 
     <script type="text/javascript">

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

@@ -0,0 +1,17 @@
+<section class="slider-block">
+    {{-- <div class="slider-content">
+        <ul class="slider-images">
+            @for($i=0;$i<1;$i++)
+            <li data-slider-id="{{ $i }}">
+                <img class="slider-item" src="vendor/webkul/shop/assets/images/banner.png" />
+            </li>
+            @endfor
+            <div class="slider-control">
+                <span class="icon dark-left-icon slider-left"></span>
+                <span class="icon light-right-icon slider-right"></span>
+            </div>
+        </ul>
+
+    </div> --}}
+    <image-slider></image-slider>
+</section>

packages/Webkul/Ui/src/Resources/assets/sass/icons.scss

@@ -140,6 +140,18 @@
     height: 18px;
 }
 
+.dark-left-icon {
+    background-image: url("../images/arrow-left-dark.svg");
+    width: 18px;
+    height: 18px;
+}
+
+.light-right-icon {
+    background-image: url("../images/arrow-right-light.svg");
+    width: 18px;
+    height: 18px;
+}
+
 .folder-icon {
     background-image: url("../images/Folder-Icon.svg");
     width: 24px;

packages/Webkul/Ui/webpack.mix.js

@@ -14,7 +14,7 @@ mix.js(
     ],
     "js/ui.js"
 )
-    // .copy(__dirname + "/src/Resources/assets/images", publicPath + "/images")
+    .copy(__dirname + "/src/Resources/assets/images", publicPath + "/images")
     .sass(__dirname + "/src/Resources/assets/sass/app.scss", "css/ui.css")
     .options({
         processCssUrls: false

public/vendor/webkul/shop/assets/css/shop.css

@@ -277,6 +277,31 @@
      object-fit: fill;
 }
 
+.slider-block .slider-content ul.slider-images .slider-control {
+  display: inline-block;
+  vertical-align: middle;
+  position: absolute;
+  right: 10%;
+  margin-top: -60px;
+  margin-right: 10px;
+}
+
+.slider-block .slider-content ul.slider-images .slider-control .dark-left-icon {
+  background-color: white;
+  height: 48px;
+  width: 48px;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.slider-block .slider-content ul.slider-images .slider-control .light-right-icon {
+  background-color: black;
+  height: 48px;
+  width: 48px;
+  max-height: 100%;
+  max-width: 100%;
+}
+
 .main-container-wrapper {
   margin-left: 10%;
   margin-right: 10%;
@@ -416,7 +441,7 @@
 }
 
 .footer {
-  background-color: #ffffff;
+  background-color: #f2f2f2;
   padding-left: 10%;
   padding-right: 10%;
 }
@@ -1462,7 +1487,7 @@
     width: 100%;
   }
   .footer {
-    background-color: #ffffff;
+    background-color: #f2f2f2;
     padding-left: 4%;
     padding-right: 4%;
   }

public/vendor/webkul/shop/assets/images/icon-search.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-2" stroke="#242424" stroke-width="3" cx="10.5" cy="10.5" r="7"></circle>
+        <path d="M15.5,15.5 L21.5,21.5" id="Line" stroke="#242424" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/css/ui.css

@@ -141,6 +141,18 @@
   height: 18px;
 }
 
+.dark-left-icon {
+  background-image: url("../images/arrow-left-dark.svg");
+  width: 18px;
+  height: 18px;
+}
+
+.light-right-icon {
+  background-image: url("../images/arrow-right-light.svg");
+  width: 18px;
+  height: 18px;
+}
+
 .folder-icon {
   background-image: url("../images/Folder-Icon.svg");
   width: 24px;

public/vendor/webkul/ui/assets/images/arrow-left-dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-left-dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="arrow-left-dark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow" transform="translate(24.000000, 24.500000) scale(-1, 1) translate(-24.000000, -24.500000) translate(12.000000, 14.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M23.249,11.786 L15.433,19.6 C15.0757568,19.9908753 14.5327035,20.1539647 14.0192179,20.0245859 C13.5057324,19.8952072 13.1047928,19.4942676 12.9754141,18.9807821 C12.8460353,18.4672965 13.0091247,17.9242432 13.4,17.567 L18.965,12 L1.5,12 C0.6715729,12 6.32202717e-08,11.3284271 6.32202717e-08,10.5 C6.32202717e-08,9.6715729 0.6715729,9.00000003 1.5,9 L18.965,9 L13.4,3.433 C13.0091247,3.07575678 12.8460353,2.53270346 12.9754141,2.01921793 C13.1047928,1.5057324 13.5057324,1.10479285 14.0192179,0.975414078 C14.5327035,0.846035307 15.0757568,1.00912465 15.433,1.4 L23.249,9.215 C23.9381714,9.93951416 24.0376587,10.793396 23.249,11.786 Z"></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/arrow-right-light.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-right-light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="arrow-right-light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow" transform="translate(12.000000, 14.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M23.249,11.786 L15.433,19.6 C15.0757568,19.9908753 14.5327035,20.1539647 14.0192179,20.0245859 C13.5057324,19.8952072 13.1047928,19.4942676 12.9754141,18.9807821 C12.8460353,18.4672965 13.0091247,17.9242432 13.4,17.567 L18.965,12 L1.5,12 C0.6715729,12 6.32202717e-08,11.3284271 6.32202717e-08,10.5 C6.32202717e-08,9.6715729 0.6715729,9.00000003 1.5,9 L18.965,9 L13.4,3.433 C13.0091247,3.07575678 12.8460353,2.53270346 12.9754141,2.01921793 C13.1047928,1.5057324 13.5057324,1.10479285 14.0192179,0.975414078 C14.5327035,0.846035307 15.0757568,1.00912465 15.433,1.4 L23.249,9.215 C23.9381714,9.93951416 24.0376587,10.793396 23.249,11.786 Z"></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/icon-search-dark.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-2" stroke="#242424" stroke-width="3" cx="10.5" cy="10.5" r="7"></circle>
+        <path d="M15.5,15.5 L21.5,21.5" id="Line" stroke="#242424" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>