- Екстерʼєр
- Посилені з/ч
- Оптика
- Інтерʼєр
- Аксесуари
- Електроніка
- Туризм
- Запчастини для квадроциклів
Підбір товарів...
array:15 [ // packages/Webkul/Product/src/Repositories/ElasticSearchRepository.php:85 0 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27079" "_score" => null "sort" => array:1 [ 0 => 200.0 ] ] 1 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27310" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 2 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27315" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 3 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27331" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 4 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27332" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 5 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "27335" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 6 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "26786" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 7 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "26789" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 8 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "26790" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 9 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "26798" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 10 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "46441" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 11 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "46442" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 12 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "46446" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 13 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "46447" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] 14 => array:5 [ "_index" => "vn_products_default_ua_index" "_type" => "_doc" "_id" => "46451" "_score" => null "sort" => array:1 [ 0 => 100.0 ] ] ]1482', randomNum: 0, loading: true, defaultCarUrl: "" // appliedFilters: {} } }, created() { var urlParams = new URLSearchParams(window.location.search); var entries = urlParams.entries();//console.log('Filters attributes', this.attributes); for (pair of entries) { this.appliedFilters[pair[0]] = pair[1].split(','); } }, mounted() { this.loadAttributes(); // this.loadProductsTotalNum(); }, methods: { loadAttributes() { axios.get("https://vnedorognik.ua/category-api/18/load-attributes") .then((response) => { this.attributes = response.data.data; this.loading = false; // console.log('loadAttributes', response.data.data); }) .catch(function (error) { console.log(error); }); }, addFilters(attributeCode, filters) { this.randomNum = Math.random(); if (filters.length) { this.appliedFilters[attributeCode] = filters; } else { delete this.appliedFilters[attributeCode]; /* // comment 2 lines of code below to disable new functionality if ((attributeCode == 'brand') && (Object.keys(this.appliedFilters).length === 0)) { // console.log('We here!'); window.location.href = 'https://vnedorognik.ua/categories/add-brand/0'; return; } else if ((this.dirtyUrl.length > 0) && (Object.keys(this.appliedFilters).length > 0)) { for (ka in this.attributes) { if (this.attributes[ka].code == attributeCode) { if (this.attributes[ka].is_landing && this.attributes[ka].landing_url) { // && (Object.keys(this.appliedFilters).length === 0) for (kao in this.attributes[ka].options) { if (this.attributes[ka].options[kao].id == this.activeUrlOptionId) { var params = []; for (key in this.appliedFilters) { if (key == 'page') continue; params.push(key + '=' + this.appliedFilters[key].join(',')) } window.location.href = 'https://vnedorognik.ua/amortizatory?' + params.join('&'); return; } } } } } } else if (Object.keys(this.appliedFilters).length === 0) { window.location.href = 'https://vnedorognik.ua/amortizatory'; return; }*/ } this.updateProductsList(); // this.applyFilter(attributeCode) }, applyFilter(attributeCode) { var params = []; for (key in this.appliedFilters) { if (key == 'page') continue; params.push(key + '=' + this.appliedFilters[key].join(',')) } // console.log('ln aF', this.appliedFilters, params); return; //window.location.href = "?" + params.join('&'); //alert('apply filter'); //console.log(this.appliedFilters); // comment expression below to disable new functionality /*if ((attributeCode == 'brand')) { // && this.dirtyUrl.length == 0 window.location.href = 'https://vnedorognik.ua/categories/add-brand/' + this.appliedFilters[attributeCode].join(',') + '?' + params.join('&'); return; } if (this.dirtyUrl.length == 0) { // landing attribute processing var attributeUrl = ''; var optionUrl = ''; for (ka in this.attributes) { if (this.attributes[ka].code == attributeCode) { if (this.attributes[ka].is_landing && this.attributes[ka].landing_url) { attributeUrl = this.attributes[ka].landing_url; //console.log(this.appliedFilters); for (kao in this.attributes[ka].options) { if (this.attributes[ka].options[kao].id == this.appliedFilters[attributeCode][0]) { if (this.attributes[ka].options[kao].url) { optionUrl = this.attributes[ka].options[kao].url; } } } } } } if (attributeUrl.length && optionUrl.length) { window.location.href = 'https://vnedorognik.ua/amortizatory/' + attributeUrl + '/' + optionUrl; // + '?' + params.join('&'); return; } } loadMoreProducts(true, params.join('&'));*/ }, getProductsTotalNum() { this.productsTotalNum = countProductsTotalNum(this.getFiltersUrl()); // console.log('ln getProductsTotalNum', this.getFiltersUrl(), this.productsTotalNum); }, hideAllFiltersPopups() { // console.log('hideAllFiltersPopups'); // this.$refs.filterItem.hidePopup(); this.$refs.filterItem.forEach(function (element, index) { element.hidePopup(); }); }, updateProductsList() { let targetUrl = this.getFiltersUrl(); if (targetUrl.length) { window.location.href = 'https://vnedorognik.ua/amortizatory' + '/' + targetUrl + this.defaultCarUrl; } else { window.location.href = 'https://vnedorognik.ua/amortizatory' + this.defaultCarUrl; // console.log('targetUrl: /' + targetUrl); } }, getFiltersUrl() { let targetUrl = []; let priceCode = 'price'; // console.log('ln getFiltersUrl', this.appliedFilters); for (let attributeCode in this.appliedFilters) { let attributeUrl = this.getAttributeUrl(attributeCode); // console.log('ln getFiltersUrl', attributeUrl); let optionsUrls = []; if (attributeCode !== priceCode) { for (let attributeOptionKey in this.appliedFilters[attributeCode]) { optionsUrls.push(this.getOptionUrl(attributeCode, this.appliedFilters[attributeCode][attributeOptionKey])); } } else { optionsUrls = this.appliedFilters[attributeCode]; } if (optionsUrls.length) { if (attributeUrl.length) { targetUrl.push(attributeUrl + '-' + optionsUrls.join('-or-')); } } } if (targetUrl.length) { return targetUrl.join('/'); } return ''; }, getAttributeUrl(attributeCode) { // console.log('getAttributeUrl', attributeCode, this.attributes); for (ka in this.attributes) { if ( (this.attributes[ka].code === attributeCode) && (this.attributes[ka].landing_url && this.attributes[ka].landing_url.length) ) { return this.attributes[ka].landing_url; } } return ''; }, getOptionUrl(attributeCode, attributeOptionId) { for (let ka in this.attributes) { if ( (this.attributes[ka].code === attributeCode) && (this.attributes[ka].options && (this.attributes[ka].options.length || Object.keys(this.attributes[ka].options).length) ) ) { for (let kao in this.attributes[ka].options) { if ( (this.attributes[ka].options[kao].id === attributeOptionId) && (this.attributes[ka].options[kao].url && this.attributes[ka].options[kao].url.length) ) { return this.attributes[ka].options[kao].url; } } } } return ''; }, removeFilterOption(data) { if ((data.attributeCode && data.attributeCode.length) && data.optionId) { for (let afk in this.appliedFilters) { if (afk === data.attributeCode) { if (data.optionId !== 'price') { let idx = this.appliedFilters[afk].indexOf(data.optionId); if (idx > -1) { this.appliedFilters[afk].splice(idx, 1); if (!this.appliedFilters[afk].length) { delete this.appliedFilters[afk]; } } } else { // remove price filter delete this.appliedFilters[data.attributeCode]; } this.getProductsTotalNum(); this.randomNum = Math.random(); } } } if (!Object.keys(this.appliedFilters).length) { window.location.href = 'https://vnedorognik.ua/amortizatory' + this.defaultCarUrl; } // console.log('ln removeFilterOption', Object.keys(this.appliedFilters).length, this.appliedFilters); }, removeAllFilters() { // this.appliedFilters = {}; // this.randomNum = Math.random(); // console.log('ln removeAllFilters', Object.keys(this.appliedFilters).length); window.location.href = 'https://vnedorognik.ua/amortizatory' + this.defaultCarUrl; } }, watch: { attributes(newVal, oldVal) { this.attributes = newVal;//console.log('attributes was changed!'); } } }); Vue.component('filter-attribute-item', { template: '#filter-attribute-item-template', props: ['index', 'attribute', 'appliedFilterValues', 'productsTotalNum'], data: () => ({ appliedFilters: [], active: false, minprice: 0, maxprice: 122058, reserveMinPrice: 0, reserveMaxPrice: 122058, showAll: false, popupHideClass: 'filter-popup-hide', popupShowClass: 'filter-popup-show', popupClass: '', productsNum: 0, popupItemHeight: 29, // popupTopDefault: 10, popupTopDefault: 0, popupTop: '', displayFilters: 1, selectedBrandsIds: [] // sliderConfig: { // value: [ // 0, // 0 // ], // max: 500, // processStyle: { // "backgroundColor": "#FF6472" // }, // tooltipStyle: { // "backgroundColor": "#FF6472", // "borderColor": "#FF6472" // } // } }), created() { 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; } this.popupClass = this.popupHideClass; this.productsNum = this.productsTotalNum;//console.log(this.attribute.options); }, mounted() { if (this.$refs.filterOptions && (this.$refs.filterOptions.length > 5)) { this.$refs.filterOptions.forEach(function (element, index) { if (index > 4) { $('#' + element.id).css('display', 'none'); } }); $('#show_hide_' + this.attribute.id).text('показати ще').show(); } // if (this.attribute.type === 'price') { // this.$set(this.$data, 'minPrice', this.$refs.minprice.value); // this.$set(this.$data, 'maxPrice', this.$refs.maxprice.value); // } // // if (this.attribute.type === 'price') { // this.$watch( // () => { // return this.$refs.minprice.value; // }, // (val) => { // console.log('minprice: ' + val); // //this.applyPrices(); // } // ); // } // // this.$watch( // () => { // return this.$refs.maxprice.value // }, // (val) => { // this.applyPrices(); // } // ); }, methods: { addFilter() { this.$emit('onFilterAdded', this.appliedFilters) }, applyWithoutPopup(optionId, attributeCode) { this.hideAllPopups(); this.$emit('onFilterAdded', this.appliedFilters) this.fillPopup(); this.$emit('updateProductsList'); }, showPopup(optionId, attributeCode) { this.hideAllPopups(); let optionIndex = this.getOptionIndex(optionId); this.popupTop = (optionIndex) ? ((this.popupItemHeight * optionIndex) - this.popupTopDefault) : '-' + this.popupTopDefault; // console.log(optionIndex, this.popupTop); this.$emit('onFilterAdded', this.appliedFilters) this.fillPopup(); this.popupClass = this.popupShowClass; }, showResults(optionId, attributeCode) { this.$emit('onFilterAdded', this.appliedFilters) }, getOptionIndex(optionId) { let optionIndex = 0; if (this.attribute.options instanceof Array) { this.attribute.options.forEach(function (element, index) { if (element.id === optionId) { optionIndex = index; } }); } else if (this.attribute.options instanceof Object){ optionIndex = Object.values(this.attribute.options).map(function(o) { return o.id; }).indexOf(optionId); } return optionIndex; }, hidePopup() { this.popupClass = this.popupHideClass; }, hideAllPopups() { this.$emit('hideAllFiltersPopups'); }, fillPopup() { //console.log(this.appliedFilters); this.$emit('getProductsTotalNum'); }, showProducts() { this.$emit('updateProductsList'); }, priceRangeUpdated(value) { this.appliedFilters = value; this.$emit('onFilterAdded', this.appliedFilters) }, clearFilters() { if (this.attribute.type == 'price') { // this.sliderConfig.value = [0, 0]; } this.appliedFilters = []; this.$emit('onFilterAdded', this.appliedFilters) }, applyPrices() { if (this.$refs.minprice && this.$refs.maxprice) { this.appliedFilters = [this.$refs.minprice.value, this.$refs.maxprice.value]; this.$emit('onFilterAdded', this.appliedFilters) this.applyWithoutPopup(11, 'price'); this.minprice = this.$refs.minprice.value; this.maxprice = this.$refs.maxprice.value; // console.log('applyPrices min: ' + this.minprice.value + ' max: ' + this.maxprice.value); } }, showHide(id) { var showAll = this.showAll; var display = (!this.showAll) ? 'block' : 'none'; var btnText = (!this.showAll) ? 'Згорнути фільтри' : 'показати ще'; var actionSpeed = 300; this.hideAllPopups(); this.$refs.filterOptions.forEach(function (element, index) { if (index > 4) { (!showAll) ? $('#' + element.id).show(actionSpeed) : $('#' + element.id).hide(actionSpeed); } }); $('#' + id).text(btnText); this.showAll = (!this.showAll) ? true : false; }, brandLink(id, e) { e.preventDefault(); var brands = this.selectedBrandsIds; if (!this.selectedBrandsIds.includes(id)) { brands.push(id); } else { var idx = brands.indexOf(id); if (idx > -1) { brands.splice(idx, 1); } } this.$emit('onFilterAdded', brands); }, checkPrices() { if ((this.attribute.code === 'price') && (this.appliedFilters === undefined)) { this.minprice = this.reserveMinPrice; this.maxprice = this.reserveMaxPrice; } }, toggleActiveClass(id) { $('#'+id).toggleClass('active'); $('#cb'+id).toggle(); // console.log('toggleActiveClass', $('#'+id).hasClass('active')); } }, watch: { productsTotalNum(newVal, oldVal) { this.productsNum = newVal; }, appliedFilterValues(newVal, oldVal) { // console.log('fi watch appliedFilterValues', newVal, oldVal); this.appliedFilters = (newVal !== undefined) ? newVal : []; this.checkPrices(); }, minprice: function (val) { console.log(val); }, //, // minPrice: { // handler(newVal, oldVal){ // // this.applyPrices(); // console.log('Watch minPrice: ', oldVal, newVal); // }, // deep: true // }, // maxPrice: { // handler(newVal, oldVal){ // // this.applyPrices(); // console.log('Watch maxPrice: ', oldVal, newVal); // }, // deep: true // }//, // minprice(newVal, oldVal) { // console.log('minprice changed to ' + newVal); // //this.applyPrices(); // }, // maxprice(newVal, oldVal) { // console.log('maxprice changed to ' + newVal); // //this.applyPrices(); // } } }); Vue.component('filter-attribute-item-popup', { template: '#filter-attribute-item-popup-template', props: ['popupClass', 'showText', 'productsText', 'productsNum', 'popupTop'], data() { return { } }, methods: { showProducts() { // this.$emit('onAddFilter'); this.$emit('onShowProducts'); } }, watch: { productsNum(newVal, oldVal) { }, popupClass(newVal, oldVal) { }, popupTop(newVal, oldVal) { } } }); Vue.component('filters-basket', { template: '#filters-basket-template', data() { return { filtersItems: [] } }, props: ["filters", "productsNum", "attributes", "randomNum"], mounted() { this.fillItems(); }, methods: { fillItems() { let newItems = [];//console.log('fillItems', this.filters); if ( (this.filters && (Object.keys(this.filters).length)) && (this.attributes && (Object.keys(this.attributes).length)) ) { for (let fk in this.filters) { for (let ak in this.attributes) { if ( (fk === this.attributes[ak].code) && (this.attributes[ak].type !== 'price') ) { if (this.attributes[ak].options && this.attributes[ak].options) { for (let fko in this.filters[fk]) { for (let ako in this.attributes[ak].options) { if (this.filters[fk][fko] === this.attributes[ak].options[ako].id) { let optionName = this.attributes[ak].options[ako].label ? this.attributes[ak].options[ako].label : this.attributes[ak].options[ako].admin_name; newItems.push({ id: this.attributes[ak].options[ako].id, name: optionName, attributeCode: this.attributes[ak].code, type: this.attributes[ak].type }); } } } } } else if ( (fk === this.attributes[ak].code) && (this.attributes[ak].type === 'price') ) { newItems.push({ id: 'price', name: this.filters[fk].join(' – '), attributeCode: this.attributes[ak].code, type: this.attributes[ak].type }); } } } } this.filtersItems = newItems; }, removeFilterOption(data) { this.$emit('removeFilterOption', data); }, showProducts() { this.$emit('onShowProducts'); } }, watch: { productsNum(newVal, oldVal) { }, randomNum(newVal, oldVal) { this.fillItems(); }, attributes(newVal, oldVal) { this.fillItems(); } } }); Vue.component('filters-basket-item', { template: '#filters-basket-item-template', data() { return { } }, props: ["item"], mounted() { }, methods: { removeFilterOption(attributeCode, optionId) { this.$emit('removeFilterOption', { attributeCode: attributeCode, optionId: optionId }); } } });