1018 lines
38 KiB
Vue
1018 lines
38 KiB
Vue
<template>
|
|
<v-container class="white">
|
|
<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">
|
|
<v-col cols="1" class="d-none d-sm-block pr-4" v-if="productDetails.mediaGalleryEntries.length">
|
|
<div v-for="(productImage,index) in productDetails.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="productDetails.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="pr-md-8 pb-0" v-if="imagepath">
|
|
<v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
|
|
<h1 class="text-uppercase font-weight-300 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-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else>
|
|
<v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
|
|
<h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
|
|
</v-col>
|
|
<v-img :src="imageBasePathUrl + (this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:'')" @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="productDetails.mediaGalleryEntries.length">
|
|
<v-col
|
|
v-for="(productImage,index) in productDetails.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="productImage.name" :title="productImage.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="productDetails.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">
|
|
<h1
|
|
class="font-weight-300 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}}</h1>
|
|
<p
|
|
class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
|
|
>{{productDetails.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
|
|
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 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 )-->
|
|
<p
|
|
v-if="getCustomAttributeValue(productDetails.customAttribute,'lowest_price')"
|
|
class="body title-color-black"
|
|
>From ${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'lowest_price'), true)}} {{ productDetails.uom}}</p>
|
|
<div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
|
|
<div v-if="getCustomAttributeValue(productDetails.customAttribute,'special_price') ">
|
|
<s>${{priceFormatter( productDetails.price, true)}}</s>
|
|
<span
|
|
class="red--text mb-0"
|
|
>${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'special_price'), true)}}</span>
|
|
/ {{ productDetails.uom}}
|
|
</div>
|
|
<p
|
|
v-else
|
|
class="body title-color-black"
|
|
>${{priceFormatter(productDetails.price, true)}} / {{ productDetails.uom}}</p>
|
|
</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"
|
|
>
|
|
<div
|
|
v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-select
|
|
:items="qtyPriceOptions"
|
|
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
|
|
dense
|
|
attach
|
|
flat
|
|
solo
|
|
item-text="price"
|
|
item-value="qty"
|
|
single-line
|
|
v-model="selectedQty"
|
|
ref="selectedQty1"
|
|
background-color="transparent"
|
|
append-icon="mdi-plus"
|
|
>
|
|
<template v-slot:selection="data">
|
|
<span
|
|
class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
|
|
:class="hover || !isActive?'primary--text':'black--text'"
|
|
>{{data.item.qty}} ($ {{ data.item.price }} )</span>
|
|
</template>
|
|
<template v-slot:item="data">
|
|
<template>
|
|
<v-list-item-content @click="isActive = true">
|
|
<v-list-item-title
|
|
class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
|
|
>{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
|
|
</v-list-item-content>
|
|
</template>
|
|
</template>
|
|
</v-select>
|
|
</v-hover>
|
|
</div>
|
|
<div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '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="selectedQty2"
|
|
background-color="transparent"
|
|
append-icon="mdi-plus"
|
|
></v-select>
|
|
</div>
|
|
</v-col>
|
|
|
|
<v-col align="right" justify="right" cols="6" class="d-block d-sm-none pl-4 pb-0">
|
|
<div
|
|
v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-select
|
|
:items="qtyPriceOptions"
|
|
class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
|
|
dense
|
|
attach
|
|
flat
|
|
solo
|
|
item-text="price"
|
|
item-value="qty"
|
|
single-line
|
|
v-model="selectedQty"
|
|
ref="selectedQty3"
|
|
background-color="transparent"
|
|
append-icon="mdi-plus"
|
|
>
|
|
<template v-slot:selection="data">
|
|
<span
|
|
class="fontsize-14 d-block text-truncate ml-1 line-height-21 ls-n009 regular-font font-weight-400"
|
|
:class="hover || !isActive?'primary--text':'black--text'"
|
|
>{{data.item.qty}} ($ {{ data.item.price }} )</span>
|
|
</template>
|
|
<template v-slot:item="data">
|
|
<template>
|
|
<v-list-item-content @click="isActive = true">
|
|
<v-list-item-title
|
|
class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
|
|
>{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
|
|
</v-list-item-content>
|
|
</template>
|
|
</template>
|
|
</v-select>
|
|
</v-hover>
|
|
</div>
|
|
<div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<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
|
|
outlined
|
|
:class="hover?'primary--text':'black--text'"
|
|
v-model="selectedQty"
|
|
background-color="transparent"
|
|
ref="selectedQty4"
|
|
append-icon="mdi-plus"
|
|
></v-select>
|
|
</v-hover>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<!--<v-row>
|
|
<v-col cols="auto" class="pr-0 pt-0">
|
|
<div v-for="(colors,index) in productDetails.customAttribute" v-bind:key="index">
|
|
<div v-if="colors.attributeCode === 'color'">
|
|
<v-btn-toggle
|
|
v-for="(color,index) in colors.value"
|
|
v-bind:key="index"
|
|
v-model="selected"
|
|
:color="color"
|
|
group
|
|
rounded
|
|
>
|
|
<v-btn
|
|
elevation="0"
|
|
class="ml-0 mr-2"
|
|
@click="setValue(color)"
|
|
:color="color"
|
|
:value="color"
|
|
small
|
|
></v-btn>
|
|
</v-btn-toggle>
|
|
</div>
|
|
</div>
|
|
</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="addToCart(productDetails.sku,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(productDetails)"
|
|
>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="updateToCart(productDetails.name,productDetails.sku)"
|
|
>
|
|
<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-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,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</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 = process.env.VUE_APP_PERSONALIZE_URL;
|
|
const retailorId = process.env.VUE_APP_RETAILOR_ID;
|
|
import * as easings from "vuetify/es5/services/goto/easing-patterns";
|
|
import SnackbarComponent from "@/components/common/SnackbarComponent";
|
|
import { priceFormatter, getLable, customAttributeValue ,googleAanalytics,googleAanalyticsEvent, criteoForCurrentProduct ,setCategoryNameInLocal} from "@/services/util.service";
|
|
//import { getAuthUser } from "@/services/auth";
|
|
/* eslint-disable no-alert, no-console , no-debugger */
|
|
export default {
|
|
name: "ProductDetailsComponent",
|
|
props: ["productDetails","stockFlag","categoryId"],
|
|
components: { SnackbarComponent },
|
|
data: () => ({
|
|
productDefaultImage:require('@/assets/defaultProduct.jpg'),
|
|
updateProgress: "",
|
|
dropDownIcon: "mdi mdi-plus",
|
|
iconColor: "black--text",
|
|
isActive: true,
|
|
easings: Object.keys(easings),
|
|
snackbar: {
|
|
show: false,
|
|
message: null,
|
|
color: null,
|
|
timeout: 0
|
|
},
|
|
selectedQty: "",
|
|
blue: "primary",
|
|
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)" }
|
|
],
|
|
priceFormatter: priceFormatter,
|
|
/*numberOptions: [
|
|
{ qty: "1 ", callback: () => "1" },
|
|
{ qty: "2", callback: () => "2" },
|
|
{ qty: "3", callback: () => "3" }
|
|
]*/
|
|
}),
|
|
computed: {
|
|
imageBasePathUrl() {
|
|
return process.env.VUE_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 qtyPriceArray = this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"qty_price"
|
|
);
|
|
if(qtyPriceArray){
|
|
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;
|
|
}
|
|
vm.validPersonalisedProduct = true;
|
|
return list;
|
|
}else{
|
|
vm.validPersonalisedProduct = false;
|
|
}
|
|
return [];
|
|
},
|
|
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 "";
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
fetchInProgress: function() {
|
|
return this.$store.state.productOne.fetchInProgress;
|
|
},
|
|
fetchErrorMessage: function() {
|
|
return this.$store.state.productOne.errorMessage;
|
|
}
|
|
},
|
|
watch: {
|
|
productDetails() {
|
|
this.imagepath = this.productDetails.mediaGalleryEntries && this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:"";
|
|
criteoForCurrentProduct(this.productDetails.id);
|
|
}
|
|
/* qtyPriceOptions()
|
|
{
|
|
if(this.qtyPriceOptions.length > 0)
|
|
this.selectedQty=this.qtyPriceOptions[0];
|
|
}*/
|
|
},
|
|
methods: {
|
|
setAltImg() {
|
|
event.target.src =this.productDefaultImage
|
|
},
|
|
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
return customAttributeValue(customAttributes, attributeCode);
|
|
},
|
|
addToCart(sku,productDetails) {
|
|
let vm =this;
|
|
let qtyNew=this.selectedQty;
|
|
if (this.selectedQty) {
|
|
this.errorMessage = "";
|
|
if (this.userAuth) {
|
|
this.$store
|
|
.dispatch("userCartProduct/addToCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
ccid: null,
|
|
price: null,
|
|
personalizeDetails: null
|
|
})
|
|
.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/addToCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
ccid: null,
|
|
price: null,
|
|
personalizeDetails: null
|
|
})
|
|
.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 = "Please Select Quantity";
|
|
}
|
|
},
|
|
updateToCart(productName,sku) {
|
|
if (this.selectedQty) {
|
|
this.errorMessage = "";
|
|
if (this.userAuth) {
|
|
this.$store
|
|
.dispatch("userCartProduct/updateToCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
itemId: this.itemId,
|
|
ccid: null,
|
|
price: null,
|
|
personalizeDetails: null
|
|
})
|
|
.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/updateToCart", {
|
|
sku: sku,
|
|
qty: this.selectedQty,
|
|
itemId: this.itemId,
|
|
ccid: null,
|
|
price: null,
|
|
personalizeDetails: null
|
|
})
|
|
.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(productDetails) {
|
|
debugger
|
|
// window.open(`${personlizeUrl}/product/${this.sku}`, "_self");
|
|
if (
|
|
this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"builder_version"
|
|
) === "1.0" ||
|
|
this.getCustomAttributeLable(
|
|
this.productDetails.customAttribute,
|
|
"builder_version"
|
|
) === ""
|
|
) {
|
|
googleAanalyticsEvent('personalize_cc', 'ecommerce', productDetails);
|
|
this.$router.push({
|
|
name: "CraneConnection",
|
|
params: {
|
|
retailorId: retailorId,
|
|
quantity: this.selectedQty,
|
|
itemNumber: this.sku
|
|
}
|
|
});
|
|
} else {
|
|
let itemCode = this.itemId ? this.itemId : "new";
|
|
googleAanalyticsEvent('personalize_builder', 'ecommerce', productDetails);
|
|
debugger
|
|
if(this.categoryId)
|
|
{
|
|
window.open(
|
|
`${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}?categoryId=${this.categoryId}`,
|
|
"_self"
|
|
);
|
|
}
|
|
else
|
|
{
|
|
window.open(
|
|
`${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
|
|
"_self"
|
|
);
|
|
}
|
|
|
|
}
|
|
},
|
|
setSelected(part, index) {
|
|
this.imagepath = part;
|
|
this.selected = index;
|
|
},
|
|
pageScrollUp() {
|
|
if (this.$refs.divOne)
|
|
this.$vuetify.goTo(this.$refs.divOne, {
|
|
duration: 300,
|
|
easing: "easeInOutCubic"
|
|
});
|
|
this.updateProgress = true;
|
|
setTimeout(() => {
|
|
this.updateProgress = false;
|
|
}, 3000);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.pageScrollUp();
|
|
},
|
|
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;
|
|
}*/
|
|
.v-menu__content {
|
|
box-shadow: none !important;
|
|
outline: 1px solid #2850da !important;
|
|
//border-right: 1px solid #2850da !important;
|
|
//border-bottom: 1px solid #2850da !important;
|
|
border-radius: 0px !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__append-inner .v-input__icon .v-icon {
|
|
font-size:20px !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-text-field.v-text-field--solo
|
|
.v-input__append-inner{
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
padding-top: 7px;
|
|
border-left: 1px solid #8b8b8b;
|
|
padding-left: 10px;
|
|
height: 37px;
|
|
}*/
|
|
.productpage-select-button.v-text-field.v-text-field--solo.v-select--is-menu-active .v-input__append-inner{
|
|
-ms-flex-item-align: center;
|
|
align-self: center;
|
|
padding-top: 7px;
|
|
border-left: 1px solid #2850da;
|
|
padding-left: 12px !important;
|
|
height: 37px;
|
|
}
|
|
.productpage-select-button .v-input__control .v-select__slot .v-select__selections{
|
|
justify-content: center;
|
|
}
|
|
.productpage-select-button.v-select.v-text-field input{
|
|
display:none;
|
|
}
|
|
.productpage-select-button .v-input__control .v-input__slot{
|
|
padding-left:0px !important;
|
|
}
|
|
//productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo.v-input__append-inner
|
|
/*.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"/> |