Vue.component('products_view', {
template: `
Sort by
Categories
Vendors
`,
props: ['url_template', 'search_query', 'site_url', 'selected_category_id', 'sort_by'],
data: function () {
return {
page: 0,
tag: '',
current_page: 0,
products: {
total_pages: 0,
categories: [],
list: []
},
categories: [],
vendors: [],
forceCategoriesIDS: null,
forceVendorsIDS: null,
is_loading: true,
checkbox: true,
firstload: true,
silentCategoriesUpdate: false,
silentVendorsUpdate: false,
silentURLUpdate: false,
categoriesRefreshCount: 0,
vendorsRefreshCount: 0,
is_list: true,
sound: true,
sort_by_model: 'relevance',
sort_by_list: [
{text: 'Relevance', value: 'relevance'},
{text: 'Alphabetically', value: 'abc'},
{text: 'Most recent', value: 'most_recent'},
{text: 'Price (lowest to highest)', value: 'price_lth'},
{text: 'price (highest to lowest)', value: 'price_htl'}
],
filters_visible: true,
filters_visible_btn: 0,
show_results: false,
load_count: 0,
search_query_computed: this.search_query,
timeout: null
}
},
watch: {
$route (to, from){
this.show = false;
// console.log("page change detected: "+to);
},
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
// console.log("before route update");
},
current_page: {
handler: function (newVal, oldVal) {
this.update_products(true);
}
},
sort_by_model: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
},
categories: {
handler: function (newVal, oldVal) {
if(this.categoriesRefreshCount > 0) {
this.current_page = 1;
this.update_products(false);
}
this.categoriesRefreshCount = this.categoriesRefreshCount+1;
},
deep: true
},
vendors: {
handler: function (newVal, oldVal) {
if(!this.silentCategoriesUpdate) {
this.current_page = 1;
this.update_products(false);
}
this.silentCategoriesUpdate = false;
},
deep: true
},
search_query_computed: {
handler: function (newVal, oldVal) {
this.timeout = null;
// Make a new timeout set to go off in 800ms
var thisThing = this;
this.timeout = setTimeout(function () {
thisThing.firstload = true;
thisThing.load_count = 0;
thisThing.current_page = 1;
thisThing.update_products(false);
}, 500);
// $("#master_search_field").val(newVal);;
},
deep: true
},
filters_visible_btn: {
handler: function (newVal, oldVal) {
this.filters_visible = !this.filters_visible;
}
}
},
methods: {
compileCategs() {
var compiled_categs = [];
var arrayLength = this.categories.length;
for (var i = 0; i < arrayLength; i++) {
var thisCateg = this.categories[i];
if (thisCateg.checked) {
compiled_categs.push(thisCateg.id);
}
//Do something
}
return compiled_categs;
},
compileVendors() {
var compiled_vendors = [];
var arrayLength = this.vendors.length;
for (var i = 0; i < arrayLength; i++) {
var thisVendor = this.vendors[i];
if (thisVendor.checked) {
compiled_vendors.push(parseInt(thisVendor.id));
}
//Do something
}
return compiled_vendors;
},
update_products(do_scroll) {
this.load_count++;
var do_update = true;
var thisCompo = this;
// let's laod the next page
var compiled_categs = thisCompo.compileCategs();
var compiled_vendors = thisCompo.compileVendors();
// if (compiled_categs.length > 0 && compiled_vendors.length > 0) {
do_update = true;
this.show_results = true;
// } else {
// do_update = false;
// this.show_results = false;
// }
if (!(this.load_count == 1 || this.load_count > 3)) {
do_update = false;
}
if (do_update || this.firstload) {
thisCompo.is_loading = true;
const params = new URLSearchParams();
params.append('sort_by', thisCompo.sort_by_model);
params.append('categories', JSON.stringify(compiled_categs));
params.append('vendors', JSON.stringify(compiled_vendors));
params.append('tag', thisCompo.tag);
if(this.selected_category_id != null) {
params.append('selected_category_id', this.selected_category_id);
}
if (this.firstload) {
params.append('request_categories_list', true);
params.append('request_vendors_list', true);
}
if (thisCompo.search_query_computed != undefined) {
params.append('search_query', thisCompo.search_query_computed);
}
axios.post(thisCompo.url_template.replace('{page_number}', thisCompo.current_page), params)
.then(function (response) {
thisCompo.products = response.data.data;
if (thisCompo.firstload) {
thisCompo.categories = response.data.data.categories;
thisCompo.vendors = response.data.data.vendors;
}
if (!thisCompo.firstload && do_scroll) {
$("#products_list").goTo();
} else {
thisCompo.firstload = false;
}
thisCompo.is_loading = false;
thisCompo.updateTheURL();
if(thisCompo.forceCategoriesIDS != null) {
var changeHappened = false;
// console.log("doing the manual checking after force was applied");
var finalCategs = [];
var arrayLength = thisCompo.categories.length;
// console.log("categs length: "+arrayLength);
for (var i = 0; i < arrayLength; i++) {
var thisCateg = thisCompo.categories[i];
// console.log("this categ: "+thisCateg);
var checked = (thisCompo.forceCategoriesIDS.indexOf(thisCateg.id) > -1);
if(checked) {
changeHappened = true;
}
thisCateg.checked = checked;
finalCategs.push(thisCateg);
}
// thisCompo.silentCategoriesUpdate = false;
thisCompo.categories = finalCategs;
thisCompo.forceCategoriesIDS = null;
if(thisCompo.forceVendorsIDS != null) {
var finalVendors = [];
var arrayLengthVendors = thisCompo.vendors.length;
for (var i2 = 0; i2 < arrayLengthVendors; i2++) {
var thisVendor = thisCompo.vendors[i2];
var checked = (thisCompo.forceVendorsIDS.indexOf(parseInt(thisVendor.id)) > -1);
if(checked) {
changeHappened = true;
}
// console.log(thisVendor.id + " - "+thisVendor.name_en+" is "+checked);
thisVendor.checked = checked;
finalVendors.push(thisVendor);
}
// thisCompo.silentCategoriesUpdate = false;
thisCompo.vendors = finalVendors;
thisCompo.forceVendorsIDS = null;
}
if(changeHappened) {
thisCompo.update_products(false);
}
}
})
.catch(function (error) {
console.log(error);
});
}
},
fetchTheURL() {
if(!this.silentURLUpdate) {
var hash = window.location.hash.substr(1);
var result = hash.split('&').reduce(function (result, item) {
var parts = item.split('=');
result[parts[0]] = parts[1];
return result;
}, {});
var foundSomething = false;
if(result['tag'] != undefined) {
// console.log("requesting force to set vendors");
console.log("got the tag: "+result['tag']);
this.tag = result['tag'];
}
if (result['page'] != undefined) {
foundSomething = true;
// console.log("setting page to: " + result['page']);
this.page = result['page'];
this.current_page = result['page'];
}
if(result['categs'] != undefined) {
// console.log("requesting force to set categories");
this.forceCategoriesIDS = JSON.parse(result['categs']);
}
if(result['vendors'] != undefined) {
// console.log("requesting force to set vendors");
this.forceVendorsIDS = JSON.parse(result['vendors']);
}
if (!foundSomething) {
this.categoriesRefreshCount = 4;
this.vendorsRefreshCount = 4;
}
// console.log(result);
}
this.silentURLUpdate = false;
},
updateTheURL() {
this.silentURLUpdate = true;
var compiled_categs = this.compileCategs();
var compiled_vendors = this.compileVendors();
var finalLocation = document.location.href.split('#')[0]+"#page="+this.current_page+"&categs="+JSON.stringify(compiled_categs)+"&vendors="+JSON.stringify(compiled_vendors);
if(this.tag != '') {
finalLocation = finalLocation+"&tag="+this.tag;
}
document.location = finalLocation;
}
},
created: function () {
this.current_page = 1;
this.fetchTheURL();
var thisThis = this;
$(window).on('hashchange', function() {
thisThis.fetchTheURL();
});
if ($(window).width() <= 768) {
this.filters_visible_btn = '';
}
if(this.sort_by != null) {
this.sort_by_model = this.sort_by;
}
}
});