957 lines
36 KiB
Vue
957 lines
36 KiB
Vue
<template>
|
|
<v-container class="white" ref="divOne">
|
|
<v-row class="mt-12" justify="center" v-if="fetchInProgress || updateProgress">
|
|
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
|
|
</v-row>
|
|
<v-row class="mb-md-10" v-else-if="!fetchErrorMessage && configuredProductDetails">
|
|
<v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
|
|
<v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length">
|
|
<div
|
|
v-for="(productImage,index) in configuredProductDetails[0].mediaGalleryEntries"
|
|
v-bind:key="index"
|
|
>
|
|
<div v-if="productImage.mediaType === 'image'">
|
|
<v-col class="pb-2 pt-0 pl-0 pr-0">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-card
|
|
outlined
|
|
@click="setSelected(productImage.file,index)"
|
|
:color="hover ? blue : white"
|
|
v-bind:class="{ 'primary': index==selected }"
|
|
tile
|
|
v-if="productImage.file"
|
|
>
|
|
<v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
|
|
</v-card>
|
|
</v-hover>
|
|
</v-col>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length==0">
|
|
<v-col class="pb-2 pt-0 px-0">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-card
|
|
outlined
|
|
:color="hover ? blue : white"
|
|
class="primary"
|
|
tile
|
|
>
|
|
<v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
|
|
</v-card>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="7"
|
|
md="7"
|
|
class="my-6 py-6 mt-sm-12 pt-sm-12 mt-md-12 pt-md-12"
|
|
align="center"
|
|
v-if="configuredProductProgress"
|
|
>
|
|
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
|
|
</v-col>
|
|
<v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else-if="imagepath">
|
|
<v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
|
|
<h1 class="text-uppercase h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
|
|
</v-col>
|
|
<v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
|
|
</v-col>
|
|
<v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="configuredProductDetails[0].mediaGalleryEntries.length">
|
|
<v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
|
|
<v-col
|
|
v-else
|
|
v-for="(productImage,index) in configuredProductDetails[0].mediaGalleryEntries"
|
|
v-bind:key="index"
|
|
v-show="productImage.mediaType === 'image'"
|
|
class="px-2"
|
|
cols="3"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-card
|
|
max-width="70"
|
|
max-height="70"
|
|
class="mx-auto"
|
|
outlined
|
|
@click="setSelected(productImage.file,index)"
|
|
:color="hover ? blue : white"
|
|
v-bind:class="{ 'primary': index==selected }"
|
|
tile
|
|
v-if="productImage.file"
|
|
>
|
|
<v-img
|
|
v-bind:src="imageBasePathUrl + productImage.file"
|
|
max-width="70"
|
|
max-height="70"
|
|
@error="setAltImg()"
|
|
:alt="productDetails.name" :title="productDetails.name"
|
|
></v-img>
|
|
</v-card>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length==0">
|
|
<v-col
|
|
class="px-2"
|
|
cols="3"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-card
|
|
max-width="70"
|
|
max-height="70"
|
|
class="mx-auto primary"
|
|
outlined
|
|
:color="hover ? blue : white"
|
|
tile
|
|
>
|
|
<v-img
|
|
v-bind:src="imageBasePathUrl+''"
|
|
max-width="70"
|
|
max-height="70"
|
|
@error="setAltImg()"
|
|
:alt="productDetails.name" :title="productDetails.name"
|
|
></v-img>
|
|
</v-card>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- <v-progress-circular :size="60" color="primary" indeterminate v-if="fetchInProgress"></v-progress-circular>-->
|
|
<v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
|
|
<v-row>
|
|
<v-col md="12" cols="12" class="pr-0 pt-0">
|
|
<p
|
|
class="d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
|
|
>{{ productDetails.name}}</p>
|
|
<p
|
|
v-if="!selectedLetter"
|
|
class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
|
|
>{{ productDetails.sku}}</p>
|
|
<p
|
|
v-else
|
|
class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
|
|
>{{configuredProductDetails[0].sku}}</p>
|
|
</v-col>
|
|
<!--<v-col md="1" cols="2" align="right" justify="right" class="pl-0 pt-0">
|
|
<v-icon light class="pt-1 d-none d-sm-block">mdi-heart-outline</v-icon>
|
|
<v-icon light class="d-block d-sm-none productpage-icon">mdi-heart-outline</v-icon>
|
|
</v-col>-->
|
|
</v-row>
|
|
<p
|
|
v-if="!selectedLetter"
|
|
class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
|
|
>sku {{productDetails.sku}}</p>
|
|
<p
|
|
v-else
|
|
class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
|
|
>sku {{configuredProductDetails[0].sku}}</p>
|
|
<p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
|
|
<v-row class="pt-3">
|
|
<v-col cols="6" sm="12" md="12" lg="5" class="pr-0 pb-0">
|
|
<p
|
|
class="body-font mb-0 caption ls-n008 fontcolor-grey-darken pb-1"
|
|
>{{productDetails.unitDescription}}</p>
|
|
<!-- <p
|
|
class="body title-color-black"
|
|
>${{Number(productDetails.price)}} / {{ productDetails.uom}}</p> (old code )-->
|
|
<div v-if="configuredProductDetails">
|
|
<p
|
|
v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price')"
|
|
class="body title-color-black"
|
|
>From ${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price'))}} {{productDetails.uom}}</p>
|
|
<div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
|
|
<div v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price') ">
|
|
<s>${{Number( configuredProductDetails[0].price)}}</s>
|
|
<span
|
|
class="red--text mb-0"
|
|
>${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price'))}}</span>
|
|
/ {{productDetails.uom}}
|
|
</div>
|
|
<p
|
|
v-else
|
|
class="body title-color-black"
|
|
>${{configuredProductDetails[0].price}} / {{ productDetails.uom}}</p>
|
|
</div>
|
|
</div>
|
|
<!-- <p
|
|
v-else
|
|
class="body title-color-black"
|
|
>${{Number(productDetails.price)}} / {{ productDetails.uom}}</p>-->
|
|
</v-col>
|
|
<v-col
|
|
align="right"
|
|
justify="right"
|
|
cols="6"
|
|
sm="12"
|
|
md="12"
|
|
lg="7"
|
|
class="d-none d-sm-block pb-0"
|
|
>
|
|
<v-select
|
|
:items="numberOptions"
|
|
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
|
|
dense
|
|
attach
|
|
flat
|
|
solo
|
|
v-model="selectedQty"
|
|
ref="selectedQty1"
|
|
background-color="transparent"
|
|
append-icon="mdi-plus"
|
|
></v-select>
|
|
</v-col>
|
|
<v-col align="right" justify="right" cols="12" class="pl-4 pb-0">
|
|
<v-form ref="configuredLetter" v-model="valid" :lazy-validation="lazy">
|
|
<v-select
|
|
:items="productDetails.configurableProductLinksDetails"
|
|
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 select-change-icon"
|
|
:class="checkLetter?'':'productpage-select-button'"
|
|
dense
|
|
attach
|
|
flat
|
|
solo
|
|
:outlined="checkLetter"
|
|
:color="checkLetter?'error':'primary'"
|
|
v-model="selectedLetter"
|
|
@blur="resetValidation()"
|
|
ref="selectedQty2"
|
|
item-text="letterLabel"
|
|
item-value="letterLabel"
|
|
label="Choose an option..."
|
|
@change="getImages(productDetails.configurableProductOptions[0].options, selectedLetter, productDetails.configurableProductLinks)"
|
|
background-color="transparent"
|
|
append-icon="mdi-plus"
|
|
:rules="[v => !!v || 'This is a required field.']"
|
|
>
|
|
<template v-slot:selection="data">
|
|
<span class="fontsize-14">{{data.item.letterLabel}}</span>
|
|
</template>
|
|
<template v-slot:item="data">
|
|
<template>
|
|
<v-list-item-content>
|
|
<v-list-item-title class="text-uppercase">{{data.item.letterLabel}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</template>
|
|
</template>
|
|
</v-select>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
<p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
|
|
<p class="py-0 my-0 red--text">{{ errorMessage }}</p>
|
|
<v-row v-if="!itemId">
|
|
<v-col
|
|
class="pt-4"
|
|
v-if="productDetails.status=='1' && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0' ) && stockFlag"
|
|
>
|
|
<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="addToConfiguredCart(productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId,productDetails)"
|
|
>
|
|
<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-col
|
|
v-else-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1'&& qtyPriceOptions.length > 0 && stockFlag"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
block
|
|
x-large
|
|
class="text-uppercase ls-0 body pb-1 productpage-button"
|
|
:outlined="!hover"
|
|
:color="hover?'primary':'white'"
|
|
:class="hover?'white--text':'primary--text'"
|
|
tile
|
|
depressed
|
|
@click="gotoPersonalize()"
|
|
>PERSONALIZE</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
<v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
|
|
<v-btn
|
|
block
|
|
x-large
|
|
class="text-uppercase ls-0 body pb-1 white--text"
|
|
tile
|
|
color="#97ABB4"
|
|
depressed
|
|
>UNAVAILABLE</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-else>
|
|
<v-col
|
|
class="pt-4"
|
|
v-if="itemId && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
:disabled="inProgress"
|
|
block
|
|
x-large
|
|
depressed
|
|
:outlined="!inProgress ? hover:false"
|
|
:color="hover?'white':'primary'"
|
|
:class="hover?'primary--text':'white--text'"
|
|
class="text-uppercase ls-0 body productpage-button"
|
|
tile
|
|
@click="updateToConfiguredCart(productDetails.name,productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId)"
|
|
>
|
|
<v-progress-circular
|
|
align="center"
|
|
:size="40"
|
|
color="primary"
|
|
indeterminate
|
|
v-if="inProgress"
|
|
></v-progress-circular>
|
|
<span v-if="!inProgress">UPDATE CART</span>
|
|
</v-btn>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<v-row>
|
|
<v-col class="pt-5">
|
|
<v-tabs color="black" class="product-overview-tabs">
|
|
<v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
|
|
<v-tab-item>
|
|
<ul class="py-3 fontsize-16 body-font ls-n008">
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
|
|
</ul>
|
|
</v-tab-item>
|
|
<v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
|
|
<v-tab-item>
|
|
<ul class="py-3 fontsize-16 body-font ls-n008">
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
|
|
</ul>
|
|
</v-tab-item>
|
|
<v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
|
|
<v-tab-item>
|
|
<ul class="py-3 fontsize-16 body-font ls-n008">
|
|
<li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
|
|
<li>Standard shipping available</li>
|
|
<li>Expedited shipping available</li>
|
|
<li>Ships from Cohoes, NY</li>
|
|
</ul>
|
|
</v-tab-item>
|
|
</v-tabs>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else>
|
|
<v-col class="text-center">
|
|
<v-alert type="error" text>{{fetchErrorMessage}}</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
<SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
|
|
const retailorId = import.meta.env.VITE_APP_RETAILOR_ID;
|
|
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
|
|
import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
|
|
import { getLable, customAttributeValue ,setCategoryNameInLocal} from "@/services/util.service";
|
|
//import { getAuthUser } from "@/services/auth";
|
|
export default {
|
|
productDefaultImage:require('@/assets/defaultProduct.jpg'),
|
|
name: "ConfiguredProductDetailComponent",
|
|
props: ["productDetails","stockFlag","categoryId"],
|
|
components: { SnackbarComponent },
|
|
data: () => ({
|
|
updateProgress: "",
|
|
dropDownIcon: "mdi mdi-plus",
|
|
iconColor: "black--text",
|
|
isActive: true,
|
|
isLetterActive: true,
|
|
easings: Object.keys(easings),
|
|
snackbar: {
|
|
show: false,
|
|
message: null,
|
|
color: null,
|
|
timeout: 0
|
|
},
|
|
lazy: false,
|
|
textRules: [
|
|
v => !!v || "This field is required",
|
|
v => (v && v.length >= 3) || "This field must be at least 3 characters"
|
|
],
|
|
valid: true,
|
|
optionValue: "",
|
|
selectedQty: "",
|
|
selectedLetter: "",
|
|
blue: "primary",
|
|
checkLetter: false,
|
|
white: "white",
|
|
errorMessage: "",
|
|
itemNumber: "193C",
|
|
quantity: "25",
|
|
savFromKey: "Ub07GxNhS3yyoDfO",
|
|
ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
|
|
selected: "",
|
|
imagepath: "",
|
|
fav: true,
|
|
menu: false,
|
|
message: false,
|
|
hints: true,
|
|
|
|
priceOptions: [
|
|
{ text: "31 ($110.00)", callback: () => "31 ($110.00)" },
|
|
{ text: "32 ($110.00)", callback: () => "32 ($110.00)" },
|
|
{ text: "33 ($110.00)", callback: () => "33 ($110.00)" }
|
|
]
|
|
/*numberOptions: [
|
|
{ qty: "1 ", callback: () => "1" },
|
|
{ qty: "2", callback: () => "2" },
|
|
{ qty: "3", callback: () => "3" }
|
|
]*/
|
|
}),
|
|
computed: {
|
|
imageBasePathUrl() {
|
|
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
|
},
|
|
/* productAttributes() {
|
|
return this.$store.state.productList.attributeList;
|
|
},*/
|
|
sku: function() {
|
|
return this.$route.meta.sku ? this.$route.meta.sku : this.$route.params.sku;
|
|
},
|
|
itemId: function() {
|
|
this.pageScrollUp();
|
|
return this.$route.query.itemId;
|
|
},
|
|
qty: function() {
|
|
return this.$route.query.qty;
|
|
},
|
|
/*numberOptions: function() {
|
|
let nums = [];
|
|
for (let i = 0; i <= 98; i++) {
|
|
nums[i] = i + 1;
|
|
}
|
|
if (nums.length > 0) return nums;
|
|
else return "";
|
|
},*/
|
|
qtyPriceOptions() {
|
|
let vm = this;
|
|
let list = JSON.parse(
|
|
this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"qty_price"
|
|
)
|
|
);
|
|
if (this.qty) {
|
|
vm.selectedQty = this.qty.toString();
|
|
} else {
|
|
vm.selectedQty = list[0].qty;
|
|
}
|
|
return list;
|
|
},
|
|
numberOptions: function() {
|
|
let vm = this;
|
|
if (this.productDetails.customAttribute) {
|
|
let minSalesQty = this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"ba_min_sales_qty"
|
|
);
|
|
let qtyIncrements = this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"ba_qty_increments"
|
|
);
|
|
minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
|
|
qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;
|
|
|
|
let nums = [];
|
|
nums[0] = minSalesQty;
|
|
if (this.qty) {
|
|
vm.selectedQty = Number(this.qty);
|
|
} else {
|
|
vm.selectedQty = minSalesQty;
|
|
}
|
|
for (let i = 1; i <= 98; i++) {
|
|
minSalesQty = minSalesQty + qtyIncrements;
|
|
nums[i] = minSalesQty;
|
|
}
|
|
if (nums.length > 0) return nums;
|
|
else return "";
|
|
|
|
// return minSalesQty + " " + qtyIncrements;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
configuredProductDetails() {
|
|
return this.$store.state.productOne.configuredProductDetails.items;
|
|
},
|
|
userAuth: function() {
|
|
return this.$store.state.auth.userAuth;
|
|
},
|
|
|
|
inProgress: function() {
|
|
if (this.userAuth) {
|
|
return this.$store.state.userCartProduct.inProgress;
|
|
} else {
|
|
return this.$store.state.cartProduct.inProgress;
|
|
}
|
|
},
|
|
configuredProductProgress: function() {
|
|
return this.$store.state.productOne.configuredProductProgress;
|
|
},
|
|
fetchInProgress: function() {
|
|
return this.$store.state.productOne.fetchInProgress;
|
|
},
|
|
fetchErrorMessage: function() {
|
|
return this.$store.state.productOne.errorMessage;
|
|
},
|
|
productAttributes() {
|
|
return this.$store.state.productList.attributeList;
|
|
}
|
|
},
|
|
watch: {
|
|
configuredProductDetails() {
|
|
this.imagepath =this.productDetails.mediaGalleryEntries? this.productDetails.mediaGalleryEntries[0].file:"";
|
|
},
|
|
valid() {
|
|
if (!this.valid) {
|
|
this.$refs.configuredLetter.reset();
|
|
}
|
|
}
|
|
/* qtyPriceOptions()
|
|
{
|
|
if(this.qtyPriceOptions.length > 0)
|
|
this.selectedQty=this.qtyPriceOptions[0];
|
|
}*/
|
|
},
|
|
methods: {
|
|
setAltImg() {
|
|
event.target.src =this.productDefaultImage
|
|
},
|
|
resetValidation() {
|
|
this.isLetterActive = true;
|
|
this.checkLetter = false;
|
|
if (!this.valid) {
|
|
this.$refs.configuredLetter.reset();
|
|
}
|
|
},
|
|
getImages(letterArray, letter, configuredlink) {
|
|
this.checkLetter = false;
|
|
this.selected = 0;
|
|
this.errorMessage = "";
|
|
let index = letterArray.findIndex(x => x.label === letter);
|
|
let code = configuredlink[index];
|
|
|
|
let indexOption = letterArray.filter(x => x.label === letter);
|
|
this.optionValue = indexOption[0].valueIndex;
|
|
/* eslint-disable */
|
|
//debugger
|
|
this.$store
|
|
.dispatch("productOne/fetchConfiguredProductDetails", code)
|
|
.then(
|
|
() =>
|
|
(this.imagepath = this.configuredProductDetails[0].mediaGalleryEntries?this.configuredProductDetails[0].mediaGalleryEntries[0].file:"")
|
|
);
|
|
this.isLetterActive=true
|
|
},
|
|
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
return customAttributeValue(customAttributes, attributeCode);
|
|
},
|
|
addToConfiguredCart(sku, typeId, optionId,productDetails) {
|
|
this.checkLetter = true;
|
|
let vm =this;
|
|
if (this.$refs.configuredLetter.validate()) {
|
|
this.checkLetter = false;
|
|
if (this.selectedQty) {
|
|
let qtyNew=this.selectedQty;
|
|
this.errorMessage = "";
|
|
if (this.userAuth) {
|
|
this.$store
|
|
.dispatch("userCartProduct/addToConfiguredCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
typeId: typeId,
|
|
optionId: optionId,
|
|
optionValue: this.optionValue
|
|
})
|
|
.then((res) => {
|
|
// googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
|
|
if(this.categoryId)
|
|
{
|
|
setCategoryNameInLocal(this.categoryId,res);
|
|
}
|
|
this.$store.dispatch("userCartProduct/cartProductList");
|
|
// this.$store.dispatch("userCartProduct/productTotalAmt");
|
|
this.$store.dispatch("userCartProduct/cartDrawer", true);
|
|
this.snackbar = {
|
|
message: "Product Added Successfully",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
})
|
|
.catch(error => {
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
});
|
|
} else {
|
|
this.$store
|
|
.dispatch("cartProduct/addToConfiguredCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
typeId: typeId,
|
|
optionId: optionId,
|
|
optionValue: this.optionValue
|
|
})
|
|
.then((res) => {
|
|
// googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
|
|
if(this.categoryId)
|
|
{
|
|
setCategoryNameInLocal(this.categoryId,res);
|
|
}
|
|
this.snackbar = {
|
|
message: "Product Added Successfully",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
})
|
|
.catch(error => {
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 2000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
});
|
|
}
|
|
} else {
|
|
this.errorMessage = "This is a required field.";
|
|
}
|
|
}
|
|
},
|
|
updateToConfiguredCart(productName,sku, typeId, optionId) {
|
|
if (this.$refs.configuredLetter.validate()) {
|
|
if (this.selectedQty) {
|
|
this.errorMessage = "";
|
|
if (this.userAuth) {
|
|
this.$store
|
|
.dispatch("userCartProduct/updateToConfiguredCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
itemId: this.itemId,
|
|
typeId: typeId,
|
|
optionId: optionId,
|
|
optionValue: this.optionValue
|
|
})
|
|
.then(() => {
|
|
this.snackbar = {
|
|
message: "Product Updated Successfully",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 3000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
})
|
|
.catch(error => {
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 3000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
});
|
|
} else {
|
|
this.$store
|
|
.dispatch("cartProduct/updateToConfiguredCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
itemId: this.itemId,
|
|
typeId: typeId,
|
|
optionId: optionId,
|
|
optionValue: this.optionValue
|
|
})
|
|
.then(() => {
|
|
this.snackbar = {
|
|
message: "Product Updated Successfully",
|
|
color: "success",
|
|
show: true,
|
|
timeout: 3000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
})
|
|
.catch(error => {
|
|
this.snackbar = {
|
|
message: error.message,
|
|
color: "error",
|
|
show: true,
|
|
timeout: 3000
|
|
};
|
|
// setTimeout(() => {
|
|
// this.$router.push({
|
|
// name: "CategoryPage",
|
|
// params: { category: "stationery" }
|
|
// });
|
|
// }, 5000);
|
|
});
|
|
}
|
|
if(this.$route.name == productName)
|
|
this.$router.push({
|
|
name: productName,
|
|
query: { "qty": this.selectedQty, "itemId": this.itemId }
|
|
}).catch(error => {
|
|
error;
|
|
});
|
|
} else {
|
|
this.errorMessage = "Please Select Quantity";
|
|
}
|
|
}
|
|
},
|
|
/* getAttribute(customAttributes, attributeCode) {
|
|
return attribute(customAttributes, attributeCode, this.productAttributes);
|
|
},*/
|
|
getCustomAttributeLable(customAttributes, attributeCode) {
|
|
return getLable(customAttributes, attributeCode);
|
|
},
|
|
|
|
setValue(color) {
|
|
return (this.selected = color) && (this.errorMessage = "");
|
|
},
|
|
submit() {
|
|
if (this.selected !== "") {
|
|
return (this.selected = "") && (this.errorMessage = "");
|
|
} else {
|
|
this.errorMessage = "Please Select Color";
|
|
}
|
|
},
|
|
gotoPersonalize() {
|
|
// window.open(`${personlizeUrl}/product/${this.sku}`, "_blank");
|
|
if (
|
|
this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"builder_version"
|
|
) === "1.0" ||
|
|
this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"builder_version"
|
|
) === ""
|
|
) {
|
|
this.$router.push({
|
|
name: "CraneConnection",
|
|
params: {
|
|
retailorId: retailorId,
|
|
quantity: this.selectedQty,
|
|
itemNumber: this.sku
|
|
}
|
|
});
|
|
} else {
|
|
let itemCode = this.itemId ? this.itemId : "new";
|
|
window.open(
|
|
`${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
|
|
"_blank"
|
|
);
|
|
}
|
|
},
|
|
setSelected(part, index) {
|
|
this.imagepath = part;
|
|
this.selected = index;
|
|
},
|
|
pageScrollUp() {
|
|
|
|
this.updateProgress = true;
|
|
setTimeout(() => {
|
|
this.updateProgress = false;
|
|
}, 3000);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.pageScrollUp();
|
|
// console.log('this.productDetails.configurableProductlinks',this.productDetails.configurableProductLinks);
|
|
if(this.productDetails.configurableProductLinks)
|
|
{
|
|
this.$store.dispatch(
|
|
"productOne/fetchConfiguredProductDetails",
|
|
this.productDetails.configurableProductLinks[0]
|
|
);
|
|
}
|
|
},
|
|
created() {
|
|
if (this.itemId) {
|
|
this.updateProgress = true;
|
|
setTimeout(() => {
|
|
this.updateProgress = false;
|
|
}, 3000);
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.overflow-button .v-select__slot {
|
|
border-left: 1px solid #dcdddd !important;
|
|
border-right: 1px solid #dcdddd !important;
|
|
}
|
|
.product-overview-tabs .v-tabs-slider-wrapper {
|
|
color: #2850da;
|
|
height: 4px !important;
|
|
}
|
|
.overflow-button.v-overflow-btn.v-input--is-focused .v-input__slot {
|
|
box-shadow: none !important;
|
|
border-top: 1px solid #dcdddd !important;
|
|
border-bottom: 1px solid #dcdddd !important;
|
|
border-radius: 0px !important;
|
|
}
|
|
/*.v-autocomplete__content.v-menu__content {
|
|
box-shadow: none !important;
|
|
border: 1px solid #dcdddd !important;
|
|
}*/
|
|
.product-overview-tabs .v-tabs-items {
|
|
background-color: transparent !important;
|
|
}
|
|
.product-overview-tabs .v-tabs-bar {
|
|
background-color: transparent !important;
|
|
height: 35px !important;
|
|
}
|
|
.product-overview-tabs .v-slide-group__prev {
|
|
display: none !important;
|
|
}
|
|
.v-text-field .v-input__control {
|
|
border-radius: unset !important;
|
|
}
|
|
.productpage-select-button .v-input__control .v-input__slot {
|
|
border: thin solid #8b8b8b !important;
|
|
}
|
|
.productpage-select-button:hover .v-input__control .v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
.productpage-select-button.v-input--is-label-active.v-input--is-focused
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.productpage-select-button:hover
|
|
.v-select__selection.v-select__selection--comma {
|
|
color: #2850da !important;
|
|
}
|
|
.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
|
|
color: #2850da !important;
|
|
}
|
|
.productpage-select-button.v-input--is-label-active.v-input--is-focused
|
|
.v-input__control
|
|
.v-input__slot {
|
|
border: thin solid #2850da !important;
|
|
}
|
|
/*.productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
|
|
.v-input__append-inner {
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
padding-top: 5px;
|
|
border-left: 1px solid #2850da;
|
|
padding-left: 10px;
|
|
height: 34px;
|
|
}*/
|
|
/*.productpage-select-button.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
|
|
> .v-input__control
|
|
> .v-input__slot {
|
|
padding: 0 !important;
|
|
}
|
|
.productpage-select-button .v-select__slot {
|
|
border: thin solid #dcdddd;
|
|
height: 48px;
|
|
}
|
|
.productpage-select-button .v-select__slot:hover {
|
|
border: thin solid #2850da !important;
|
|
height: 48px;
|
|
}
|
|
.productpage-select-button .v-input__icon.v-input__icon--append {
|
|
padding-right: 15px;
|
|
}
|
|
.productpage-select-button.v-select.v-input--dense .v-select__selection--comma {
|
|
margin-left: 10px;
|
|
}
|
|
.productpage-select-button.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;
|
|
margin-top: 0;
|
|
border-left: 1px solid #dcdddd;
|
|
height: 48px;
|
|
padding-top: 12px;
|
|
padding-left: 15px;
|
|
}*/
|
|
</style>
|
|
<style src="./ProductDetailComponent.scss" lang="scss" scoped/>
|