fixes ui
This commit is contained in:
rakesh
parent
a39efcdfd8
commit
dfc05cd6b2
|
|
@ -26,27 +26,29 @@
|
|||
<v-card-actions class="px-4">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering , props}">
|
||||
<v-btn
|
||||
class="text-uppercase body-font ma-2 button-background"
|
||||
tile
|
||||
large
|
||||
depressed
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'primary'"
|
||||
:class="hover?'primary--text':'white--text'"
|
||||
v-bind="props"
|
||||
size="large"
|
||||
rounded="0"
|
||||
@click="onAction(false)"
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="
|
||||
isHovering ? ' bg-white text-error' : 'bg-error'
|
||||
"
|
||||
>CANCEL</v-btn>
|
||||
</v-hover>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering , props }">
|
||||
<v-btn
|
||||
class="text-uppercase body-font ma-2 button-background"
|
||||
:outlined="hover"
|
||||
:color="hover?'white':'error'"
|
||||
:class="hover?'error--text':'white--text'"
|
||||
tile
|
||||
large
|
||||
depressed
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="
|
||||
isHovering ? ' bg-white text-primary' : 'bg-primary'
|
||||
"
|
||||
v-bind="props"
|
||||
size="large"
|
||||
rounded="0"
|
||||
@click="onAction(true)"
|
||||
>OK</v-btn>
|
||||
</v-hover>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
|
||||
</v-col>-->
|
||||
<v-col v-if="cartItems">
|
||||
|
||||
<v-card
|
||||
elevation="0"
|
||||
class="mb-4"
|
||||
|
|
@ -279,18 +280,23 @@
|
|||
</v-col>
|
||||
<!---------------------------cart page--------------------------------------------->
|
||||
<v-col cols="8" class="py-0" v-show="cartProductPage">
|
||||
<v-row>
|
||||
<v-row class="my-3">
|
||||
<v-col cols="12" sm="6" md="5" lg="6">
|
||||
<v-row>
|
||||
<p
|
||||
class="fontsize-14 black--text float-left"
|
||||
class=" mt-4
|
||||
mb-6
|
||||
fontsize-14
|
||||
text-black
|
||||
float-left
|
||||
cursor-pointer"
|
||||
>
|
||||
{{ product.name }}
|
||||
{{ product.name }}
|
||||
</p>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<p
|
||||
class="fontsize-14 text-uppercase"
|
||||
class="fontsize-14 mb-6 text-uppercase"
|
||||
v-show="cartProductPage"
|
||||
>
|
||||
Sku {{ product.sku }}
|
||||
|
|
@ -298,7 +304,7 @@
|
|||
</v-row>
|
||||
<v-row>
|
||||
<p
|
||||
class="fontsize-14 text-uppercase"
|
||||
class=" fontsize-14 mb-6 text-uppercase"
|
||||
v-show="cartProductPage"
|
||||
>
|
||||
UPC {{ product.customAttributes.upc }}
|
||||
|
|
@ -322,26 +328,29 @@
|
|||
<p class="fontsize-14 mb-0 pb-10">Qty.</p>
|
||||
</v-col>
|
||||
<v-col class="pl-0 pt-0">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-select
|
||||
:items="
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-select
|
||||
:items="
|
||||
qtyPriceOptions(
|
||||
product.customAttributes.qtyPrice,
|
||||
product.qty,
|
||||
index
|
||||
)
|
||||
"
|
||||
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
|
||||
dense
|
||||
class="fontsize-16
|
||||
line-height-21
|
||||
ls-n009
|
||||
font-weight-400
|
||||
cartproductlist-select-button
|
||||
"
|
||||
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
v-bind="props"
|
||||
attach
|
||||
flat
|
||||
solo
|
||||
outlined
|
||||
:class="hover ? 'primary--text' : 'black--text'"
|
||||
item-text="price"
|
||||
item-value="qty"
|
||||
single-line
|
||||
@change="
|
||||
:class="isHovering ? 'text-primary' : 'text-black'"
|
||||
v-model="selectedQty[index]"
|
||||
@update:modelValue="
|
||||
updateToCart(
|
||||
product.name,
|
||||
product.sku,
|
||||
|
|
@ -358,26 +367,14 @@
|
|||
product.parentSku
|
||||
)
|
||||
"
|
||||
v-model="selectedQty[index]"
|
||||
ref="selectedCartQty3"
|
||||
:model-value="selectedQty[index]"
|
||||
ref="selectedCartQty4"
|
||||
background-color="transparent"
|
||||
append-icon="mdi-plus"
|
||||
>
|
||||
<template v-slot:selection="data">
|
||||
<span class="pl-1 fontsize-14">{{
|
||||
data.item.qty
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
<template>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="text-uppercase">{{
|
||||
data.item.qty
|
||||
}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
</template>
|
||||
</v-select>
|
||||
append-inner-icon="mdi-plus"
|
||||
item-value="qty"
|
||||
item-title="qty"
|
||||
item-children="qty"
|
||||
></v-select>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
@ -386,16 +383,8 @@
|
|||
<p class="fontsize-14 mb-0 pb-10">Qty.</p>
|
||||
</v-col>
|
||||
<v-col class="pl-0 pt-0">
|
||||
<!--<v-select
|
||||
class="fontsize-14 title-color-black cartproductlist-select-button"
|
||||
:items="numberOptions(product.customAttributes.baMinSalesQty,product.customAttributes.baQtyIncrements,product.qty,index)"
|
||||
v-model="selectedQty[index]"
|
||||
dense
|
||||
flat
|
||||
solo
|
||||
@change="updateToCart(product.sku,product.itemId,index)"
|
||||
></v-select>-->
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-select
|
||||
:items="
|
||||
numberOptions(
|
||||
|
|
@ -405,15 +394,21 @@
|
|||
index
|
||||
)
|
||||
"
|
||||
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 cartproductlist-select-button select-change-icon"
|
||||
dense
|
||||
class="
|
||||
fontsize-16
|
||||
line-height-21
|
||||
ls-n009
|
||||
font-weight-400
|
||||
cartproductlist-select-button
|
||||
"
|
||||
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
v-bind="props"
|
||||
attach
|
||||
flat
|
||||
solo
|
||||
outlined
|
||||
:class="hover ? 'primary--text' : 'black--text'"
|
||||
single-line
|
||||
@change="
|
||||
:class="isHovering ? 'text-primary' : 'text-black'"
|
||||
v-model="selectedQty[index]"
|
||||
@update:modelValue="
|
||||
updateToCart(
|
||||
product.name,
|
||||
product.sku,
|
||||
|
|
@ -427,13 +422,13 @@
|
|||
product.customAttributes.isPersonalize,
|
||||
product.customAttributes.builderVersion,
|
||||
product.ccid,
|
||||
product.parentSku
|
||||
product.parentSku
|
||||
)
|
||||
"
|
||||
v-model="selectedQty[index]"
|
||||
:model-value="selectedQty[index]"
|
||||
ref="selectedCartQty4"
|
||||
background-color="transparent"
|
||||
append-icon="mdi-plus"
|
||||
append-inner-icon="mdi-plus"
|
||||
></v-select>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
|
@ -479,13 +474,17 @@
|
|||
</div>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!------------------------------------------------------------------------------------->
|
||||
<v-row class="mr-1" v-show="checkOut">
|
||||
<v-row class="ma-0 pb-4 pt-5" v-show="checkOut">
|
||||
<v-col align="right">
|
||||
|
||||
<a
|
||||
class="fontsize-14 black--text text-uppercase cartproductlist-action-link"
|
||||
@click.stop="
|
||||
class=" fontsize-14
|
||||
text-black text-uppercase
|
||||
cartproductlist-action-link
|
||||
cursor-pointer"
|
||||
@click.stop="
|
||||
remove(
|
||||
product.name,
|
||||
product.sku,
|
||||
|
|
@ -500,10 +499,7 @@
|
|||
</v-row>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-divider
|
||||
class="primary"
|
||||
v-show="cartProductPage && cartItems.length > 1"
|
||||
></v-divider>
|
||||
<div class="hr-line" v-show="cartProductPage && cartItems.length > 1"></div>
|
||||
</v-row>
|
||||
</v-card>
|
||||
<v-col class="text-center mb-12" v-if="isGateModulePage">
|
||||
|
|
@ -530,11 +526,15 @@
|
|||
</v-hover>
|
||||
</v-col>
|
||||
</v-col>
|
||||
<ConfirmationDialog
|
||||
:confirmationDialog="confirmationDialogFlag"
|
||||
|
||||
<ConfirmationDialog
|
||||
:key="confirmationDialog"
|
||||
:confirmationDialog="confirmationDialog"
|
||||
:confirmationDetails="confirmation"
|
||||
@actionRemove="removeProduct"
|
||||
@actionRemove="removeProduct"
|
||||
v-if="confirmationDialog"
|
||||
></ConfirmationDialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -567,7 +567,7 @@ export default {
|
|||
quantity: "25",
|
||||
savFromKey: "Ub07GxNhS3yyoDfO",
|
||||
ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
|
||||
confirmationDialogFlag: false,
|
||||
confirmationDialog: false,
|
||||
confirmation: {
|
||||
confirmationMessage: "",
|
||||
},
|
||||
|
|
@ -750,11 +750,12 @@ export default {
|
|||
}
|
||||
},
|
||||
remove(productName, sku, itemId, parentSku,product) {
|
||||
this.productDetails=product
|
||||
console.log(sku, parentSku);
|
||||
|
||||
this.productDetails = product;
|
||||
|
||||
this.productId = itemId;
|
||||
this.removeProdcutName = productName;
|
||||
(this.confirmationDialogFlag = true),
|
||||
(this.confirmationDialog = true),
|
||||
(this.confirmation = {
|
||||
confirmationMessage:
|
||||
"Are you sure you would like to remove this item from the shopping cart?",
|
||||
|
|
@ -1110,7 +1111,7 @@ export default {
|
|||
//let token = getAuthUser();
|
||||
try {
|
||||
if (action.submit) {
|
||||
this.confirmationDialogFlag = false;
|
||||
this.confirmationDialog = false;
|
||||
if (this.userAuth) {
|
||||
try {
|
||||
await this.$store.dispatch("userCartProduct/removeCartProduct", {
|
||||
|
|
@ -1176,7 +1177,7 @@ export default {
|
|||
timeout: 3000,
|
||||
};
|
||||
}
|
||||
this.confirmationDialogFlag = false;
|
||||
this.confirmationDialog = false;
|
||||
this.removeProdcutName = "";
|
||||
this.confirmation = {
|
||||
confirmationMessage: "",
|
||||
|
|
|
|||
|
|
@ -1,226 +1,221 @@
|
|||
<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 >
|
||||
<v-col cols="12" >
|
||||
<h1
|
||||
class="float-left fontsize-12 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
|
||||
>{{ product.n }}
|
||||
<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>
|
||||
<v-col cols="12">
|
||||
<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 }}
|
||||
</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="text-red mb-0">
|
||||
${{ roundUp(product.sp) }}</span
|
||||
>
|
||||
/ {{ product.u }}
|
||||
</span>
|
||||
<span v-else-if="product.p != 0">
|
||||
<span>
|
||||
${{ priceFormatter(product.p) }} / {{ 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" >
|
||||
</span>
|
||||
<span v-else>
|
||||
<p>TBD</p>
|
||||
</span>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" class="float-right">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
:disabled="inProgress"
|
||||
block
|
||||
x-large
|
||||
v-bind="props"
|
||||
:outlined="!inProgress ? hover:false"
|
||||
:color="isHovering?'white':'primary'"
|
||||
:class="isHovering?' text-primary':'text-white'"
|
||||
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>
|
||||
<v-btn
|
||||
:disabled="inProgress"
|
||||
block
|
||||
size="x-large"
|
||||
v-bind="props"
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="
|
||||
isHovering ? ' bg-white text-primary' : 'bg-primary'
|
||||
"
|
||||
class="text-uppercase ls-0 body productpage-button"
|
||||
|
||||
@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";
|
||||
import { priceFormatter } from "@/services/util.service";
|
||||
|
||||
export default {
|
||||
name: "RetailerSearchProducts",
|
||||
components: {
|
||||
},
|
||||
components: {},
|
||||
props: [
|
||||
"criteria",
|
||||
"searchPageContent",
|
||||
"breadcrumbData",
|
||||
"categoryPageContent"
|
||||
"categoryPageContent",
|
||||
],
|
||||
computed: {
|
||||
...mapState({
|
||||
searchResults: state => state.catalogBrowser.searchResults,
|
||||
inProgress: state => state.catalogBrowser.inProgress,
|
||||
searchResults: (state) => state.catalogBrowser.searchResults,
|
||||
inProgress: (state) => state.catalogBrowser.inProgress,
|
||||
}),
|
||||
|
||||
|
||||
imageBasePathUrl() {
|
||||
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
||||
},
|
||||
imageBaseParams() {
|
||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PARAMS;
|
||||
},
|
||||
isIpadOrMobile: function() {
|
||||
isIpadOrMobile: function () {
|
||||
return this.$vuetify.display.mdAndDown ? true : false;
|
||||
},
|
||||
isIpad: function() {
|
||||
isIpad: function () {
|
||||
return this.$vuetify.display.smOnly || this.$vuetify.display.mdOnly
|
||||
? true
|
||||
: false;
|
||||
},
|
||||
isMobile: function() {
|
||||
isMobile: function () {
|
||||
return this.$vuetify.display.xs ? true : false;
|
||||
},
|
||||
userAuth: function() {
|
||||
userAuth: function () {
|
||||
return this.$store.state.auth.userAuth;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
watch: {},
|
||||
data: () => ({
|
||||
priceFormatter: priceFormatter,
|
||||
menu: false,
|
||||
priceFormatter: priceFormatter,
|
||||
menu: false,
|
||||
showDrawarFilter: false,
|
||||
noProducts: "No products found.",
|
||||
snackbar: {
|
||||
snackbar: {
|
||||
show: false,
|
||||
message: null,
|
||||
color: null,
|
||||
timeout: 0
|
||||
timeout: 0,
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
roundUp(num) {
|
||||
roundUp(num) {
|
||||
var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
|
||||
return with2Decimals;
|
||||
},
|
||||
async addToCart(sku,qty) {
|
||||
if (sku) {
|
||||
async addToCart(sku, qty) {
|
||||
if (sku) {
|
||||
if (this.userAuth) {
|
||||
await this.$store
|
||||
debugger
|
||||
await this.$store
|
||||
.dispatch("userCartProduct/addToCart", {
|
||||
sku: sku,
|
||||
qty:qty,
|
||||
qty: qty,
|
||||
ccid: null,
|
||||
price: null,
|
||||
personalizeDetails: null
|
||||
personalizeDetails: null,
|
||||
})
|
||||
.then(() => {
|
||||
this.snackbar = {
|
||||
.then(() => {
|
||||
this.snackbar = {
|
||||
message: "Product Added Successfully",
|
||||
color: "success",
|
||||
show: true,
|
||||
timeout: 2000
|
||||
timeout: 2000,
|
||||
};
|
||||
this.$store.dispatch("userCartProduct/cartProductList");
|
||||
this.$emit("actionClose", this.snackbar);
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error",error)
|
||||
.catch((error) => {
|
||||
console.log("error", error);
|
||||
this.snackbar = {
|
||||
message: error.message,
|
||||
color: "error",
|
||||
show: true,
|
||||
timeout: 2000
|
||||
timeout: 2000,
|
||||
};
|
||||
this.$emit("actionClose", this.snackbar);
|
||||
this.$emit("actionClose", this.snackbar);
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
this.errorMessage = "Please Select Quantity";
|
||||
}
|
||||
|
|
@ -234,8 +229,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
}
|
||||
created() {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.cart-products-button.v-btn:before{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.hr-line{
|
||||
background-color: #2850da;
|
||||
height: 1px;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
>
|
||||
</v-text-field>
|
||||
</template>
|
||||
<v-card tile flat v-if="searchData" max-width="750">
|
||||
<v-card tile flat v-if="searchData" >
|
||||
<RetailerSearchProducts @actionClose="showSnackBarMessage" />
|
||||
</v-card>
|
||||
<v-card v-else >
|
||||
|
|
@ -52,22 +52,7 @@
|
|||
<v-alert class="alert-box-outline" type="error" text dense
|
||||
>You have no items in your shopping cart.</v-alert
|
||||
>
|
||||
<!-- <p>
|
||||
Click
|
||||
<span
|
||||
class="
|
||||
mr-1
|
||||
text-decoration-none
|
||||
fontcolor-black-light
|
||||
fontsize-16
|
||||
guest-shipping-address-login
|
||||
"
|
||||
>
|
||||
<span @click="goToShopping()" class="cursor-pointer"
|
||||
>here</span
|
||||
> </span
|
||||
>to continue shopping.
|
||||
</p>-->
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
|
@ -76,7 +61,7 @@
|
|||
<v-col cols="12" sm="12" md="8">
|
||||
<v-col cols="12">
|
||||
<p
|
||||
class="h3 body-font text-uppercase primary--text"
|
||||
class="h3 body-font text-uppercase text-primary"
|
||||
v-if="!cartProductsProgress"
|
||||
>
|
||||
Your Cart ( {{ cartProductsItem.length }} )
|
||||
|
|
@ -98,10 +83,10 @@
|
|||
<v-col cols="12" sm="12" md="4" class="pb-0 mb-0">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p class="pb-0 mb-0 h2 body-font text-uppercase primary--text">
|
||||
<p class="pb-0 mb-0 h2 body-font text-uppercase text-primary">
|
||||
Summary
|
||||
</p>
|
||||
<v-divider class="primary pb-0 mb-0"></v-divider>
|
||||
<div class="hr-line"></div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="!cartTotalAmtProgress && cartProductTotalAmt">
|
||||
|
|
@ -115,7 +100,7 @@
|
|||
<v-col cols="12">
|
||||
<p class="float-left pb-0 mb-0">Shipping</p>
|
||||
<p class="float-right pb-0 mb-0">
|
||||
<!-- ${{ priceFormatter(cartProductTotalAmt.baseShippingAmount) }}-->
|
||||
|
||||
TBD
|
||||
</p>
|
||||
</v-col>
|
||||
|
|
@ -123,35 +108,37 @@
|
|||
v-if="stockFlag"
|
||||
cols="12"
|
||||
align="center"
|
||||
class="px-10 my-6"
|
||||
|
||||
>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering, props }">
|
||||
<v-btn
|
||||
tile
|
||||
large
|
||||
size="large"
|
||||
rounded="0"
|
||||
v-bind="props"
|
||||
class="d-sm-none d-md-block cart-products-button"
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="
|
||||
isHovering ? ' bg-white text-primary' : 'bg-primary'
|
||||
"
|
||||
block
|
||||
class="d-sm-none d-md-block cart-products-button"
|
||||
:outlined="hover"
|
||||
:color="hover ? 'white' : 'primary'"
|
||||
:class="hover ? 'primary--text' : 'white--text'"
|
||||
dark
|
||||
depressed
|
||||
@click="goToCheckout()"
|
||||
>GO TO CHECKOUT</v-btn
|
||||
>
|
||||
</v-hover>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-hover v-slot:default="{ isHovering , props}">
|
||||
<v-btn
|
||||
tile
|
||||
large
|
||||
size="large"
|
||||
rounded="0"
|
||||
v-bind="props"
|
||||
class="
|
||||
d-none d-sm-flex d-md-none
|
||||
px-12
|
||||
cart-products-button
|
||||
"
|
||||
:outlined="hover"
|
||||
:color="hover ? 'white' : 'primary'"
|
||||
:class="hover ? 'primary--text' : 'white--text'"
|
||||
:variant="isHovering ? 'outlined' : 'outlined'"
|
||||
:class="
|
||||
isHovering ? ' bg-white text-primary' : 'bg-primary'
|
||||
"
|
||||
dark
|
||||
depressed
|
||||
@click="goToCheckout()"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,29 @@ import { wrapRequest } from './nav';
|
|||
const vueAppMagenotApiUrl = import.meta.env.VITE_APP_MAGENTO_API_URL;
|
||||
const vueAppNodeslsApiUrl = import.meta.env.VITE_APP_NODESLS_API_URL;
|
||||
const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
|
||||
|
||||
|
||||
export const doPostCartItem = wrapRequest((sku, qty, ccid, price, personalizeDetails,builderId, quoteId) => {
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
...authHeader()
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"cartItem": {
|
||||
"quote_id": quoteId,
|
||||
"sku": sku,
|
||||
"qty": qty,
|
||||
},
|
||||
"ccid": ccid,
|
||||
"order_total": price,
|
||||
"personalize_Data": personalizeDetails,
|
||||
"builder_id": builderId
|
||||
})
|
||||
};
|
||||
return fetch(`${vueAppMagenotApiUrl}/rest/crn_retailer/V1/carts/mine/items`, requestOptions)
|
||||
});
|
||||
|
||||
export const doPostConfiguredCartItem = wrapRequest((itemNumber, quantity, typeId, optionId, optionValue, quoteId) => {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {
|
||||
doPostCartItem,
|
||||
doFetchQuote,
|
||||
doFetchCartProducts,
|
||||
doFetchTotalAmt,
|
||||
|
|
@ -113,6 +114,24 @@ export const userCartProduct = {
|
|||
},
|
||||
},
|
||||
actions: {
|
||||
addToCart: async({ commit, state }, data) => {
|
||||
try {
|
||||
let result;
|
||||
commit('inProgress', true);
|
||||
if (!state.cartProductDetails.length > 0) {
|
||||
const userQuote = await doFetchQuote();
|
||||
localStorage.setItem("cr_userQuoteId", userQuote); //no use
|
||||
result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, userQuote);
|
||||
} else {
|
||||
result = await doPostCartItem(data.sku, data.qty, data.ccid, data.price, data.personalizeDetails, data.builderId?data.builderId:null, state.cartProductDetails[0].quoteId);
|
||||
}
|
||||
commit('inProgress', false);
|
||||
return result;
|
||||
} catch (err) {
|
||||
commit('inProgress', false);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
addToConfiguredCart: async({ commit, state }, data) => {
|
||||
try {
|
||||
commit('inProgress', true);
|
||||
|
|
|
|||
Loading…
Reference in New Issue