sidharth.kothari
/
retailer-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debounce with product search

This commit is contained in:
sidharth 2022-01-21 17:33:32 +05:30
parent ad63d7d012
commit 55224926d9
4 changed files with 104 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
git_info.json
View File

@ -1 +1 @@
{"branch_name":"beta","last_commit_date":"2022-01-20T09:20:12.000Z","last_commit_author":"rakesh","last_commit_hash":"aecadf3107a47299cdc79a7ea795e944f95452fd"} {"branch_name":"beta","last_commit_date":"2022-01-20T09:38:46.000Z","last_commit_author":"rakesh","last_commit_hash":"ad63d7d012c005f4fd033a9432f7feb1494fbf8e"}

12
public/index.html
View File

@ -39,7 +39,7 @@
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- Listrak Analytics – Javascript Framework --> <!-- Listrak Analytics – Javascript Framework -->
<script type="text/javascript"> <!-- <script type="text/javascript">
var biJsHost = (("https:" == document.location.protocol) ? "https://" : "http://"); var biJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
(function (d, s, id, tid, vid) { (function (d, s, id, tid, vid) {
var js, ljs = d.getElementsByTagName(s)[0]; var js, ljs = d.getElementsByTagName(s)[0];
@ -49,9 +49,9 @@
js.src = biJsHost + "cdn.listrakbi.com/scripts/script.js?m=" + tid + "&v=" + vid; js.src = biJsHost + "cdn.listrakbi.com/scripts/script.js?m=" + tid + "&v=" + vid;
ljs.parentNode.insertBefore(js, ljs); ljs.parentNode.insertBefore(js, ljs);
})(document, 'script', 'ltkSDK', 'yJ3fjhPTdCKx', '1'); })(document, 'script', 'ltkSDK', 'yJ3fjhPTdCKx', '1');
</script> </script> -->
<!--START Pepperjam CODE--> <!--START Pepperjam CODE-->
<script> <!-- <script>
(function () { (function () {
var a = document.createElement("script"); var a = document.createElement("script");
a.type = "text/javascript", a.async = !0, a.src = "//container.pepperjam.com/4135755510.js"; a.type = "text/javascript", a.async = !0, a.src = "//container.pepperjam.com/4135755510.js";
@ -62,10 +62,10 @@
b.parentNode.insertBefore(a, b) b.parentNode.insertBefore(a, b)
} }
})(); })();
</script> </script> -->
<!--END Pepperjam CODE--> <!--END Pepperjam CODE-->
<!-- Criteo Homepage Tag --> <!-- Criteo Homepage Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script> <!-- <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript"> <script type="text/javascript">
window.criteo_q = window.criteo_q || []; window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d"; var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
@ -75,7 +75,7 @@
{ event: "setSiteType", type: deviceType }, { event: "setSiteType", type: deviceType },
// { event: "viewHome" } // { event: "viewHome" }
); );
</script> </script> -->
<!-- END Criteo Home Page Tag --> <!-- END Criteo Home Page Tag -->
</body> </body>

81
src/routes/retailer/cart_products.vue
View File

