Vue.component('products_carousel', {
template: `
`,
props: ['url_template', 'search_query', 'site_url', 'title', 'categories_passed', 'vendors_passed','alwasm'],
data:
function () {
return {
current_page: 0,
products: {
total_pages: 0,
categories: [],
list: []
},
categories: [],
compiled_categs: [],
compiled_categs_encoded: '[]',
vendors: [],
compiled_vendors: [],
compiled_vendors_encoded: '[]',
is_loading: true,
checkbox: true,
firstload: true,
is_list: true,
sound: true,
sort_by_model: 'most_recent',
sort_by_list: [
{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: {
categories_passed: {
handler: function (newVal, oldVal) {
if (this.categories_passed != null) {
this.categories = JSON.parse(this.categories_passed);
this.update_products(true);
}
}
},
vendors_passed: {
handler: function (newVal, oldVal) {
if (this.vendors_passed != null) {
this.vendors = JSON.parse(this.vendors_passed);
this.update_products(true);
}
}
},
current_page: {
handler: function (newVal, oldVal) {
this.update_products(false);
}
}
,
sort_by_model: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
}
,
categories: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(false);
}
,
deep: true
}
,
vendors: {
handler: function (newVal, oldVal) {
this.current_page = 1;
this.update_products(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: {
prevPage() {
this.current_page = this.current_page - 1;
}, nextPage() {
this.current_page = this.current_page + 1;
},
update_products(do_scroll) {
this.load_count++;
var do_update = true;
var thisCompo = this;
// let's laod the next page
// 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 == 2) {
do_update = false;
}
if (do_update) {
thisCompo.is_loading = true;
const params = new URLSearchParams();
params.append('sort_by', thisCompo.sort_by_model);
params.append('categories', thisCompo.compiled_categs_encoded);
params.append('vendors', thisCompo.compiled_vendors_encoded);
params.append('tag', thisCompo.alwasm);
params.append('page_limit', 7);
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 && do_scroll) {
} else {
thisCompo.firstload = false;
}
thisCompo.is_loading = false;
})
.catch(function (error) {
console.log(error);
});
}
}
}
,
created: function () {
this.current_page = 1;
if (this.categories_passed != null) {
this.categories = JSON.parse(this.categories_passed);
this.compiled_categs = [];
var arrayLength = this.categories.length;
for (var i = 0; i < arrayLength; i++) {
var thisCateg = this.categories[i];
if (thisCateg.checked) {
this.compiled_categs.push(thisCateg.id);
}
//Do something
}
this.compiled_categs_encoded = JSON.stringify(this.compiled_categs);
}
if (this.vendors_passed != null) {
this.vendors = JSON.parse(this.vendors_passed);
this.compiled_vendors = [];
var arrayLength = this.vendors.length;
for (var i = 0; i < arrayLength; i++) {
var thisVendor = this.vendors[i];
if (thisVendor.checked) {
this.compiled_vendors.push(thisVendor.id);
}
//Do something
}
this.compiled_vendors_encoded = JSON.stringify(this.compiled_vendors);
}
}
})
;