402 lines
12 KiB
Vue
402 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<v-row v-if="searchResults.page.length && !inProgress" class="mx-4">
|
|
<v-col cols="12" lg="12" md="12" sm="12" >
|
|
<v-row v-if="inProgress">
|
|
<v-col
|
|
v-for="(i, index) in 9"
|
|
v-bind:key="index"
|
|
lg="4"
|
|
md="4"
|
|
sm="4"
|
|
cols="12"
|
|
class=" cursor-pointer"
|
|
>
|
|
<v-skeleton-loader type="card"></v-skeleton-loader>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="searchResults.page.length > 0">
|
|
<v-col
|
|
v-for="(product, index) in searchResults.page"
|
|
v-bind:key="index"
|
|
lg="4"
|
|
md="4"
|
|
sm="4"
|
|
cols="12"
|
|
class=" cursor-pointer "
|
|
|
|
>
|
|
<v-img
|
|
:src="imageBasePathUrl + product.i + imageBaseParams"
|
|
width="100%"
|
|
:alt="product.n"
|
|
:title="product.n"
|
|
></v-img>
|
|
<v-row no-gutters >
|
|
<v-col cols="12" class="mt-1">
|
|
<h1
|
|
class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
|
|
>{{ product.n }}
|
|
</h1>
|
|
</v-col>
|
|
<v-col cols="5" class="py-0">
|
|
<h1
|
|
class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
|
|
>
|
|
SKU {{product.sku}}</h1>
|
|
</v-col>
|
|
<v-col cols="7" class="py-0">
|
|
<p
|
|
v-if="product.lp"
|
|
class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
|
|
>
|
|
From ${{ product.lp }}
|
|
{{ product.u }}
|
|
</p>
|
|
<div
|
|
v-else
|
|
class="float-right fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300"
|
|
>
|
|
<span v-if="product.sp">
|
|
<s>${{priceFormatter(product.p)}}</s>
|
|
<span class="red--text mb-0"> ${{ roundUp(product.sp) }}</span> / {{ product.u }}
|
|
</span>
|
|
<span v-else-if="product.p != 0">
|
|
<span>
|
|
${{priceFormatter(product.p ) }} / {{ product.u }}
|
|
</span>
|
|
</span>
|
|
<span v-else>
|
|
<p>TBD</p>
|
|
</span>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12" class="float-right mt-2" >
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
:disabled="inProgress"
|
|
block
|
|
x-large
|
|
:outlined="!inProgress ? hover:false"
|
|
:color="hover?'white':'primary'"
|
|
:class="hover?'primary--text':'white--text'"
|
|
class="text-uppercase ls-0 body productpage-button"
|
|
tile
|
|
depressed
|
|
@click="addToCart(product.sku,product.mq)"
|
|
>
|
|
<v-progress-circular
|
|
align="center"
|
|
:size="40"
|
|
block
|
|
color="primary"
|
|
indeterminate
|
|
v-if="inProgress"
|
|
></v-progress-circular>
|
|
<span v-if="!inProgress">ADD TO CART</span>
|
|
</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else class="text-center">
|
|
<v-col
|
|
lg="12"
|
|
md="12"
|
|
sm="12"
|
|
cols="12" v-if="inProgress">
|
|
<v-progress-circular :size="20" color="primary" indeterminate ></v-progress-circular>
|
|
</v-col>
|
|
<v-col
|
|
lg="12"
|
|
md="12"
|
|
sm="12"
|
|
cols="12" v-else>
|
|
|
|
<v-alert small class="ma-0 pa-0" type="error" text >{{
|
|
noProducts
|
|
}}</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* eslint-disable no-alert, no-console , no-debugger */
|
|
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
|
|
import { mapState } from "vuex";
|
|
import { priceFormatter } from "@/services/util.service";
|
|
|
|
export default {
|
|
name: "RetailerSearchProducts",
|
|
components: {
|
|
},
|
|
props: [
|
|
"criteria",
|
|
"searchPageContent",
|
|
"breadcrumbData",
|
|
"categoryPageContent"
|
|
],
|
|
computed: {
|
|
...mapState({
|
|
searchResults: state => state.catalogBrowser.searchResults,
|
|
inProgress: state => state.catalogBrowser.inProgress,
|
|
}),
|
|
|
|
imageBasePathUrl() {
|
|
return process.env.VUE_APP_IMAGE_PATH_URL;
|
|
},
|
|
imageBaseParams() {
|
|
return process.env.VUE_APP_IMAGE_CATEGORY_PARAMS;
|
|
},
|
|
isIpadOrMobile: function() {
|
|
return this.$vuetify.breakpoint.mdAndDown ? true : false;
|
|
},
|
|
isIpad: function() {
|
|
return this.$vuetify.breakpoint.smOnly || this.$vuetify.breakpoint.mdOnly
|
|
? true
|
|
: false;
|
|
},
|
|
isMobile: function() {
|
|
return this.$vuetify.breakpoint.xs ? true : false;
|
|
},
|
|
userAuth: function() {
|
|
return this.$store.state.auth.userAuth;
|
|
},
|
|
},
|
|
watch: {
|
|
},
|
|
data: () => ({
|
|
priceFormatter: priceFormatter,
|
|
menu: false,
|
|
showDrawarFilter: false,
|
|
noProducts: "No products found.",
|
|
snackbar: {
|
|
show: false,
|
|
message: null,
|
|
color: null,
|
|
timeout: 0
|
|
},
|
|
}),
|
|
methods: {
|
|
roundUp(num) {
|
|
var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
|
|
return with2Decimals;
|
|
},
|
|
async addToCart(sku,qty) {
|
|
if (sku) {
|
|
if (this.userAuth) {
|
|
await this.$store
|
|
.dispatch("userCartProduct/addToCart", {
|
|
sku: sku,
|
|
qty:qty,
|
|
ccid: null,
|
|
price: null,
|
|
personalizeDetails: null
|
|
})
|
|
.then(() => {
|
|
this.snackbar = {
|
|
message: "Product Added Successfully",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
this.$store.dispatch("userCartProduct/cartProductList");
|
|
this.$emit("actionClose", this.snackbar);
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.log("error",error)
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
this.$emit("actionClose", this.snackbar);
|
|
});
|
|
}
|
|
|
|
} else {
|
|
this.errorMessage = "Please Select Quantity";
|
|
}
|
|
},
|
|
OnResize() {
|
|
setTimeout(() => {
|
|
if (this.$vuetify.breakpoint.lgAndUp) {
|
|
this.showDrawarFilter = false;
|
|
}
|
|
}, 200);
|
|
},
|
|
},
|
|
|
|
created() {
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" >
|
|
.sort-button.theme--light.v-text-field--solo
|
|
> .v-input__control
|
|
> .v-input__slot {
|
|
background: transparent !important;
|
|
}
|
|
.categorybaseproducts-pagination-button .v-pagination__item--active {
|
|
outline: #ffffff !important;
|
|
}
|
|
.categorybaseproducts-pagination-button .v-pagination__item {
|
|
outline: #ffffff !important;
|
|
box-shadow: none !important;
|
|
padding: 0px !important;
|
|
margin: 0px !important;
|
|
}
|
|
.categorybaseproducts-pagination-button {
|
|
justify-content: flex-start;
|
|
}
|
|
.categorybaseproducts-overflow-button .v-select__slot {
|
|
border-left: 1px solid #dcdddd !important;
|
|
border-right: 1px solid #dcdddd !important;
|
|
max-width: 85px !important;
|
|
max-height: 36px !important;
|
|
}
|
|
.categorybaseproducts-overflow-button {
|
|
max-width: 85px !important;
|
|
}
|
|
.categorybaseproducts-overflow-button .v-select__slot .v-input__append-inner {
|
|
max-height: 36px !important;
|
|
}
|
|
.categorybaseproducts-overflow-button .v-overflow-btn .v-select__slot {
|
|
max-height: 36px !important;
|
|
}
|
|
.categorybaseproducts-overflow-button .v-text-field__details {
|
|
display: none;
|
|
}
|
|
.categorybaseproducts-pagination-button
|
|
.v-pagination__navigation.v-pagination__navigation--disabled {
|
|
display: none;
|
|
}
|
|
.categorybaseproducts-pagination-button
|
|
.v-pagination__navigation
|
|
.v-icon.v-icon {
|
|
font-style: normal !important;
|
|
color: #1d1d1d !important;
|
|
text-transform: uppercase !important;
|
|
font-size: 14px;
|
|
font-family: "Whyte-Regular", sans-serif;
|
|
letter-spacing: -0.1px;
|
|
}
|
|
.categorybaseproducts-select-button .v-input__control .v-input__slot {
|
|
border: thin solid #8b8b8b !important;
|
|
}
|
|
.categorybaseproducts-select-button:hover .v-input__control .v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
|
|
.v-input__control
|
|
.v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.categorybaseproducts-select-button:hover
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-select-button:hover
|
|
.v-input__append-inner
|
|
.v-input__icon
|
|
.v-icon {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-pagination-button .v-pagination__navigation {
|
|
outline: #ffffff !important;
|
|
box-shadow: none !important;
|
|
padding: 0px !important;
|
|
//margin: 0px 10px !important;
|
|
}
|
|
.custom-pagination li:nth-child(1) {
|
|
margin-right: 15px !important;
|
|
margin-left: 15px;
|
|
}
|
|
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button.theme--light.v-select
|
|
.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button .v-text-field__details {
|
|
display: none;
|
|
}
|
|
.categorybaseproducts-sortby-button .v-input__control .v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button:hover .v-input__control .v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
|
|
.v-input__control
|
|
.v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button:hover
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button:hover
|
|
.v-input__append-inner
|
|
.v-input__icon
|
|
.v-icon {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button
|
|
.v-input__append-inner
|
|
.v-input__icon
|
|
.v-icon {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
|
|
.v-input__append-inner,
|
|
.v-text-field.v-text-field--solo .v-input__prepend-inner {
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
padding-top: 5px;
|
|
border-left: 1px solid #2850da;
|
|
padding-left: 10px;
|
|
height: 34px;
|
|
}
|
|
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
|
|
.v-input__append-inner,
|
|
.v-text-field.v-text-field--solo .v-input__prepend-inner {
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
padding-top: 5px;
|
|
border-left: 1px solid #2850da;
|
|
padding-left: 10px;
|
|
height: 34px;
|
|
}
|
|
.searchproducts-cancel-buttons.v-icon.v-icon::after {
|
|
opacity: 0 !important;
|
|
}
|
|
.categorybaseproducts-sortby-button .v-text-field__details {
|
|
display: none;
|
|
}
|
|
.categorybaseproducts-overflow-button .v-text-field__details {
|
|
display: none;
|
|
}
|
|
.categorybaseproducts-filter-button .v-text-field__details {
|
|
display: none;
|
|
}
|
|
.filter-component-width .v-expansion-panels {
|
|
display: inline-block;
|
|
}
|
|
// .v-text-field__details {
|
|
// display: none;
|
|
// }
|
|
</style>
|
|
<style src="./RetailerSearchProducts.scss" lang="scss" scoped /> |