@ -16,36 +16,35 @@
</v-container> </v-container>
</v-overlay> </v-overlay>
<div v-show="!cartProductsProgress"> <div v-show="!cartProductsProgress">
<v-row><v-col cols="12" sm="12" md="12"> <v-row
<v-col cols="12" sm="12" md="8"> ><v-col cols="12" sm="12" md="12">
<v-menu offset-y down allow-overflow > <v-col cols="12" sm="12" md="8">
<template v-slot:activator="{ on }"> <v-menu offset-y down allow-overflow>
<v-text-field <template v-slot:activator="{ on }">
prepend-inner-icon="mdi-magnify" <v-text-field
placeholder="Enter Item, Name, Keyword" prepend-inner-icon="mdi-magnify"
v-model="searchData" placeholder="Enter Item, Name, Keyword"
v-on="on" v-model="searchData"
@input="searchProducts" v-on="on"
> @input="searchProducts"
</v-text-field> >
</template> </v-text-field>
<div> </template>
<v-card tile flat v-if="searchData"> <div>
<RetailerSearchProducts <v-card tile flat v-if="searchData">
@actionClose="showSnackBarMessage" <RetailerSearchProducts @actionClose="showSnackBarMessage" />
/> </v-card>
</v-card> </div>
</div> </v-menu>
</v-menu> </v-col>
</v-col> </v-col>
</v-col> </v-row>
</v-row>
<v-row v-show="cartProductsItem.length == 0"> <v-row v-show="cartProductsItem.length == 0">
<v-col> <v-col>
<v-alert class="alert-box-outline" type="error" text dense <v-alert class="alert-box-outline" type="error" text dense
>You have no items in your shopping cart.</v-alert >You have no items in your shopping cart.</v-alert
> >
<!-- <p> <!-- <p>
Click Click
<span <span
class=" class="
@ -65,12 +64,11 @@
</v-row> </v-row>
<div v-show="cartProductsItem.length != 0"> <div v-show="cartProductsItem.length != 0">
<v-row > <v-row>
<v-col cols="12" sm="12" md="8"> <v-col cols="12" sm="12" md="8">
<v-col cols="12"> <v-col cols="12">
<p <p
class="h3 body-font text-uppercase primary--text" class="h3 body-font text-uppercase primary--text"
v-if="!cartProductsProgress" v-if="!cartProductsProgress"
> >
Your Cart ( {{ cartProductsItem.length }} ) Your Cart ( {{ cartProductsItem.length }} )
@ -259,7 +257,6 @@ export default {
return this.$store.state.cartProduct.cartProductsProgress; return this.$store.state.cartProduct.cartProductsProgress;
} }
}, },
}, },
metaInfo() { metaInfo() {
return { return {
@ -282,7 +279,6 @@ export default {
}; };
}, },
watch: { watch: {
cartProductsItem() { cartProductsItem() {
this.stockFlagHideShow(); this.stockFlagHideShow();
this.calledCriteoViewBasket(); this.calledCriteoViewBasket();
@ -345,16 +341,19 @@ export default {
}); });
}, },
searchProducts() { searchProducts() {
if (this.searchData) { if (this.timeout) clearTimeout(this.timeout);
this.$store.dispatch("catalogBrowser/search", { this.timeout = setTimeout(() => {
fullCatalog: window.craneCatalog, if (this.searchData) {
keywords: this.searchData, this.$store.dispatch("catalogBrowser/search", {
filters: [], fullCatalog: window.craneCatalog,
pageNumber: 1, keywords: this.searchData,
pageSize: "ALL", filters: [],
sortBy: "relevance", pageNumber: 1,
}); pageSize: "ALL",
} sortBy: "relevance",
});
}
}, 500);
}, },
}, },
@ -362,7 +361,7 @@ export default {
this.$store.dispatch("catalogBrowser/index", { this.$store.dispatch("catalogBrowser/index", {
productsCatalog: window.craneCatalog.products, productsCatalog: window.craneCatalog.products,
}); });
/* if (this.userAuth) { /* if (this.userAuth) {
this.$store.dispatch("userCartProduct/fetchCartCoupon"); this.$store.dispatch("userCartProduct/fetchCartCoupon");
this.calledCriteoViewBasket(); this.calledCriteoViewBasket();

113
src/stores/retailer/catalog_browser.js
View File

@ -1,5 +1,5 @@
import { getField, updateField } from 'vuex-map-fields' import { getField, updateField } from 'vuex-map-fields'
import { doFilterItems } from '@/services/search.service' // import { doFilterItems } from '@/services/search.service'
//import { criteoForProductList } from "@/services/util.service"; //import { criteoForProductList } from "@/services/util.service";
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
export const catalogBrowser = { export const catalogBrowser = {
@ -131,7 +131,7 @@ export const catalogBrowser = {
}, },
/* eslint-disable no-alert, no-console , no-debugger */ /* eslint-disable no-alert, no-console , no-debugger */
search: ({ commit, state }, { fullCatalog, keywords, filters, pageNumber, pageSize, sortBy }) => { search:async ({ commit, state }, { fullCatalog, keywords, filters, pageNumber, pageSize, sortBy }) => {
commit('inProgress', true) commit('inProgress', true)
@ -140,22 +140,22 @@ export const catalogBrowser = {
// commit('setEnabledFilters', filters) // commit('setEnabledFilters', filters)
// debugger // debugger
const products = [] const products = []
if (filters !== undefined && filters.length) { // if (filters !== undefined && filters.length) {
const categoryFilter = filters.find((f => f.prop == 'ci')) // const categoryFilter = filters.find((f => f.prop == 'ci'))
if (categoryFilter !== undefined) { // if (categoryFilter !== undefined) {
console.log('filtering by category') // console.log('filtering by category')
const category = fullCatalog.allCategoryDetails.find(c => c.id == categoryFilter.value) // const category = fullCatalog.allCategoryDetails.find(c => c.id == categoryFilter.value)
if (category) { // if (category) {
for (var pi = 0; pi < category.p.length; pi++) { // for (var pi = 0; pi < category.p.length; pi++) {
const pid = category.p[pi] // const pid = category.p[pi]
const product = fullCatalog.products[pid] // const product = fullCatalog.products[pid]
if (product !== undefined) { // if (product !== undefined) {
products.push(product) // products.push(product)
} // }
} // }
} // }
} // }
} // }
if (keywords !== null && keywords != '') { if (keywords !== null && keywords != '') {
products.length = 0 products.length = 0
@ -170,46 +170,47 @@ export const catalogBrowser = {
const availableFilters = []; const availableFilters = [];
let filteredItems = []; let filteredItems = [];
let pageData = []; // let pageData = [];
if (products.length > 0) { // if (products.length > 0) {
filteredItems = doFilterItems({ // filteredItems = doFilterItems({
items: products, enabledFilters: state.enabledFilters, // items: products, enabledFilters: state.enabledFilters,
availableFilters, attributesMap: window.attributesMap // availableFilters, attributesMap: window.attributesMap
}) // })
switch (sortBy) { // switch (sortBy) {
case 'name': // case 'name':
filteredItems.sort((a, b) => { // filteredItems.sort((a, b) => {
if (a.n < b.n) return -1 // if (a.n < b.n) return -1
else if (a.n > b.n) return 1 // else if (a.n > b.n) return 1
else return 0 // else return 0
}) // })
break // break
case 'price': // case 'price':
filteredItems.sort((a, b) => { // filteredItems.sort((a, b) => {
if (a.p < b.p) return -1 // if (a.p < b.p) return -1
else if (a.p > b.p) return 1 // else if (a.p > b.p) return 1
else return 0 // else return 0
}) // })
break // break
case 'color': // case 'color':
filteredItems.sort((a, b) => { // filteredItems.sort((a, b) => {
if (a.dc < b.dc) return -1 // if (a.dc < b.dc) return -1
else if (a.dc > b.dc) return 1 // else if (a.dc > b.dc) return 1
else return 0 // else return 0
}) // })
break // break
} // }
if (pageSize != 'ALL') { // if (pageSize != 'ALL') {
pageSize = Number(pageSize) // pageSize = Number(pageSize)
pageData = filteredItems.slice((pageNumber - 1) * pageSize, pageNumber * pageSize) // pageData = filteredItems.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)
} // }
else { // else {
pageData = filteredItems; // pageData = filteredItems;
} // }
} // }
commit('setSearchResults', pageData); // commit('setSearchResults', pageData);
commit('setSearchResults', products);
commit('setAvailableFilters', availableFilters); commit('setAvailableFilters', availableFilters);
commit('setSearchTerms', { keywords: keywords, pageNumber: pageNumber, pageSize: pageSize, sortBy: sortBy, filters: filters } commit('setSearchTerms', { keywords: keywords, pageNumber: pageNumber, pageSize: pageSize, sortBy: sortBy, filters: filters }