merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

category filters

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-02 12:34:08 +05:30
parent e08ca8f366
commit 2d8f95dfc9
12 changed files with 416 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/Webkul/Velocity/package.json
View File

@ -1,28 +1,29 @@
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"laravel-mix": "^2.1",
"laravel-mix-merge-manifest": "^0.1.1",
"jquery": "^3.2",
"vue": "^2.1.10",
"vue-carousel": "^0.18.0"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"font-awesome": "^4.7.0",
"material-icons": "^0.3.1",
"vee-validate": "2.0.0-rc.26",
"vue-toast-notification": "0.0.2"
}
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1.4",
"jquery": "^3.2",
"laravel-mix": "^2.1",
"laravel-mix-merge-manifest": "^0.1.1",
"vue": "^2.1.10",
"vue-carousel": "^0.18.0"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"font-awesome": "^4.7.0",
"material-icons": "^0.3.1",
"vee-validate": "2.0.0-rc.26",
"vue-slider-component": "^3.1.0",
"vue-toast-notification": "0.0.2"
}
}

59
packages/Webkul/Velocity/publishable/assets/css/velocity.css vendored
View File

@ -1991,6 +1991,10 @@
margin-top: 3px;
}
.category-container {
padding: 40px 15px !important;
}
.category-container .hero-image {
height: 100%;
max-width: 500px;
@ -2003,6 +2007,55 @@
height: 100%;
}
.vue-slider .vue-slider-rail {
background-color: #ccc;
}
.vue-slider .vue-slider-dot-handle {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #FFFFFF;
-webkit-box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
}
.vue-slider .vue-slider-dot-tooltip-inner {
border-color: #26A37C !important;
background-color: #26A37C !important;
}
.vue-slider .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: #FFFFFF;
border-color: #26A37C !important;
background-color: #26A37C !important;
}
.vue-slider .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;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.vue-slider .vue-slider-process {
background-color: #26A37C !important;
}
/* @author Shubham Mehrotra */
body {
overflow-x: hidden;
@ -2605,6 +2658,12 @@ body::after {
max-width: 1440px !important;
}
.remove-padding-margin {
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
}
.footer {
width: 100%;
background-color: #ffffff;

453
packages/Webkul/Velocity/publishable/assets/js/velocity.js vendored
View File

File diff suppressed because one or more lines are too long

4
packages/Webkul/Velocity/src/Resources/assets/js/UI/components/content-header.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="row">
<div class="main-category fs20 pt10 col-2 pl30 unselectable">
<div class="row col-12 remove-padding-margin">
<div class="main-category fs20 pt10 col-2">
<i
:class="`rango-view-list ${isEnabled == '0' ? '' : 'cursor-pointer'} align-vertical-top`"
@click="(isEnabled == '0') ? '' : toggleSidebar()">

2
packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
View File

@ -5,7 +5,7 @@
id="sidebar"
v-if="slicedCategories && slicedCategories.length > 0">
<ul type="none" class="pl15">
<ul type="none">
<li
:key="index"
class="category-content"

3
packages/Webkul/Velocity/src/Resources/assets/js/app.js vendored
View File

@ -18,10 +18,11 @@ window.Vue = Vue;
window.Carousel = VueCarousel;
// UI components
Vue.component("vue-slider", require("vue-slider-component"));
Vue.component('modal-component', require('./UI/components/modal'));
Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
Vue.component('sidebar-component', require('./UI/components/sidebar'));
Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
Vue.component('card-list-content', require('./UI/components/card-list'));
Vue.component('card-list-header', require('./UI/components/card-header'));

51
packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss vendored
View File

@ -1317,6 +1317,8 @@
}
.category-container {
padding: 40px 15px !important;
.hero-image {
height: 100%;
max-width: 500px;
@ -1329,3 +1331,52 @@
}
}
}
.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;
}
}

6
packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss vendored
View File

@ -682,3 +682,9 @@ body::after {
max-width: 1440px !important;
}
.remove-padding-margin {
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
}

2
packages/Webkul/Velocity/src/Resources/views/layouts/master.blade.php
View File

@ -80,7 +80,7 @@
></content-header>
<div class="container no-padding">
<div class="row pr0">
<div class="row col-12 remove-padding-margin">
<sidebar-component
main-sidebar=true
url="{{ url()->to('/') }}"

35
packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
View File

@ -11,28 +11,27 @@
<meta name="keywords" content="{{ $category->meta_keywords }}" />
@stop
@php
$isDisplayMode = in_array(
$category->display_mode, [
null,
'products_only',
'products_and_description'
]
);
$products = $productRepository->getAll($category->id);
@endphp
@section('content-wrapper')
<section class="cart-details row offset-1">
<section class="row col-12">
{!! view_render_event('bagisto.shop.productOrCategory.index.before', ['category' => $category]) !!}
<div class="category-container col-12">
@if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
@include ('shop::products.list.layered-navigation')
@endif
@php
$isDisplayMode = in_array(
$category->display_mode, [
null,
'products_only',
'products_and_description'
]
);
$products = $productRepository->getAll($category->id);
@endphp
@if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
@include ('shop::products.list.layered-navigation')
@endif
<div class="category-container col-10">
<div class="row">
<div class="col-6">
<h1 class="fw6 mb10">{{ $category->name }}</h1>

35
packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
View File

@ -30,7 +30,7 @@
}
@endphp
<div class="layered-filter-wrapper">
<div class="layered-filter-wrapper col-2 pt20">
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
@ -43,16 +43,19 @@
@push('scripts')
<script type="text/x-template" id="layered-navigation-template">
<div>
<div class="filter-title">
<h3 class="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
v-for='(attribute, index) in attributes'
:attribute="attribute"
:key="index"
:index="index"
@onFilterAdded="addFilters(attribute.code, $event)"
:appliedFilterValues="appliedFilters[attribute.code]">
</filter-attribute-item>
</div>
@ -61,10 +64,10 @@
</script>
<script type="text/x-template" id="filter-attribute-item-template">
<div class="filter-attributes-item" :class="[active ? 'active' : '']">
<div :class="`filter-attributes-item ${active ? 'active' : ''}`">
<div class="filter-attributes-title" @click="active = !active">
@{{ attribute.name ? attribute.name : attribute.admin_name }}
<h4 class="fw6">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h4>
<div class="pull-right">
<span class="remove-filter-link" v-if="appliedFilters.length" @click.stop="clearFilters()">
@ -92,13 +95,13 @@
<div class="price-range-wrapper" v-if="attribute.type == 'price'">
<vue-slider
ref="slider"
:lazy="true"
:max="sliderConfig.max"
v-model="sliderConfig.value"
:process-style="sliderConfig.processStyle"
:tooltip-style="sliderConfig.tooltipStyle"
:max="sliderConfig.max"
:lazy="true"
@callback="priceRangeUpdated($event)"
></vue-slider>
@callback="priceRangeUpdated($event)">
</vue-slider>
</div>
</div>
@ -162,10 +165,8 @@
data: function() {
return {
appliedFilters: [],
active: false,
appliedFilters: [],
sliderConfig: {
value: [
0,
@ -204,8 +205,8 @@
},
priceRangeUpdated: function (value) {
debugger
this.appliedFilters = value;
this.$emit('onFilterAdded', this.appliedFilters)
},