change depandeciy of slider component, hide attribute with option

This commit is contained in:
rahul shukla 2020-02-19 15:03:57 +05:30
parent bfd55c345f
commit b6cdcad01d
8 changed files with 77 additions and 8 deletions

View File

@ -25,6 +25,6 @@
"ez-plus": "^1.2.1",
"vee-validate": "^2.2.15",
"vue-flatpickr": "^2.3.0",
"vue-slider-component": "^2.7.5"
"vue-slider-component": "^3.1.0"
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,3 +39,9 @@
*
* Date: 2019-05-01T21:04Z
*/
/**
* vue-class-component v7.0.1
* (c) 2015-present Evan You
* @license MIT
*/

View File

@ -1,4 +1,4 @@
{
"/js/shop.js": "/js/shop.js?id=6d8ea335fbfa47e80e72",
"/css/shop.css": "/css/shop.css?id=66ee90f14efb050a20e5"
"/js/shop.js": "/js/shop.js?id=d6e76f2c8f75d4217522",
"/css/shop.css": "/css/shop.css?id=3e715efc0eb756fd1e79"
}

View File

@ -32,6 +32,7 @@ $shadow-color: #ccc;
$shadow-color1: #cccccc;
$outline-hvr: #eaeaec;
$review-details: #5e5e5e;
$slider-color: rgb(255, 100, 114);
//shop variables ends here
//

View File

@ -2156,6 +2156,56 @@ section.product-detail {
}
}
.vue-slider {
.vue-slider-rail {
background-color: #ccc;
cursor: pointer;
}
.vue-slider-dot-handle {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $btn-background-color;
box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,.32);
}
.vue-slider-dot-tooltip-inner {
border-color: $slider-color !important;
background-color: $slider-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: $btn-background-color;
border-color: $slider-color !important;
background-color: $slider-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: $slider-color !important;
}
}
// product pages responsive css start here
@media only screen and (max-width: 720px) {
section.product-detail div.layouter .form-container {

View File

@ -30,6 +30,18 @@
} else {
$filterAttributes = $attributeRepository->getFilterAttributes();
}
foreach ($filterAttributes as $attribute) {
if ($attribute->code <> 'price') {
if (! $attribute->options->isEmpty()) {
$attributes[] = $attribute;
}
} else {
$attributes[] = $attribute;
}
}
$filterAttributes = collect($attributes);
?>
<div class="layered-filter-wrapper">
@ -99,7 +111,7 @@
:tooltip-style="sliderConfig.tooltipStyle"
:max="sliderConfig.max"
:lazy="true"
@callback="priceRangeUpdated($event)"
@change="priceRangeUpdated($event)"
></vue-slider>
</div>
@ -116,7 +128,7 @@
data: function() {
return {
attributes: @json($filterAttributes),
appliedFilters: {}
}
},
@ -187,7 +199,7 @@
created: function () {
if (!this.index)
this.active = false;
this.active = true;
if (this.appliedFilterValues && this.appliedFilterValues.length) {
this.appliedFilters = this.appliedFilterValues;