From d43f9f402e1a925263a411127eb6205272f83889 Mon Sep 17 00:00:00 2001
From: prateek srivastava <prateek.srivastava781@webkul.com>
Date: Thu, 2 Jan 2020 18:53:03 +0530
Subject: [PATCH] implemented layered navigation on category page

---
 .../Resources/assets/sass/components/app.scss | 248 +++++++++++++++++-
 .../assets/sass/components/shared.scss        |   3 +
 .../list/layered-navigation.blade.php         |  41 +--
 3 files changed, 271 insertions(+), 21 deletions(-)

diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index 7fe8c90de..fce8a095d 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -1069,13 +1069,13 @@
 }
 
 .method-sticker {
-    background-color: #0e0e0e;
+    font-size: 13px;
+    color: #919192;
     padding: 4px 8px;
     text-align: center;
     border-radius: 1px;
     display: inline-block;
-    color: #919192;
-    font-size: 13px;
+    background-color: $grey-clr;
 }
 
 #sidebar {
@@ -1321,6 +1321,8 @@
 }
 
 .category-container {
+    padding: 40px 15px !important;
+
     .hero-image {
         height: 100%;
         max-width: 500px;
@@ -1332,4 +1334,242 @@
             height: 100%;
         }
     }
-}
\ No newline at end of file
+}
+
+.vue-slider {
+    .vue-slider-rail {
+        background-color: #ccc;
+    }
+
+    .vue-slider-dot-handle {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: $light-color;
+        box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.32);
+    }
+
+    .vue-slider-dot-tooltip-inner {
+        border-color: $theme-color !important;
+        background-color: $theme-color !important;
+    }
+
+    .vue-slider-dot-tooltip-text {
+        display: block;
+        font-size: 14px;
+        min-width: 20px;
+        padding: 2px 5px;
+        text-align: center;
+        border-radius: 5px;
+        white-space: nowrap;
+        color: $light-color;
+        border-color: $theme-color !important;
+        background-color: $theme-color !important;
+    }
+
+    .vue-slider-dot-tooltip-text::before {
+        content: "";
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border: 6px solid transparent\0;
+        border-top-color: inherit;
+        transform: translate(-50%);
+    }
+
+    .vue-slider-process {
+        background-color: $theme-color !important;
+    }
+}
+
+//category page
+// .main {
+//     .category-container {
+//         display: flex;
+//         flex-direction: row;
+//         width: 100%;
+
+//         .layered-filter-wrapper {
+//             width: 25%;
+//             float: left;
+//             padding-right: 20px;
+//             min-height: 1px;
+
+//             .filter-title {
+//                 border-bottom: 1px solid #C7C7C7;
+//                 color: #242424;
+//                 padding: 10px 0;
+//             }
+
+//             .filter-attributes {
+//                 .filter-attributes-item {
+//                     border-bottom: 1px solid #C7C7C7;
+//                     padding-bottom: 10px;
+
+//                     .filter-attributes-title {
+//                         padding: 10px 40px 0 10px;
+//                         color: #5E5E5E;
+//                         cursor: pointer;
+//                         position: relative;
+
+//                         .remove-filter-link {
+//                             font-weight: 400;
+//                             color: #0031F0;
+//                             margin-right: 10px;
+//                         }
+
+//                         .icon {
+//                             background-image: url('../images/icon-dropdown.svg') !important;
+//                             width: 10px;
+//                             height: 10px;
+//                             position: absolute;
+//                             right: 15px;
+//                             top: 14px;
+//                         }
+//                     }
+
+//                     .filter-attributes-content {
+//                         padding: 10px;
+//                         display: none;
+
+//                         ol.items {
+//                             padding: 0;
+//                             margin: 0;
+//                             list-style: none none;
+
+//                             li.item {
+//                                 padding: 8px 0;
+//                                 color: #5E5E5E;
+
+//                                 .checkbox {
+//                                     margin: 0;
+//                                 }
+
+//                                 .color-swatch {
+//                                     display: inline-block;
+//                                     margin-right: 5px;
+//                                     min-width: 20px;
+//                                     height: 20px;
+//                                     border: 1px solid #c7c7c7;
+//                                     border-radius: 3px;
+//                                     float: right;
+//                                 }
+//                             }
+//                         }
+
+//                         .price-range-wrapper {
+//                             margin-top: 21px;
+//                         }
+//                     }
+
+//                     &.active {
+//                         .filter-attributes-content {
+//                             display: block;
+//                         }
+
+//                         .filter-attributes-title .icon {
+//                             background-image: url('../images//arrow-up.svg') !important;
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+
+//         .responsive-layred-filter {
+//             display: none;
+//             @extend .layered-filter-wrapper;
+//             width: 100%;
+//             float: none;
+//             padding-right: 0px;
+//             margin-top: -25px !important;
+//         }
+
+//         .category-block {
+//             width: 80%;
+//             display: block;
+
+//             .hero-image {
+//                 display: inline-block;
+//                 visibility: visible;
+//                 width: 100%;
+
+//                 img {
+//                     max-height: 400px;
+//                     max-width: 100%;
+//                 }
+//             }
+//         }
+//     }
+
+//     .top-toolbar {
+//         width: 100%;
+//         display: inline-block;
+
+//         .page-info {
+//             float: left;
+//             color: #242424;
+//             line-height: 45px;
+
+//             span {
+//                 display: none;
+
+//                 &:first-child {
+//                     display: inline;
+//                 }
+//             }
+//         }
+
+//         .pager {
+//             float: right;
+
+//             label {
+//                 margin-right: 5px;
+//             }
+
+//             select {
+//                 background: #F2F2F2;
+//                 border: 1px solid #C7C7C7;
+//                 border-radius: 3px;
+//                 color: #242424;
+//                 padding: 10px;
+//             }
+
+//             .view-mode {
+//                 display: inline-block;
+//                 margin-right: 20px;
+
+//                 a, span {
+//                     display: inline-block;
+//                     vertical-align: middle;
+
+//                     &.grid-view {
+//                         margin-right: 10px;
+//                     }
+//                 }
+
+//                 .sort-filter {
+//                     display: none;
+//                 }
+//             }
+
+//             .sorter {
+//                 display: inline-block;
+//                 margin-right: 10px;
+//             }
+
+//             .limiter {
+//                 display: inline-block;
+//             }
+//         }
+//     }
+
+//     .bottom-toolbar {
+//         display: block;
+//         margin-top: 40px;
+//         margin-bottom: 40px;
+//         text-align: center;
+//     }
+// }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
index 58d37bc00..9e64dd00e 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -65,6 +65,9 @@
 .pt20 {
     padding-top: 20px !important;
 }
