@devansh-webkul Now I got the attribues in expected order.But in view page.The order is different.How to fix it.
<script>
Vue.component('layered-navigation', {
template: '#layered-navigation-template',
data: function() {
return {
attributes: @json($filterAttributes),
appliedFilters: {}
}
},
created: function () {
var urlParams = new URLSearchParams(window.location.search);
var this_this = this;
urlParams.forEach(function (value, index) {
this_this.appliedFilters[index] = value.split(',');
});
},
methods: {
addFilters: function (attributeCode, filters) {
if (filters.length) {
this.appliedFilters[attributeCode] = filters;
} else {
delete this.appliedFilters[attributeCode];
}
this.applyFilter()
},
applyFilter: function () {
var params = [];
for(key in this.appliedFilters) {
if (key != 'page') {
params.push(key + '=' + this.appliedFilters[key].join(','))
}
}
window.location.href = "?" + params.join('&');
}
}
});
Vue.component('filter-attribute-item', {
template: '#filter-attribute-item-template',
props: ['index', 'attribute', 'appliedFilterValues'],
data: function() {
let maxPrice = @json($maxPrice);
maxPrice = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;
return {
appliedFilters: [],
active: false,
sliderConfig: {
value: [
0,
0
],
max: maxPrice,
processStyle: {
"backgroundColor": "#FF6472"
},
tooltipStyle: {
"backgroundColor": "#FF6472",
"borderColor": "#FF6472"
}
}
}
},
created: function () {
if (!this.index)
this.active = true;
if (this.appliedFilterValues && this.appliedFilterValues.length) {
this.appliedFilters = this.appliedFilterValues;
if (this.attribute.type == 'price') {
this.sliderConfig.value = this.appliedFilterValues;
}
this.active = true;
}
},
methods: {
addFilter: function (e) {
this.$emit('onFilterAdded', this.appliedFilters)
},
priceRangeUpdated: function (value) {
this.appliedFilters = value;
this.$emit('onFilterAdded', this.appliedFilters)
},
clearFilters: function () {
if (this.attribute.type == 'price') {
this.sliderConfig.value = [0, 0];
}
this.appliedFilters = [];
this.$emit('onFilterAdded', this.appliedFilters)
}
}
});
</script>
I want to change this code.