+.pt42 {
+    padding-top: 42px !important;
+}
 .pl0 {
     padding-left: 0px !important;
 }
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
index ce8d392cc..305f449a9 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
@@ -1,8 +1,10 @@
-@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
 @inject ('attributeRepository', 'Webkul\Attribute\Repositories\AttributeRepository')
+
 @inject ('productFlatRepository', 'Webkul\Product\Repositories\ProductFlatRepository')
 
-@php
+@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
+
+<?php
     $filterAttributes = [];
 
     if (isset($category)) {
@@ -28,9 +30,9 @@
     } else {
         $filterAttributes = $attributeRepository->getFilterAttributes();
     }
-@endphp
+?>
 
-<div class="layered-filter-wrapper">
+<div class="layered-filter-wrapper col-2 pt42">
 
     {!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
 
@@ -44,14 +46,12 @@
     <script type="text/x-template" id="layered-navigation-template">
         <div>
 
-            <div class="filter-title">
+            <h3 class="filter-title fw6 mb20">
                 {{ __('shop::app.products.layered-nav-title') }}
-            </div>
+            </h3>
 
             <div class="filter-content">
-
                 <div class="filter-attributes">
-
                     <filter-attribute-item v-for='(attribute, index) in attributes' :attribute="attribute" :key="index" :index="index" @onFilterAdded="addFilters(attribute.code, $event)" :appliedFilterValues="appliedFilters[attribute.code]">
                     </filter-attribute-item>
 
@@ -61,10 +61,10 @@
     </script>
 
     <script type="text/x-template" id="filter-attribute-item-template">
-        <div class="filter-attributes-item" :class="[active ? 'active' : '']">
+        <div class="pb15" :class="`filter-attributes-item ${active ? 'active' : ''}`">
 
             <div class="filter-attributes-title" @click="active = !active">
-                @{{ attribute.name ? attribute.name : attribute.admin_name }}
+                <h4 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h4>
 
                 <div class="pull-right">
                     <span class="remove-filter-link" v-if="appliedFilters.length" @click.stop="clearFilters()">
@@ -77,17 +77,16 @@
 
             <div class="filter-attributes-content">
 
-                <ol class="items" v-if="attribute.type != 'price'">
+                <ul type="none" class="items ml15" v-if="attribute.type != 'price'">
                     <li class="item" v-for='(option, index) in attribute.options'>
 
                         <span class="checkbox">
                             <input type="checkbox" :id="option.id" v-bind:value="option.id" v-model="appliedFilters" @change="addFilter($event)"/>
-                            <label class="checkbox-view" :for="option.id"></label>
                             @{{ option.label ? option.label : option.admin_name }}
                         </span>
 
                     </li>
-                </ol>
+                </ul>
 
                 <div class="price-range-wrapper" v-if="attribute.type == 'price'">
                     <vue-slider
@@ -97,7 +96,7 @@
                         :tooltip-style="sliderConfig.tooltipStyle"
                         :max="sliderConfig.max"
                         :lazy="true"
-                        @callback="priceRangeUpdated($event)"
+                        @change="priceRangeUpdated($event)"
                     ></vue-slider>
                 </div>
 
@@ -131,6 +130,8 @@
 
             methods: {
                 addFilters: function (attributeCode, filters) {
+                    debugger
+                    console.log(attributeCode, filters);
                     if (filters.length) {
                         this.appliedFilters[attributeCode] = filters;
                     } else {
@@ -158,7 +159,12 @@
 
             template: '#filter-attribute-item-template',
 
-            props: ['index', 'attribute', 'appliedFilterValues'],
+            props: [
+                'index',
+                'attribute',
+                'addFilters',
+                'appliedFilterValues',
+            ],
 
             data: function() {
                 return {
@@ -189,7 +195,6 @@
 
                 if (this.appliedFilterValues && this.appliedFilterValues.length) {
                     this.appliedFilters = this.appliedFilterValues;
-
                     if (this.attribute.type == 'price') {
                         this.sliderConfig.value = this.appliedFilterValues;
                     }
@@ -200,10 +205,12 @@
 
             methods: {
                 addFilter: function (e) {
+
                     this.$emit('onFilterAdded', this.appliedFilters)
                 },
 
                 priceRangeUpdated: function (value) {
+                    console.log(value);
                     this.appliedFilters = value;
 
                     this.$emit('onFilterAdded', this.appliedFilters)
@@ -223,4 +230,4 @@
         });
 
     </script>
-@endpush
+@endpush
\ No newline at end of file