fixes ui
This commit is contained in:
rakesh
parent
03ad966265
commit
b30e6d0f2a
|
|
@ -3,8 +3,7 @@
|
||||||
<v-snackbar
|
<v-snackbar
|
||||||
:color="snackbar.color"
|
:color="snackbar.color"
|
||||||
v-model="snackbar.show"
|
v-model="snackbar.show"
|
||||||
right
|
location="right top"
|
||||||
top
|
|
||||||
:timeout="snackbar.timeout"
|
:timeout="snackbar.timeout"
|
||||||
>{{ snackbar.message }}</v-snackbar>
|
>{{ snackbar.message }}</v-snackbar>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
@ -13,14 +12,5 @@
|
||||||
export default {
|
export default {
|
||||||
name: "SnackbarComponent",
|
name: "SnackbarComponent",
|
||||||
props:["snackbar"],
|
props:["snackbar"],
|
||||||
data: () => ({
|
|
||||||
}),
|
|
||||||
components: {},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container class="py-0 my-0">
|
|
||||||
<v-dialog
|
|
||||||
v-model="subscriptionDialog"
|
|
||||||
:max-width="$vuetify.display.xlOnly?1100:800"
|
|
||||||
:scrollable="false"
|
|
||||||
:overlay-opacity="0.5"
|
|
||||||
>
|
|
||||||
<v-card
|
|
||||||
flat
|
|
||||||
tile
|
|
||||||
:img="isDesktop? `http://media.crane.com/9441/popup_v3.jpg` : ''"
|
|
||||||
:class="isDesktop?'':'dialog-background'"
|
|
||||||
>
|
|
||||||
<v-card-title class="px-2 px-sm-4 pb-0 pt-0 pt-sm-4">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col cols="12" class="d-flex justify-end">
|
|
||||||
<v-btn @click="subscriptionDialog=false" class="dailog-close-button" icon>
|
|
||||||
<v-icon :large="isDesktop" :small="!isDesktop">mdi-window-close</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text class="pb-1 pb-sm-3 px-2 px-sm-4">
|
|
||||||
<v-row no-gutters class="mx-0">
|
|
||||||
<v-col cols="12" sm="6">
|
|
||||||
<v-row align="center" class="px-sm-6 px-2 pa-0 ma-0">
|
|
||||||
<v-form ref="subscribeForm" v-model="footerFormValid">
|
|
||||||
<div class="pa-md-1">
|
|
||||||
<v-col cols="12" class="pt-0 mb-sm-4">
|
|
||||||
<span
|
|
||||||
class="primary--text h3 font-weight-regular text-uppercase"
|
|
||||||
>{{stayInTouch}}</span>
|
|
||||||
<p
|
|
||||||
class="subscribe-fontcolor-black-darken body-font ls-n10 mb-0 pt-2 pt-sm-4"
|
|
||||||
>Be the first to know about special promotions, new collections and more when you sign up for our emails!</p>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" class="pb-0 pt-2 pt-sm-3 d-md-block">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-text-field
|
|
||||||
@blur="resetEmailValidation"
|
|
||||||
label="Your Email"
|
|
||||||
id="emailTextBox"
|
|
||||||
class="footerpage_email_textbox fontsize-14 regular-font"
|
|
||||||
solo
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
:rules="emailRules"
|
|
||||||
tile
|
|
||||||
v-model="email"
|
|
||||||
></v-text-field>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-btn
|
|
||||||
depressed
|
|
||||||
:block="!isDesktop"
|
|
||||||
color="primary"
|
|
||||||
class="white--text mr-n3 text-uppercase footerpage_submit_email_btn body-font"
|
|
||||||
@click="submit()"
|
|
||||||
>SUBMIT</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</div>
|
|
||||||
</v-form>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row v-if="!isDesktop" class="regular-font subscribe-fontcolor-black-darken mx-0 px-sm-6 px-2">
|
|
||||||
<v-col cols="12" sm="3">
|
|
||||||
<router-link to class="subscribe-fontcolor-black-darken">
|
|
||||||
<span @click="subscriptionDialog=false">No, thank you</span>
|
|
||||||
</router-link>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="9" class="pt-0 pt-sm-3">
|
|
||||||
By signing up, you agree to our and
|
|
||||||
<router-link
|
|
||||||
to
|
|
||||||
@click.native="goToLink('https://www.crane.com/privacy-policy')"
|
|
||||||
title="Privacy Policy"
|
|
||||||
class="subscribe-fontcolor-black-darken"
|
|
||||||
>
|
|
||||||
<span>Privacy Policy</span>
|
|
||||||
</router-link>and
|
|
||||||
<router-link
|
|
||||||
to
|
|
||||||
@click.native="goToLink('https://www.crane.com/terms-of-use')"
|
|
||||||
title="Terms of Service"
|
|
||||||
class="subscribe-fontcolor-black-darken"
|
|
||||||
>
|
|
||||||
<span>Terms of Service</span>
|
|
||||||
</router-link>.
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
<v-row v-if="isDesktop" class="regular-font subscribe-fontcolor-black-darken bottom-div-background mx-0">
|
|
||||||
<v-col cols="12" sm="3">
|
|
||||||
<router-link to class="subscribe-fontcolor-black-darken">
|
|
||||||
<span @click="subscriptionDialog=false">No, thank you</span>
|
|
||||||
</router-link>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="9" class="pt-0 pt-sm-3">
|
|
||||||
By signing up, you agree to our and
|
|
||||||
<router-link to
|
|
||||||
@click.native="goToLink('https://www.crane.com/privacy-policy')" title="Privacy Policy" class="subscribe-fontcolor-black-darken">
|
|
||||||
<span>Privacy Policy</span>
|
|
||||||
</router-link>
|
|
||||||
and
|
|
||||||
<router-link to
|
|
||||||
@click.native="goToLink('https://www.crane.com/terms-of-use')" title="Terms of Service" class="subscribe-fontcolor-black-darken">
|
|
||||||
<span>Terms of Service</span>
|
|
||||||
</router-link>.
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-dialog>
|
|
||||||
<SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
/*eslint-disable*/
|
|
||||||
import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
|
|
||||||
export default {
|
|
||||||
name: "SubscriptionDialog",
|
|
||||||
data: () => ({
|
|
||||||
subscriptionDialog: false,
|
|
||||||
footerFormValid: false,
|
|
||||||
emailRules: [
|
|
||||||
(v) => !!v || "Email is required",
|
|
||||||
(v) => /.+@.+\..+/.test(v) || "Email must be valid",
|
|
||||||
],
|
|
||||||
stayInTouch: "LET'S STAY IN TOUCH",
|
|
||||||
email: null,
|
|
||||||
snackbar: {
|
|
||||||
show: false,
|
|
||||||
message: null,
|
|
||||||
color: null,
|
|
||||||
timeout: 0,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
components: { SnackbarComponent },
|
|
||||||
computed: {
|
|
||||||
isDesktop: function () {
|
|
||||||
return this.$vuetify.display.xsOnly ? false : true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goToLink(pageLink) {
|
|
||||||
window.location.replace(pageLink);
|
|
||||||
//} else {
|
|
||||||
//window.open(routeSecond, "_self");
|
|
||||||
//}
|
|
||||||
},
|
|
||||||
submit: function () {
|
|
||||||
if (this.$refs.subscribeForm.validate()) {
|
|
||||||
this.$store
|
|
||||||
.dispatch("emailSubscriber/fetchEmailSubscriber", {
|
|
||||||
email: this.email,
|
|
||||||
})
|
|
||||||
.then((status) => {
|
|
||||||
if (status === "you have successfully subscribed.") {
|
|
||||||
this.snackbar = {
|
|
||||||
message: status,
|
|
||||||
color: "success",
|
|
||||||
show: true,
|
|
||||||
timeout: 5000,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
this.snackbar = {
|
|
||||||
message: status,
|
|
||||||
color: "error",
|
|
||||||
show: true,
|
|
||||||
timeout: 5000,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
this.snackbar = {
|
|
||||||
message: error.message,
|
|
||||||
color: "error",
|
|
||||||
show: true,
|
|
||||||
timeout: 5000,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
this.email = null;
|
|
||||||
this.$refs.subscribeForm.resetValidation();
|
|
||||||
this.subscriptionDialog = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetEmailValidation() {
|
|
||||||
this.$refs.subscribeForm.resetValidation();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// setTimeout(() => {
|
|
||||||
// let userVisitCount= localStorage.getItem("cr_userVisitCount");
|
|
||||||
// if (!userVisitCount||userVisitCount == 1) this.subscriptionDialog = true;
|
|
||||||
// else this.subscriptionDialog = false;
|
|
||||||
// }, 4000);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.bottom-div-background {
|
|
||||||
background: rgba(217 218 221 / 20%);
|
|
||||||
}
|
|
||||||
.dialog-background {
|
|
||||||
background-color: #97cfe3 !important;
|
|
||||||
}
|
|
||||||
.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.dailog-close-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.subscribe-fontcolor-black-darken {
|
|
||||||
color: #1d1d1d !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.disabled {
|
|
||||||
color: #2c50da;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-color-black {
|
|
||||||
color: #B7B7B7;
|
|
||||||
}
|
|
||||||
|
|
@ -1,153 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-breadcrumbs
|
|
||||||
:items="breadsCrumbItems"
|
|
||||||
class="apps-breadcrumb pl-0"
|
|
||||||
large
|
|
||||||
divider="/"
|
|
||||||
>
|
|
||||||
<template slot="item" slot-scope="props">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
:class="[props.item.disabled ? 'disabled' : 'text-color-black']"
|
|
||||||
class="text-decoration-none"
|
|
||||||
@click.prevent="categoryProducts(props.item.href)"
|
|
||||||
>{{ props.item.text }}</a
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</v-breadcrumbs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
customAttributeValue,
|
|
||||||
goToCategoryPageRouting,
|
|
||||||
getCategoryOne,
|
|
||||||
// googleAanalyticsEventCategory,
|
|
||||||
} from "@/services/util.service";
|
|
||||||
import { mapState } from "vuex";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "BreadcrumbComponent",
|
|
||||||
props: ["breadcrumbVal", "search"],
|
|
||||||
data: () => ({
|
|
||||||
breadsCrumbItems: [],
|
|
||||||
subCategory: null,
|
|
||||||
breadsCrumbArray: [],
|
|
||||||
newArray: [],
|
|
||||||
}),
|
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
searchTerms: (state) => state.catalogBrowser.searchTerms,
|
|
||||||
keywordsSearch: (state) => state.catalogBrowser.searchTerms.keywords,
|
|
||||||
}),
|
|
||||||
categoryDetailsList: function () {
|
|
||||||
return this.$store.state.headerCategoryList.categoryDetails;
|
|
||||||
},
|
|
||||||
categoryListIdWise: function () {
|
|
||||||
return this.$store.state.headerCategoryList.categoryListIdWise;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
keywordsSearch() {
|
|
||||||
this.createBreadsCrumbArray();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
||||||
return customAttributeValue(customAttributes, attributeCode);
|
|
||||||
},
|
|
||||||
/* eslint-disable no-alert, no-console , no-debugger */
|
|
||||||
createBreadsCrumbArray() {
|
|
||||||
this.newArray = [];
|
|
||||||
this.breadsCrumbItems = [];
|
|
||||||
if (this.breadcrumbVal == "keyword") {
|
|
||||||
let obj = {
|
|
||||||
text: "Search results for : '" + this.searchTerms.keywords + "'",
|
|
||||||
href: "",
|
|
||||||
disabled: true,
|
|
||||||
};
|
|
||||||
this.newArray.push(obj);
|
|
||||||
} else {
|
|
||||||
let newObj = this.getParentId(this.breadcrumbVal);
|
|
||||||
if (newObj.length > 0) {
|
|
||||||
let obj = {
|
|
||||||
text: newObj[0].n,
|
|
||||||
href: newObj[0].id,
|
|
||||||
disabled: true,
|
|
||||||
};
|
|
||||||
this.newArray.push(obj);
|
|
||||||
while (newObj[0].pid != 2) {
|
|
||||||
newObj = this.getParentId(newObj[0].pid);
|
|
||||||
obj = {
|
|
||||||
text: newObj[0].n,
|
|
||||||
href: newObj[0].id,
|
|
||||||
disabled: false,
|
|
||||||
};
|
|
||||||
this.newArray.push(obj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.newArray.push({
|
|
||||||
text: "Home",
|
|
||||||
href: "Home",
|
|
||||||
disabled: false,
|
|
||||||
});
|
|
||||||
let filterArray = this.newArray.reverse();
|
|
||||||
this.breadsCrumbItems = filterArray;
|
|
||||||
},
|
|
||||||
|
|
||||||
getParentId(categoryId) {
|
|
||||||
return this.categoryListIdWise.filter((element) => {
|
|
||||||
return element.id === categoryId;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async categoryProducts(categoryId) {
|
|
||||||
this.$store.dispatch("headerCategoryList/setCategoryId", categoryId);
|
|
||||||
localStorage.removeItem("cr_subCategoryItemId");
|
|
||||||
let data = localStorage.getItem("cr_subCategoryId");
|
|
||||||
if (data >= categoryId) {
|
|
||||||
localStorage.removeItem("cr_subCategoryId");
|
|
||||||
}
|
|
||||||
if (categoryId === "Home") {
|
|
||||||
this.$router.push({
|
|
||||||
name: "HomePage",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (this.categoryDetailsList) {
|
|
||||||
let categoryOne = await getCategoryOne(
|
|
||||||
this.categoryDetailsList,
|
|
||||||
categoryId
|
|
||||||
);
|
|
||||||
if (categoryOne) {
|
|
||||||
this.$store.dispatch("layout/setHeroContent", categoryOne);
|
|
||||||
console.log(categoryOne.n, categoryOne);
|
|
||||||
let vm = this;
|
|
||||||
// googleAanalyticsEventCategory("browse_category", "ecommerce", {
|
|
||||||
// name: categoryOne.n,
|
|
||||||
// id: categoryId,
|
|
||||||
// });
|
|
||||||
goToCategoryPageRouting(vm, categoryOne);
|
|
||||||
this.$store
|
|
||||||
.dispatch("catalogBrowser/search", {
|
|
||||||
fullCatalog: window.craneCatalog,
|
|
||||||
keywords: "",
|
|
||||||
filters: [{ label: "Category", prop: "ci", value: categoryId }],
|
|
||||||
pageNumber: 1,
|
|
||||||
pageSize: 9,
|
|
||||||
sortBy: "position",
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
error;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.createBreadsCrumbArray();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style src="./Breadcrumb.scss" lang="scss" scoped />
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
.primary--text {
|
|
||||||
color: #2c50da !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-panel-heading:hover {
|
|
||||||
color: #CCB7FF!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-panel-subheading:hover {
|
|
||||||
color: #CCB7FF!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-panel-heading:hover :before {
|
|
||||||
color: #CCB7FF!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-panel-icon.filter-panel-heading:hover :before {
|
|
||||||
color: #CCB7FF!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-panel-icon.filter-panel-heading :before {
|
|
||||||
color: #2c50da !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expansion-text-black {
|
|
||||||
color: #1d1d1d!important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-row class="mt-12" justify="center" v-if="inProgress">
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
v-for="(i, index) in 4"
|
|
||||||
v-bind:key="index"
|
|
||||||
lg="12"
|
|
||||||
md="12"
|
|
||||||
sm="12"
|
|
||||||
cols="12"
|
|
||||||
class="pr-lg-3 cursor-pointer"
|
|
||||||
>
|
|
||||||
<v-skeleton-loader type="list-item-two-line"></v-skeleton-loader>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-expansion-panels
|
|
||||||
v-model="filterPanel"
|
|
||||||
multiple
|
|
||||||
flat
|
|
||||||
accordion
|
|
||||||
v-else-if="filterList"
|
|
||||||
>
|
|
||||||
<v-expansion-panel
|
|
||||||
tile
|
|
||||||
class="transparent-background first-v-expansion-panel filter-expansion-panel"
|
|
||||||
v-for="(attribute, index) in filterList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<v-expansion-panel-header
|
|
||||||
class="fontsize-14 body ls-n09 color-1d text-uppercase px-3 py-0 my-n1 expansion-text-black"
|
|
||||||
:class="attribute.label == checkName(attribute.label ) ?'primary--text filter-panel-icon':'expansion-text-black'"
|
|
||||||
v-if="attribute.counts.length"
|
|
||||||
>{{ attribute.label }}
|
|
||||||
<template v-slot:actions>
|
|
||||||
<v-icon class="expansion-text-black">$expand</v-icon>
|
|
||||||
</template>
|
|
||||||
</v-expansion-panel-header>
|
|
||||||
<v-expansion-panel-content class="pt-2">
|
|
||||||
<ul
|
|
||||||
v-for="(option, index) in attribute.counts"
|
|
||||||
:key="index"
|
|
||||||
class="pl-0 filter-expansion-panel-list"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="cursor-pointer filter-panel-subheading pb-1"
|
|
||||||
:class="option.value == checkValue(option.value) ?'primary--text':'expansion-text-black'"
|
|
||||||
v-if="option.value"
|
|
||||||
@click="createFilter(
|
|
||||||
attribute.label,
|
|
||||||
attribute.prop,
|
|
||||||
option.value)"
|
|
||||||
> {{ option.value}}({{option.count}})
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</v-expansion-panel-content>
|
|
||||||
</v-expansion-panel>
|
|
||||||
</v-expansion-panels>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
/* eslint-disable no-alert, no-console , no-debugger */
|
|
||||||
export default {
|
|
||||||
name: "FilterComponent",
|
|
||||||
data: () => ({
|
|
||||||
filterPanel: []
|
|
||||||
}),
|
|
||||||
props:["filterList","inProgress"],
|
|
||||||
computed: {
|
|
||||||
enabledFilters(){
|
|
||||||
return this.$store.state.catalogBrowser.enabledFilters;
|
|
||||||
},
|
|
||||||
categoryId() {
|
|
||||||
return this.$route.meta.id;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
enabledFilters(){
|
|
||||||
this.showSelectedPanel();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async createFilter(label, prop,value) {
|
|
||||||
this.$emit("applyNewFilter",{label:label, prop:prop,value:value});
|
|
||||||
},
|
|
||||||
checkName(attribute) {
|
|
||||||
let data = this.enabledFilters.filter(obj => obj.label === attribute);
|
|
||||||
return data.length?data[0].label:"";
|
|
||||||
},
|
|
||||||
checkValue(attributeValue) {
|
|
||||||
let data = this.enabledFilters.filter(obj => obj.value === attributeValue);
|
|
||||||
return data.length?data[0].value:"";
|
|
||||||
},
|
|
||||||
showSelectedPanel() {
|
|
||||||
this.filterPanel = [];
|
|
||||||
if (this.enabledFilters.length > 0) {
|
|
||||||
for (let i = 0; i < this.enabledFilters.length; i++) {
|
|
||||||
this.filterList.filter(
|
|
||||||
(x,index) => {
|
|
||||||
if(x.label === this.enabledFilters[i].label)
|
|
||||||
this.filterPanel.push(index);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created(){
|
|
||||||
this.showSelectedPanel();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style src="./FilterComponent.scss" lang="scss" scoped/>
|
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="homepage-overflow-x-hidden white">
|
|
||||||
<!--<v-container v-show="callOutsBlock.length" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
|
|
||||||
<v-col class="px-md-5 px-0">
|
|
||||||
<div v-html="getBlockContent()"></div>
|
|
||||||
</v-col>ImageBlock-01
|
|
||||||
</v-container>-->
|
|
||||||
<div class="homepage-overflow-x-hidden white" v-if="pageContent.length">
|
|
||||||
<div v-html="getPageContent()"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
goToCategoryPageRouting,
|
|
||||||
getCategoryOne,
|
|
||||||
} from "@/services/util.service";
|
|
||||||
export default {
|
|
||||||
name: "GiftGuideComponent",
|
|
||||||
components: {},
|
|
||||||
computed: {
|
|
||||||
pageContent: function () {
|
|
||||||
return this.$store.state.layout.pageContent;
|
|
||||||
},
|
|
||||||
imgHeadTextFirst: function () {
|
|
||||||
return "Downton Abbey stationery".replace(/(S+s*){1,2}/g, "$&</br>");
|
|
||||||
},
|
|
||||||
imgHeadTextSecond: function () {
|
|
||||||
return "Vera Wang Papers".replace(/(S+s*){1,2}/g, "$&</br>");
|
|
||||||
},
|
|
||||||
blockOne() {
|
|
||||||
return this.$store.state.block.footerBlock;
|
|
||||||
},
|
|
||||||
callOutsBlock: function () {
|
|
||||||
return this.$store.state.layout.cmsBlockContent;
|
|
||||||
},
|
|
||||||
categoryDetailsList: function () {
|
|
||||||
return this.$store.state.headerCategoryList.categoryDetails;
|
|
||||||
},
|
|
||||||
/* pageId: function(){
|
|
||||||
return this.$route.meta.pid
|
|
||||||
}*/
|
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
categoryId: 10,
|
|
||||||
calloutsblockId: 9,
|
|
||||||
pageUrlKey: "home-page-content",
|
|
||||||
//pageId:150
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
/* goToLink(link) {
|
|
||||||
window.open(link, "_self");
|
|
||||||
},*/
|
|
||||||
getPageContent() {
|
|
||||||
if (this.pageContent.length) {
|
|
||||||
let data = this.pageContent.filter((element) => {
|
|
||||||
return element.identifier === "gift-guide";
|
|
||||||
});
|
|
||||||
if (data.length > 0) {
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
|
|
||||||
},
|
|
||||||
getBlockContent() {
|
|
||||||
if (this.callOutsBlock.length) {
|
|
||||||
let data = this.callOutsBlock.filter((element) => {
|
|
||||||
return element.id === this.calloutsblockId;
|
|
||||||
});
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
routeToPage(pageName) {
|
|
||||||
if (pageName == "CategoryPage") {
|
|
||||||
let vm = this;
|
|
||||||
goToCategoryPageRouting(vm, { n: "Stationery", id: 10 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
goToPageRoutePage(pageName) {
|
|
||||||
this.$router
|
|
||||||
.push({
|
|
||||||
name: pageName,
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
error;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
initialLink() {
|
|
||||||
return import.meta.env.VITE_APP_HOME_PAGE_URL;
|
|
||||||
},
|
|
||||||
async goToPage(main, sub, child, categoryId) {
|
|
||||||
let categoryOne = await getCategoryOne(
|
|
||||||
this.categoryDetailsList,
|
|
||||||
categoryId
|
|
||||||
);
|
|
||||||
let vm = this;
|
|
||||||
goToCategoryPageRouting(vm, categoryOne);
|
|
||||||
},
|
|
||||||
goToLink(pageLink) {
|
|
||||||
window.location.replace(pageLink);
|
|
||||||
//} else {
|
|
||||||
//window.open(routeSecond, "_self");
|
|
||||||
//}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
// this.$store.dispatch("block/fetchOne",10)
|
|
||||||
//this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
|
|
||||||
//this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.gift-guide-hero-image {
|
|
||||||
height: 62.5%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.gift-guide-featured-img-height-500 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.gift-guide-content-maxwidth-750 {
|
|
||||||
max-width: 750px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-guide-row {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
//width:100%;
|
|
||||||
}
|
|
||||||
.gift-guide-block {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
//width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-guide-col-6 {
|
|
||||||
width: 50%;
|
|
||||||
display: block;
|
|
||||||
margin-top: auto;
|
|
||||||
margin-bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-guide-moss-red-block {
|
|
||||||
background-color: #C53C44;
|
|
||||||
}
|
|
||||||
.gift-guide-pink-text-block {
|
|
||||||
background-color: #FFEAEA;
|
|
||||||
}
|
|
||||||
.gift-guide-text {
|
|
||||||
color: #FFEAEA;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
.gift-guide-red-text {
|
|
||||||
color: #C53C44;
|
|
||||||
}
|
|
||||||
.gift-guide-blue-link {
|
|
||||||
color: #2544dd;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.gift-guide-col-6 {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-guide-row {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift-guide-link {
|
|
||||||
color: #2544dd !important;
|
|
||||||
& .home-page-icon {
|
|
||||||
background-image: url("@/assets/blue-arrow.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.gift-guide-link:hover {
|
|
||||||
color: #ccb7ff !important;
|
|
||||||
& .home-page-icon {
|
|
||||||
background-image: url("@/assets/hover-arrow.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
/*.title-color {
|
|
||||||
color: #000000;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.homepage-overflow-x-hidden {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage-featured-img-height-500 {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage-background-color-f3f2f2 {
|
|
||||||
background: #f3f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage-background-color-eb7525 {
|
|
||||||
background: #eb7525;
|
|
||||||
}
|
|
||||||
.homepage-background-color-2d5d84 {
|
|
||||||
background: #2d5d84;
|
|
||||||
}
|
|
||||||
.homepage-line {
|
|
||||||
border-bottom: 1px solid #3d4973;
|
|
||||||
width: 1.87rem;
|
|
||||||
margin: 1.53rem 0rem 1.21rem 0rem;
|
|
||||||
size: 1.87rem;
|
|
||||||
}
|
|
||||||
// .homepage-contentlink-color{
|
|
||||||
// color:#CCB7FF !important;
|
|
||||||
// }
|
|
||||||
.homepage-bottom-margin-64 {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage-font-color-FFC3D7 {
|
|
||||||
color: #FFC3D7;
|
|
||||||
}
|
|
||||||
.homepage-max-width-600 {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
.homepage-business-block-image{
|
|
||||||
max-height:595px;
|
|
||||||
min-height:350px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.homepage-featured-img-height-500 {
|
|
||||||
height: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.homepage-content-min600-max764 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@media (min-width:600px) and (max-width:764px) {
|
|
||||||
.homepage-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.homepage-content-min600-max764 {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.homepage-route-link:active{
|
|
||||||
color: #2c50da !important;
|
|
||||||
& .homepage-route-icon {
|
|
||||||
color:#2c50da !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-right-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.home-right-hover-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.homepage-route-link:active .home-right-hover-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.home-right-white-icon{
|
|
||||||
background-image: url('@/assets/white-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.home-right-dark-icon{
|
|
||||||
background-image: url('@/assets/strong-blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
|
|
@ -1,433 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="homepage-overflow-x-hidden white">
|
|
||||||
<!--<v-container v-show="callOutsBlock.length" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
|
|
||||||
<v-col class="px-md-5 px-0">
|
|
||||||
<div v-html="getBlockContent()"></div>
|
|
||||||
</v-col>ImageBlock-01
|
|
||||||
</v-container>-->
|
|
||||||
<div class="homepage-overflow-x-hidden white" v-if="homePageContent.length">
|
|
||||||
<div v-html="getHomePageContent()">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PostScriptBlog />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
goToCategoryPageRouting,
|
|
||||||
} from "@/services/util.service";
|
|
||||||
import PostScriptBlog from "@/components/retailer/home/PostScriptBlog";
|
|
||||||
export default {
|
|
||||||
name: "HomeComponent",
|
|
||||||
components: {
|
|
||||||
PostScriptBlog
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
homePageContent: function() {
|
|
||||||
return this.$store.state.layout.pageContent;
|
|
||||||
},
|
|
||||||
imgHeadTextFirst: function() {
|
|
||||||
return "Downton Abbey stationery".replace(/(\S+\s*){1,2}/g, "$&</br>");
|
|
||||||
},
|
|
||||||
imgHeadTextSecond: function() {
|
|
||||||
return "Vera Wang Papers".replace(/(\S+\s*){1,2}/g, "$&</br>");
|
|
||||||
},
|
|
||||||
blockOne() {
|
|
||||||
return this.$store.state.block.footerBlock;
|
|
||||||
},
|
|
||||||
callOutsBlock: function() {
|
|
||||||
return this.$store.state.layout.cmsBlockContent;
|
|
||||||
},
|
|
||||||
categoryDetailsList: function() {
|
|
||||||
return this.$store.state.headerCategoryList.categoryDetails;
|
|
||||||
},
|
|
||||||
/* pageId: function(){
|
|
||||||
return this.$route.meta.pid
|
|
||||||
}*/
|
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
categoryId: 10,
|
|
||||||
calloutsblockId: 9,
|
|
||||||
pageUrlKey:'home-page-content',
|
|
||||||
//pageId:150
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
/* goToLink(link) {
|
|
||||||
window.open(link, "_self");
|
|
||||||
},*/
|
|
||||||
getHomePageContent(){
|
|
||||||
if (this.homePageContent.length) {
|
|
||||||
let data = this.homePageContent.filter(element=>{
|
|
||||||
return element.identifier === "home-page-content"});
|
|
||||||
if(data.length > 0){
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
|
|
||||||
},
|
|
||||||
getBlockContent() {
|
|
||||||
if (this.callOutsBlock.length) {
|
|
||||||
let data = this.callOutsBlock.filter(element => {
|
|
||||||
return element.id === this.calloutsblockId;
|
|
||||||
});
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
routeToPage(pageName) {
|
|
||||||
if (pageName == "CategoryPage") {
|
|
||||||
let vm = this;
|
|
||||||
goToCategoryPageRouting(vm, {n:"Stationery",id:10});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
goToPageRoutePage(pageName) {
|
|
||||||
this.$router
|
|
||||||
.push({
|
|
||||||
name: pageName
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
error;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
initialLink() {
|
|
||||||
return import.meta.env.VITE_APP_HOME_PAGE_URL;
|
|
||||||
},
|
|
||||||
/* async goToPage(main, sub, child, categoryId) {
|
|
||||||
let categoryOne = await getCategoryOne(
|
|
||||||
this.categoryDetailsList,
|
|
||||||
categoryId
|
|
||||||
);
|
|
||||||
let vm = this;
|
|
||||||
goToCategoryPageRouting(vm, categoryOne);
|
|
||||||
},*/
|
|
||||||
goToLink(pageLink) {
|
|
||||||
window.location.replace(pageLink);
|
|
||||||
//} else {
|
|
||||||
//window.open(routeSecond, "_self");
|
|
||||||
//}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.onload = function() {
|
|
||||||
if(document.getElementById("imgTarget")){
|
|
||||||
var x = document.getElementById("imgTarget").offsetWidth;
|
|
||||||
document.getElementById("imgTarget").style.height = x + "px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.onresize = function() {
|
|
||||||
if(document.getElementById("imgTarget")){
|
|
||||||
var x = document.getElementById("imgTarget").offsetWidth;
|
|
||||||
document.getElementById("imgTarget").style.height = x + "px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// this.$store.dispatch("block/fetchOne",10)
|
|
||||||
//this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
|
|
||||||
//this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
#imgTarget {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.home-page-hero-image{
|
|
||||||
height:62.5%;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.home-page-mobile-hero-image{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.home-page-top-margin-56{
|
|
||||||
margin-top:56px;
|
|
||||||
}
|
|
||||||
.home-page-link-block{
|
|
||||||
display:contents !important;
|
|
||||||
}
|
|
||||||
.home-page-hero-button{
|
|
||||||
border: thin solid #fff !important;
|
|
||||||
max-width:212.56px;
|
|
||||||
padding-top:9px;
|
|
||||||
padding-bottom:9px;
|
|
||||||
background-color: #fff;
|
|
||||||
opacity: 0.9;
|
|
||||||
color:#404040;
|
|
||||||
font-family: 'Whyte-Book', sans-serif;
|
|
||||||
letter-spacing: 1.42857px;
|
|
||||||
}
|
|
||||||
.home-page-hero-button:hover{
|
|
||||||
border: thin solid #2c50da !important;
|
|
||||||
max-width:212.56px;
|
|
||||||
padding-top:9px;
|
|
||||||
padding-bottom:9px;
|
|
||||||
background-color: #2c50da ;
|
|
||||||
color:#ffffff;
|
|
||||||
opacity: 0.9;
|
|
||||||
font-family: 'Whyte-Book', sans-serif;
|
|
||||||
letter-spacing: 1.42857px;
|
|
||||||
}
|
|
||||||
.home-page-mobile-hero-text{
|
|
||||||
color: #404040!important;
|
|
||||||
}
|
|
||||||
.homepage-business-block-image{
|
|
||||||
max-height:595px;
|
|
||||||
min-height:350px;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.homepage-featured-img-height-500 {
|
|
||||||
height: 500px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.home-page-hero-text {
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.homepage-max-width-600 {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
.home-page-col-12{
|
|
||||||
width: 100%;
|
|
||||||
display:flex;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.home-page-row{
|
|
||||||
display:flex;
|
|
||||||
height:100%;
|
|
||||||
//width:100%;
|
|
||||||
}
|
|
||||||
.homepage-font-color-FFC3D7 {
|
|
||||||
color: #FFC3D7;
|
|
||||||
}
|
|
||||||
.homepage-background-color-eb7525 {
|
|
||||||
background: #eb7525;
|
|
||||||
}
|
|
||||||
.homepage-background-color-f3f2f2 {
|
|
||||||
background: #f3f2f2;
|
|
||||||
}
|
|
||||||
.home-page-col-6{
|
|
||||||
width: 50%;
|
|
||||||
display: block;
|
|
||||||
//margin-top:auto;
|
|
||||||
// margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-craft-col-6{
|
|
||||||
width: 50%;
|
|
||||||
display: grid;
|
|
||||||
//margin-top:auto;
|
|
||||||
// margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-explore-col-8{
|
|
||||||
width: 66.66%;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
.home-page-explore-col-4{
|
|
||||||
width: 33.33%;
|
|
||||||
display: grid;
|
|
||||||
//margin-top:auto;
|
|
||||||
//margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-craft-link{
|
|
||||||
color: #2d5d84 !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/strong-blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-craft-link:hover{
|
|
||||||
color: #CCB7FF !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-white-link{
|
|
||||||
color: #ffffff !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/white-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-white-link:hover{
|
|
||||||
color: #CCB7FF !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-link{
|
|
||||||
color: #2c50da !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-link:hover{
|
|
||||||
color: #CCB7FF !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home-page-image{
|
|
||||||
width:100%;
|
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
.homepage-image-card .v-ripple__container {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage-image-card.v-card--link:focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.callouts-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.callout img {
|
|
||||||
width: -webkit-fill-available;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-right img {
|
|
||||||
width: -webkit-fill-available;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.col-left {
|
|
||||||
width: 40%;
|
|
||||||
display: block;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
.col-right {
|
|
||||||
width: 60%;
|
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
.homepage-background-color-strongblue{
|
|
||||||
background:#2d5d84;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.homepage-featured-img-height-500 {
|
|
||||||
height: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.home-page-col-12{
|
|
||||||
width: 100%;
|
|
||||||
display:block;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.home-page-craft-col-6{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
//margin-top:auto;
|
|
||||||
// margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-explore-col-8{
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.home-page-explore-col-4{
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
//margin-top:auto;
|
|
||||||
//margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-col-6{
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
//margin-top:auto;
|
|
||||||
// margin-bottom:auto;
|
|
||||||
}
|
|
||||||
.home-page-row{
|
|
||||||
display:block;
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.callouts-container {
|
|
||||||
display: block;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
.col-left {
|
|
||||||
width: 100%;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
.col-right {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 30px;
|
|
||||||
padding-left: 0px;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style src="./HomeComponent.scss" lang="scss" scoped />
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
.postscriptblog-route-link:active{
|
|
||||||
color: #2c50da !important;
|
|
||||||
& .postscriptblog-route-icon {
|
|
||||||
color:#2c50da !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/*.title-color {
|
|
||||||
color: #000000;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.postscriptblog-line {
|
|
||||||
border-bottom: 1px solid #3d4973;
|
|
||||||
width: 1.87rem;
|
|
||||||
margin: 1.53rem 0rem 1.21rem 0rem;
|
|
||||||
size: 1.87rem;
|
|
||||||
}
|
|
||||||
// .homepage-contentlink-color{
|
|
||||||
// color:#CCB7FF !important;
|
|
||||||
// }
|
|
||||||
.postscriptblog-image-card .v-ripple__container{
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.postscriptblog-image-card.v-card--link:focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.postscriptblog-right-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.postscriptblog-right-hover-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.postscriptblog-route-link:active .postscriptblog-right-hover-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.postscriptblog-right-white-icon{
|
|
||||||
background-image: url('@/assets/white-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
.postscriptblog-right-dark-icon{
|
|
||||||
background-image: url('@/assets/strong-blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:14px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-html="getPostScriptContent()"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "PostScriptBlog",
|
|
||||||
computed: {
|
|
||||||
homeBaseUrl() {
|
|
||||||
return import.meta.env.VITE_APP_HOME_PAGE_URL;
|
|
||||||
},
|
|
||||||
postScriptContent: function() {
|
|
||||||
return this.$store.state.layout.cmsBlockContent;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
|
|
||||||
},
|
|
||||||
getPostScriptContent(){
|
|
||||||
if (this.postScriptContent.length) {
|
|
||||||
let data = this.postScriptContent.filter(element => {
|
|
||||||
return element.identifier === "post-script";
|
|
||||||
});
|
|
||||||
if(data.length > 0){
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
goToLink(pageName) {
|
|
||||||
/* eslint-disable */
|
|
||||||
window.location.replace(this.homeBaseUrl+pageName);
|
|
||||||
//} else {
|
|
||||||
//window.open(routeSecond, "_self");
|
|
||||||
//}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
// this.$store.dispatch("block/fetchOne",10)
|
|
||||||
// this.$store.dispatch("block/fetchPostScriptBlock", this.blockId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.post-script-block-image{
|
|
||||||
width:100%;
|
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
.postscriptblog-image-card .v-ripple__container{
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.postscriptblog-image-card.v-card--link:focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.postscriptblog-line {
|
|
||||||
border-bottom: 1px solid #3d4973;
|
|
||||||
width: 1.87rem;
|
|
||||||
margin: 1.53rem 0rem 1.21rem 0rem;
|
|
||||||
size: 1.87rem;
|
|
||||||
}
|
|
||||||
.post-script-link{
|
|
||||||
color: #2c50da !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/blue-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.post-script-link:hover{
|
|
||||||
color: #CCB7FF !important;
|
|
||||||
& .home-page-icon{
|
|
||||||
background-image: url('@/assets/hover-arrow.png');
|
|
||||||
max-width:22px;
|
|
||||||
height:13px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size:contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.post-script-row{
|
|
||||||
display:flex;
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.post-script-col-4{
|
|
||||||
width:33.33%;
|
|
||||||
display:flex;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.post-script-row{
|
|
||||||
display:block;
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.post-script-col-4{
|
|
||||||
width:100%;
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
.container{
|
|
||||||
padding:0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style src="./PostScriptBlog.scss" lang="scss" scoped />
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
.productpage-icon{
|
|
||||||
color:#1D1D1D;
|
|
||||||
position: relative;
|
|
||||||
top:-3px;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn:hover:before {
|
|
||||||
opacity:0 !important;
|
|
||||||
}
|
|
||||||
.productpage-select-button {
|
|
||||||
& .v-select__slot {
|
|
||||||
outline: 2px !important;
|
|
||||||
border-bottom: 0px !important;
|
|
||||||
}
|
|
||||||
&
|
|
||||||
.v-application--is-ltr
|
|
||||||
.v-overflow-btn
|
|
||||||
.v-select__selection--comma:first-child {
|
|
||||||
margin-left: 4px !important;
|
|
||||||
}
|
|
||||||
&.v-overflow-btn .v-input__append-inner {
|
|
||||||
max-width: 30px !important;
|
|
||||||
margin-top: -4px !important;
|
|
||||||
}
|
|
||||||
& .v-menu.v-menu__content{
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid #dcdddd !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-menu.v-menu__content {
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid #dcdddd !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
.productpage-button.v-btn:before{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button:active{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
|
|
||||||
{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,956 +0,0 @@
|
||||||
<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/>
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.productpage-button.v-btn:before{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button:active{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
|
|
||||||
{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn:hover:before {
|
|
||||||
opacity:0 !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,899 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container class="white">
|
|
||||||
<v-row class="mb-md-10">
|
|
||||||
<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-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 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 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-img v-bind: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="pl-4 pr-3 d-flex d-sm-none 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"
|
|
||||||
>
|
|
||||||
<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="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-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
|
|
||||||
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-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>
|
|
||||||
<div v-show="!inProgress">
|
|
||||||
<div v-if="!fetchInProgress">
|
|
||||||
<v-form ref="giftCardForm" v-model="valid">
|
|
||||||
<v-row class>
|
|
||||||
<v-col cols="12" sm="6" md="6" class="pb-0">
|
|
||||||
<p class="body body-font mb-0 ls-n01 fontcolor-black-darken">Amount</p>
|
|
||||||
<div v-if="getCustomAttributeLable(productDetails.customAttribute,'giftcard_amounts')"
|
|
||||||
>
|
|
||||||
<div v-show="!userAuth">
|
|
||||||
<v-hover v-slot:default="{ hover }">
|
|
||||||
<v-select
|
|
||||||
:items="giftPriceOptions()"
|
|
||||||
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="value"
|
|
||||||
item-value="value"
|
|
||||||
single-line
|
|
||||||
v-model="giftCardAmtGuest"
|
|
||||||
ref="selectedGiftCardAmt"
|
|
||||||
background-color="transparent"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
:rules="!userAuth? priceRules:[]"
|
|
||||||
label="Choose an Amount"
|
|
||||||
required
|
|
||||||
:class="giftCardAmtGuest ? '':'v-select-error-border'"
|
|
||||||
>
|
|
||||||
<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.websiteValue}}</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.websiteValue}}</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</v-select>
|
|
||||||
</v-hover>
|
|
||||||
</div>
|
|
||||||
<div v-show="userAuth">
|
|
||||||
<v-hover v-slot:default="{ hover }">
|
|
||||||
<v-select
|
|
||||||
:items="giftPriceOptions()"
|
|
||||||
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="value"
|
|
||||||
item-value="value"
|
|
||||||
single-line
|
|
||||||
v-model="giftCardAmt"
|
|
||||||
ref="selectedGiftCardAmt"
|
|
||||||
background-color="transparent"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
:rules="userAuth? priceRules:[]"
|
|
||||||
label="Choose an Amount"
|
|
||||||
required
|
|
||||||
:class=" giftCardAmt ? '':'v-select-error-border'"
|
|
||||||
>
|
|
||||||
<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.websiteValue}}</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.websiteValue}}</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</v-select>
|
|
||||||
</v-hover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<h2 class="body-font mb-0 ls-n01 fontcolor-black-darken">${{productDetails.price}}</h2>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
<v-col align="right" justify="right" cols="12" sm="6" md="6" class="pb-0">
|
|
||||||
<p class="body body-font ls-n01 mb-0 fontcolor-black-darken text-left">Qty</p>
|
|
||||||
<div
|
|
||||||
v-if="getCustomAttributeLable(productDetails.customAttribute,'qty_price') && productDetails.status=='1' "
|
|
||||||
>
|
|
||||||
<v-overflow-btn
|
|
||||||
right
|
|
||||||
class="body title-color-black py-0 mt-0 overflow-button"
|
|
||||||
:items="JSON.parse(getCustomAttributeLable(productDetails.customAttribute,'qty_price'))"
|
|
||||||
label="30 ($110.00)"
|
|
||||||
segmented
|
|
||||||
dense
|
|
||||||
target="#dropdown-example"
|
|
||||||
item-text="price"
|
|
||||||
item-value="qty"
|
|
||||||
single-line
|
|
||||||
elevation="0"
|
|
||||||
v-model="selectedQty"
|
|
||||||
>
|
|
||||||
<template v-slot:selection="data">
|
|
||||||
<span>{{data.item.qty}} ($ {{ data.item.price }} )</span>
|
|
||||||
</template>
|
|
||||||
<template v-slot:item="data">
|
|
||||||
<template>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title
|
|
||||||
class="text-uppercase"
|
|
||||||
>{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</v-overflow-btn>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="productDetails.status=='1'">
|
|
||||||
<!--<v-overflow-btn
|
|
||||||
v-model="giftCardAmt"
|
|
||||||
right
|
|
||||||
dense
|
|
||||||
class="body title-color-black py-0 mt-0 overflow-button"
|
|
||||||
:items="numberOptions"
|
|
||||||
elevation="0"
|
|
||||||
label="Select Quantity"
|
|
||||||
:rules="[v => !!v || 'Please select the Quantity']"
|
|
||||||
></v-overflow-btn>-->
|
|
||||||
<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"
|
|
||||||
background-color="transparent"
|
|
||||||
ref="selectedQty4"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
:rules="[v => !!v || 'Please select the Quantity']"
|
|
||||||
></v-select>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row v-show="!userAuth">
|
|
||||||
<v-col cols="12" class="pb-1">
|
|
||||||
<v-text-field
|
|
||||||
label="Sender Name"
|
|
||||||
ref="fullName"
|
|
||||||
v-model="senderNameGuest"
|
|
||||||
:rules="!userAuth? textRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
<v-text-field
|
|
||||||
label="Sender Email"
|
|
||||||
ref="email"
|
|
||||||
type="email"
|
|
||||||
id="senderEmail"
|
|
||||||
v-model="senderEmailGuest"
|
|
||||||
:rules="!userAuth? emailRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" class="py-0">
|
|
||||||
<v-text-field
|
|
||||||
label="Recipient Name"
|
|
||||||
ref="fullName"
|
|
||||||
v-model="recipientNameGuest"
|
|
||||||
:rules="!userAuth? textRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
label="Recipient Email"
|
|
||||||
ref="email"
|
|
||||||
v-model="recipientEmailGuest"
|
|
||||||
type="email"
|
|
||||||
id="recipientEmail"
|
|
||||||
:rules="!userAuth? emailRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" class="py-0">
|
|
||||||
<v-textarea outlined auto-grow rows="5" v-model="senderMessageGuest"></v-textarea>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row v-show="userAuth">
|
|
||||||
<v-col cols="12" class="pb-1">
|
|
||||||
<v-text-field
|
|
||||||
label="Sender Name"
|
|
||||||
ref="fullName"
|
|
||||||
v-model="firstname"
|
|
||||||
:rules="userAuth? textRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
<v-text-field
|
|
||||||
label="Sender Email"
|
|
||||||
ref="email"
|
|
||||||
type="email"
|
|
||||||
id="senderEmail"
|
|
||||||
v-model="email"
|
|
||||||
:rules="userAuth? emailRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" class="py-0">
|
|
||||||
<v-text-field
|
|
||||||
label="Recipient Name"
|
|
||||||
ref="fullName"
|
|
||||||
v-model="recipientName"
|
|
||||||
:rules="userAuth? textRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
label="Recipient Email"
|
|
||||||
ref="email"
|
|
||||||
v-model="recipientEmail"
|
|
||||||
type="email"
|
|
||||||
id="recipientEmail"
|
|
||||||
:rules="userAuth? emailRules:[]"
|
|
||||||
outlined
|
|
||||||
required
|
|
||||||
dense
|
|
||||||
></v-text-field>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" class="py-0">
|
|
||||||
<v-textarea outlined auto-grow rows="5" v-model="senderMessage"></v-textarea>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-form>
|
|
||||||
<p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-center">
|
|
||||||
<v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<v-row v-if="!itemId">
|
|
||||||
<v-col
|
|
||||||
class="pt-4"
|
|
||||||
v-if="productDetails.status=='1' && 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="addToGiftCart(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 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-col class="pt-4" v-if="itemId">
|
|
||||||
<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="updateToGiftCart(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-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>
|
|
||||||
<SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
//const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
|
|
||||||
import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
|
|
||||||
import { getLable ,customAttributeValue,setCategoryNameInLocal} from "@/services/util.service";
|
|
||||||
import { createHelpers } from "vuex-map-fields";
|
|
||||||
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
|
|
||||||
|
|
||||||
const { mapFields: guest } = createHelpers({
|
|
||||||
getterType: "cartProduct/getField",
|
|
||||||
mutationType: "cartProduct/updateField"
|
|
||||||
});
|
|
||||||
const { mapFields: customer } = createHelpers({
|
|
||||||
getterType: "userCartProduct/getField",
|
|
||||||
mutationType: "userCartProduct/updateField"
|
|
||||||
});
|
|
||||||
const { mapFields: customerInfo } = createHelpers({
|
|
||||||
getterType: "accountOne/getField",
|
|
||||||
mutationType: "accountOne/updateField"
|
|
||||||
});
|
|
||||||
export default {
|
|
||||||
name: "GiftCardDetailsComponent",
|
|
||||||
props: ["productDetails","stockFlag","categoryId"],
|
|
||||||
components: { SnackbarComponent },
|
|
||||||
data: () => ({
|
|
||||||
productDefaultImage:require('@/assets/defaultProduct.jpg'),
|
|
||||||
isAmtActive: true,
|
|
||||||
isQtyActive: true,
|
|
||||||
isActive: true,
|
|
||||||
easings: Object.keys(easings),
|
|
||||||
snackbar: {
|
|
||||||
show: false,
|
|
||||||
message: null,
|
|
||||||
color: null,
|
|
||||||
timeout: 0
|
|
||||||
},
|
|
||||||
textRules: [
|
|
||||||
v => !!v || "This field is required",
|
|
||||||
v => (v && v.length >= 3) || "This field must be at least 3 characters"
|
|
||||||
],
|
|
||||||
priceRules: [
|
|
||||||
v => !!v || "This field is required"
|
|
||||||
],
|
|
||||||
emailRules: [
|
|
||||||
v => !!v || "Email Id is required",
|
|
||||||
v => /.+@.+\..+/.test(v) || "Email Id must be valid"
|
|
||||||
],
|
|
||||||
valid: true,
|
|
||||||
selectedQty: "",
|
|
||||||
blue: "primary",
|
|
||||||
white: "white",
|
|
||||||
errorMessage: "",
|
|
||||||
selected: "",
|
|
||||||
imagepath: "",
|
|
||||||
fav: true,
|
|
||||||
menu: false,
|
|
||||||
message: false,
|
|
||||||
hints: true,
|
|
||||||
}),
|
|
||||||
/* eslint-disable no-alert, no-console , no-debugger */
|
|
||||||
computed: {
|
|
||||||
...guest([
|
|
||||||
"giftCartDetailsGuest",
|
|
||||||
"giftCartDetailsGuest.senderNameGuest",
|
|
||||||
"giftCartDetailsGuest.senderEmailGuest",
|
|
||||||
"giftCartDetailsGuest.recipientNameGuest",
|
|
||||||
"giftCartDetailsGuest.recipientEmailGuest",
|
|
||||||
"giftCartDetailsGuest.senderMessageGuest",
|
|
||||||
//"giftCartDetails.giftCardQty",
|
|
||||||
"giftCartDetailsGuest.giftCardAmtGuest"
|
|
||||||
]),
|
|
||||||
...customer([
|
|
||||||
"giftCartDetails",
|
|
||||||
// "giftCartDetails.senderName",
|
|
||||||
//"giftCartDetails.senderEmail",
|
|
||||||
"giftCartDetails.recipientName",
|
|
||||||
"giftCartDetails.recipientEmail",
|
|
||||||
"giftCartDetails.senderMessage",
|
|
||||||
//"giftCartDetails.giftCardQty",
|
|
||||||
"giftCartDetails.giftCardAmt"
|
|
||||||
]),
|
|
||||||
...customerInfo(["one", "one.firstname", "one.email"]),
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
|
||||||
},
|
|
||||||
|
|
||||||
itemId: function() {
|
|
||||||
this.pageScrollUp();
|
|
||||||
return this.$route.query.itemId;
|
|
||||||
},
|
|
||||||
qty: function() {
|
|
||||||
this.getMessageDetails();
|
|
||||||
return this.$route.query.qty;
|
|
||||||
},
|
|
||||||
|
|
||||||
amtOptions: function() {
|
|
||||||
if (this.productDetails.customAttribute) {
|
|
||||||
let minSalesQty = this.getCustomAttributeLable(
|
|
||||||
this.productDetails.customAttribute,
|
|
||||||
"additional_feature_1"
|
|
||||||
);
|
|
||||||
let qtyIncrements = this.getCustomAttributeLable(
|
|
||||||
this.productDetails.customAttribute,
|
|
||||||
"ba_qty_increments"
|
|
||||||
);
|
|
||||||
minSalesQty = Number(minSalesQty) ? 50 : 50;
|
|
||||||
qtyIncrements = Number(qtyIncrements) ? 25 : 25;
|
|
||||||
|
|
||||||
let nums = [];
|
|
||||||
nums[0] = minSalesQty;
|
|
||||||
for (let i = 1; minSalesQty <= 750; i++) {
|
|
||||||
minSalesQty = minSalesQty + qtyIncrements;
|
|
||||||
nums[i] = minSalesQty;
|
|
||||||
}
|
|
||||||
if (nums.length > 0) return nums;
|
|
||||||
else return "";
|
|
||||||
|
|
||||||
// return minSalesQty + " " + qtyIncrements;
|
|
||||||
} else {
|
|
||||||
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() {
|
|
||||||
if (this.userAuth) {
|
|
||||||
return this.$store.state.userCartProduct.fetchInProgress;
|
|
||||||
} else {
|
|
||||||
return this.$store.state.cartProduct.fetchInProgress;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
productDetails() {
|
|
||||||
this.imagepath = this.productDetails.mediaGalleryEntries?this.productDetails.mediaGalleryEntries[0].file:"";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
||||||
return customAttributeValue(customAttributes, attributeCode);
|
|
||||||
},
|
|
||||||
setAltImg() {
|
|
||||||
event.target.src =this.productDefaultImage
|
|
||||||
},
|
|
||||||
giftPriceOptions() {
|
|
||||||
let vm = this;
|
|
||||||
let list = vm.getCustomAttributeLable(this.productDetails.customAttribute,'giftcard_amounts');
|
|
||||||
return list;
|
|
||||||
},
|
|
||||||
addToGiftCart(sku,productDetails) {
|
|
||||||
if (this.$refs.giftCardForm.validate()) {
|
|
||||||
let vm =this;
|
|
||||||
let qtyNew=this.selectedQty;
|
|
||||||
if (this.userAuth) {
|
|
||||||
this.$store
|
|
||||||
.dispatch("userCartProduct/addToGiftCart", {
|
|
||||||
sku: sku,
|
|
||||||
qty: this.selectedQty,
|
|
||||||
senderName: this.one.firstname,
|
|
||||||
senderEmail: this.one.email
|
|
||||||
})
|
|
||||||
.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
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.snackbar = {
|
|
||||||
message: error.message,
|
|
||||||
color: "error",
|
|
||||||
show: true,
|
|
||||||
timeout: 2000
|
|
||||||
};
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$store
|
|
||||||
.dispatch("cartProduct/addToGiftCart", {
|
|
||||||
sku: sku,
|
|
||||||
qty: this.selectedQty
|
|
||||||
})
|
|
||||||
.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
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.snackbar = {
|
|
||||||
message: error.message,
|
|
||||||
color: "error",
|
|
||||||
show: true,
|
|
||||||
timeout: 2000
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async updateToGiftCart(productName,sku) {
|
|
||||||
if (this.selectedQty) {
|
|
||||||
this.errorMessage = "";
|
|
||||||
if (this.userAuth) {
|
|
||||||
try{
|
|
||||||
await this.$store.dispatch("userCartProduct/updateToGiftCart", {
|
|
||||||
sku: sku,
|
|
||||||
qty: this.selectedQty,
|
|
||||||
itemId: this.itemId,
|
|
||||||
senderName: this.one.firstname,
|
|
||||||
senderEmail: this.one.email
|
|
||||||
});
|
|
||||||
this.snackbar = {
|
|
||||||
message: "Product Updated Successfully",
|
|
||||||
color: "success",
|
|
||||||
show: true,
|
|
||||||
timeout: 3000
|
|
||||||
};
|
|
||||||
}
|
|
||||||
catch(error){
|
|
||||||
this.snackbar = {
|
|
||||||
message: error.message,
|
|
||||||
color: "error",
|
|
||||||
show: true,
|
|
||||||
timeout: 3000
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getCustomAttributeLable(customAttributes, attributeCode) {
|
|
||||||
return getLable(customAttributes, attributeCode);
|
|
||||||
},
|
|
||||||
setSelected(part, index) {
|
|
||||||
this.imagepath = part;
|
|
||||||
this.selected = index;
|
|
||||||
},
|
|
||||||
pageScrollUp() {
|
|
||||||
/* if (this.$refs.divOne)
|
|
||||||
this.$vuetify.goTo(this.$refs.divOne, {
|
|
||||||
duration: 300,
|
|
||||||
easing: "easeInOutCubic"
|
|
||||||
});*/
|
|
||||||
},
|
|
||||||
async getMessageDetails() {
|
|
||||||
if (this.itemId) {
|
|
||||||
if (this.userAuth) {
|
|
||||||
await this.$store.dispatch("userCartProduct/cartProductList");
|
|
||||||
await this.$store.dispatch("userCartProduct/fetchGiftMessage", {
|
|
||||||
itemId: this.itemId
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.pageScrollUp();
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-tabs1 .v-slide-group__prev {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.v-text-field .v-input__control {
|
|
||||||
border-radius: unset !important;
|
|
||||||
height: auto; //48px;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.v-select-error-border.error--text .v-input__control .v-input__slot
|
|
||||||
{
|
|
||||||
border: 2px solid #ff5252 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style src="./ProductDetailComponent.scss" lang="scss" scoped/>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
.productpage-icon{
|
|
||||||
color:#1D1D1D;
|
|
||||||
position: relative;
|
|
||||||
top:-3px;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn:hover:before {
|
|
||||||
opacity:0 !important;
|
|
||||||
}
|
|
||||||
.productpage-select-button {
|
|
||||||
& .v-select__slot {
|
|
||||||
outline: 2px !important;
|
|
||||||
border-bottom: 0px !important;
|
|
||||||
}
|
|
||||||
&
|
|
||||||
.v-application--is-ltr
|
|
||||||
.v-overflow-btn
|
|
||||||
.v-select__selection--comma:first-child {
|
|
||||||
margin-left: 4px !important;
|
|
||||||
}
|
|
||||||
&.v-overflow-btn .v-input__append-inner {
|
|
||||||
max-width: 30px !important;
|
|
||||||
margin-top: -4px !important;
|
|
||||||
}
|
|
||||||
& .v-menu.v-menu__content{
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid #dcdddd !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.v-menu.v-menu__content {
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid #dcdddd !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
}
|
|
||||||
.productpage-button.v-btn:before{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button:active{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.productpage-button.theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
|
|
||||||
{
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-change-icon.v-select--is-menu-active .mdi-plus::before{
|
|
||||||
content: "\F0374" !important;
|
|
||||||
}
|
|
||||||
.select-change-icon .v-menu__content {
|
|
||||||
box-shadow: none !important;
|
|
||||||
border-left: 1px solid #2850da !important;
|
|
||||||
outline: none !important;
|
|
||||||
border-right: 1px solid #2850da !important;
|
|
||||||
border-bottom: 1px solid #2850da !important;
|
|
||||||
border-radius: 0px !important;
|
|
||||||
background-color:#ffffff;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,45 +0,0 @@
|
||||||
.hr-line-100px{
|
|
||||||
border: 0.0625rem solid #000;
|
|
||||||
width: 6.25rem;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.relatedproduct-fcolor-black-darken-2{
|
|
||||||
color: #1d1d1d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relatedproduct-black-lighten-2{
|
|
||||||
color:rgba(0,0,0,1);
|
|
||||||
}
|
|
||||||
.recentproducts-image-card .v-ripple__container{
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recentproducts-image-card.v-card--link:focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.recentproducts-images .vueperslides__track-inner{
|
|
||||||
transform: translate3d(0%, 0px, 0px)!important;
|
|
||||||
}
|
|
||||||
.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
|
|
||||||
margin-left:10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
|
|
||||||
margin-right:10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
@media screen and (max-width:764px) {
|
|
||||||
.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
|
|
||||||
margin-left:-10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
.recentproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
|
|
||||||
margin-right:-10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,287 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container class="pt-0 pt-sm-8 white">
|
|
||||||
<v-row no-gutters justify="center" class="pa-0 d-none d-sm-flex">
|
|
||||||
<div class="hr-line-100px"></div>
|
|
||||||
</v-row>
|
|
||||||
<!----------- mobile view -------->
|
|
||||||
<v-content
|
|
||||||
align="center"
|
|
||||||
class="pa-0 mt-md-5 pt-5 mb-9 d-sm-none ls-n01"
|
|
||||||
v-if="recentlyViewed && recentlyViewed.length >0"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
|
|
||||||
>Recently</p>
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
|
|
||||||
>Viewed</p>
|
|
||||||
</v-content>
|
|
||||||
<!----------- mobile view end -------->
|
|
||||||
<div v-if="recentlyViewed && recentlyViewed.length >0">
|
|
||||||
<v-content align="center" class="pa-0 mt-md-5 mt-5 mb-12 d-none d-sm-block ls-n01">
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 mt-5 mx-2 px-2 text-center line-height-36 regular-font"
|
|
||||||
>Recently Viewed</p>
|
|
||||||
</v-content>
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-container class="pa-0 pa-sm-3">
|
|
||||||
<v-col lg="12" md="12" cols="12" sm="12" class="pa-0 pa-sm-3">
|
|
||||||
<vueper-slides
|
|
||||||
class="no-shadow mb-0 recentproducts-image-slider"
|
|
||||||
:class="recentlyViewed.length > 4 ? '':'recentproducts-images'"
|
|
||||||
:visible-slides="perSlides"
|
|
||||||
:dragging-distance="1"
|
|
||||||
:fixed-height="slideHeight"
|
|
||||||
:touchable="false"
|
|
||||||
>
|
|
||||||
<vueper-slide v-for="(products, index) in recentlyViewed.slice(0, 16)" v-bind:key="index">
|
|
||||||
<template v-slot:content>
|
|
||||||
<div class="vueperslide__content-wrapper vueperslide__title">
|
|
||||||
<v-card
|
|
||||||
tile
|
|
||||||
class="transparent-background recentproducts-image-card vueperslide__title px-sm-4 py-3"
|
|
||||||
@click="OpenProductDetails(products.name)"
|
|
||||||
flat
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
v-bind:src="imageBasePathUrl + getCustomAttributeValue(products.customAttributes,'image')"
|
|
||||||
height="auto"
|
|
||||||
:max-height="imageMaxHeight"
|
|
||||||
width="100%"
|
|
||||||
:alt="products.name" :title="products.name"
|
|
||||||
>
|
|
||||||
<!--<div class="text-right">
|
|
||||||
<v-icon icon class="pa-4 white--text">mdi-heart-outline</v-icon>
|
|
||||||
</div>-->
|
|
||||||
</v-img>
|
|
||||||
<v-row no-gutters class="pt-4">
|
|
||||||
<v-col class="pb-0" cols="6">
|
|
||||||
<h1
|
|
||||||
class="font-weight-300 text-left mb-3 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
|
|
||||||
>{{products.name}}</h1>
|
|
||||||
</v-col>
|
|
||||||
<!-- <v-col class="pb-0" cols="6">
|
|
||||||
<p
|
|
||||||
class="text-right mb-0 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
|
|
||||||
>${{Number(products.price)}}/ {{getAttribute(products.customAttributes,'uom')}}</p>
|
|
||||||
</v-col>-->
|
|
||||||
<v-col class="py-0" cols="12">
|
|
||||||
<p
|
|
||||||
class="mb-3 text-left fontsize-14 body-font ls-n009 word_break fontcolor-grey-darken"
|
|
||||||
>
|
|
||||||
{{getCustomAttributeValue(products.customAttributes,'unit_description'
|
|
||||||
)}}
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
<!-- <v-col class="py-0 d-none d-sm-block" sm="12">
|
|
||||||
<div v-for="(items, index) in products.customAttributes" :key="index">
|
|
||||||
<div v-if="items.attributeCode === 'color'">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col
|
|
||||||
v-for="(color,index) in items.value"
|
|
||||||
v-bind:key="index"
|
|
||||||
class="mr-2 mr-md-1 pa-0"
|
|
||||||
cols="1"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
:color="color"
|
|
||||||
fab
|
|
||||||
depressed
|
|
||||||
max-height="16px"
|
|
||||||
max-width="16px"
|
|
||||||
></v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>-->
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</vueper-slide>
|
|
||||||
</vueper-slides>
|
|
||||||
</v-col>
|
|
||||||
</v-container>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row no-gutters align="center" justify="center" class="d-none d-sm-flex pa-0 pt-7">
|
|
||||||
<div class="hr-line-100px"></div>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
|
||||||
<v-row no-gutters align="center" justify="center" class="d-flex d-sm-none pa-0 pt-12">
|
|
||||||
<div class="hr-line-100px"></div>
|
|
||||||
</v-row>
|
|
||||||
<v-row no-gutters class="mt-5 d-none d-sm-block">
|
|
||||||
<v-col align="center">
|
|
||||||
<h2
|
|
||||||
class="text-uppercase body-font fontsize-28px ls-n01 title-color-black text-center mb-4 line-height-36"
|
|
||||||
>the craftsmanship of crane</h2>
|
|
||||||
<p class="text-center pt-4 ls-n01 body-font fontcolor-black-darken">
|
|
||||||
Luxurious Lettra and touchable embossing elevate a simple sentiment for
|
|
||||||
<br />this refined holiday card. Friends and family will cherish your personal
|
|
||||||
<br />message and lovingly chosen photograph.
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row no-gutters class="mt-5 d-block d-sm-none">
|
|
||||||
<v-col align="center">
|
|
||||||
<h2
|
|
||||||
class="text-uppercase body-font fontsize-28px ls-n01 title-color-black text-center mb-4 line-height-36"
|
|
||||||
>
|
|
||||||
the
|
|
||||||
<br />craftsmanship
|
|
||||||
<br />of crane
|
|
||||||
</h2>
|
|
||||||
<p class="text-center pt-1 ls-n01 body-font fontcolor-black-darken">
|
|
||||||
Luxurious Lettra and touchable
|
|
||||||
<br />embossing elevate a simple sentiment
|
|
||||||
<br />for
|
|
||||||
this refined holiday card. Friends and
|
|
||||||
<br />family will cherish your personal
|
|
||||||
<br />message and lovingly chosen
|
|
||||||
<br />photograph.
|
|
||||||
</p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<div class="d-none d-sm-flex flex-column flex-start pt-5 pb-4">
|
|
||||||
<v-container class="px-0">
|
|
||||||
<v-row class="pb-9">
|
|
||||||
<v-col md="4" sm="4" class="cursor-pointer" @click="goToPage('/about-us')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/3c75d46ae8685185bce31e5663ae5bed29fd76f1.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="regular-font line-height-36 fontsize-28 ls-n01 text-uppercase"
|
|
||||||
>Legacy of Excellence</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col md="4" sm="4" class="cursor-pointer" @click="goToPage('/our-papers')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/32d33cfd6ead3276031a1281a4ddf1ad3a627cde.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="regular-font line-height-36 fontsize-28 text-uppercase ls-n01"
|
|
||||||
>Details Matter</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col md="4" sm="4" class="cursor-pointer" @click="goToPage('/printing-processes')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/cd3983401dbf31b8feaf4a4a75f277ccbb24a7e4.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="regular-font line-height-36 fontsize-28 text-uppercase ls-n01"
|
|
||||||
>Handcrafted</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!------- mobile view code --------------------------------->
|
|
||||||
<v-row no-gutters class="d-sm-none mt-5">
|
|
||||||
<v-container class="mb-7 mt-7 pa-0">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12" class="pa-3 px-0 cursor-pointer" @click="goToPage('/about-us')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/3c75d46ae8685185bce31e5663ae5bed29fd76f1.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span class="h3 ls-n008 text-uppercase">Legacy of Excellence</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" class="pa-3 px-0 cursor-pointer" @click="goToPage('/our-papers')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/32d33cfd6ead3276031a1281a4ddf1ad3a627cde.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span class="h3 text-uppercase ls-n008">Details Matter</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" class="pa-3 px-0 cursor-pointer" @click="goToPage('/printing-processes')">
|
|
||||||
<v-img
|
|
||||||
:src="require('@/assets/cd3983401dbf31b8feaf4a4a75f277ccbb24a7e4.png')"
|
|
||||||
class="align-center text-center white--text"
|
|
||||||
>
|
|
||||||
<span class="h3 text-uppercase ls-n008">Handcrafted</span>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</v-row>
|
|
||||||
<!------- end mobile view code --------------------------------->
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { VueperSlides, VueperSlide } from "vueperslides";
|
|
||||||
import { attribute, customAttributeValue } from "@/services/util.service";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "RecentlyViewedComponent",
|
|
||||||
props: ["recentlyViewed"],
|
|
||||||
components: {
|
|
||||||
VueperSlides,
|
|
||||||
VueperSlide
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
productAttributes() {
|
|
||||||
return this.$store.state.productList.attributeList;
|
|
||||||
},
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
|
||||||
},
|
|
||||||
perSlides: function() {
|
|
||||||
if (this.$vuetify.display.xsOnly) return 1;
|
|
||||||
else if (this.$vuetify.display.smOnly) return 3;
|
|
||||||
else return this.$vuetify.display.mdAndUp ? 4 : 4;
|
|
||||||
},
|
|
||||||
slideHeight: function() {
|
|
||||||
return this.$vuetify.display.xsOnly ? "400px" : "350px";
|
|
||||||
},
|
|
||||||
showArrows: function() {
|
|
||||||
if (this.$vuetify.display.smAndDown) return false;
|
|
||||||
else return true;
|
|
||||||
},
|
|
||||||
imageMaxHeight: function() {
|
|
||||||
if (this.$vuetify.display.xsOnly) return "250px";
|
|
||||||
else return "300px";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initialLink() {
|
|
||||||
return import.meta.env.VITE_APP_HOME_PAGE_URL;
|
|
||||||
},
|
|
||||||
goToPage(pageLink) {
|
|
||||||
window.location.replace(this.initialLink()+pageLink);
|
|
||||||
},
|
|
||||||
getAttribute(customAttributes, attributeCode) {
|
|
||||||
return attribute(customAttributes, attributeCode, this.productAttributes);
|
|
||||||
},
|
|
||||||
|
|
||||||
getCustomAttributeValue(customAttributes, attributeCode) {
|
|
||||||
return customAttributeValue(customAttributes, attributeCode);
|
|
||||||
},
|
|
||||||
OpenProductDetails(productName) {
|
|
||||||
this.$router
|
|
||||||
.push({
|
|
||||||
name: productName,
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
error;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style src="./RecentlyViewedComponent.scss" lang="scss" />
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
.hr-line-100px {
|
|
||||||
border: 0.0625rem solid #1d1d1d !important;
|
|
||||||
width: 6.25rem;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relatedproduct-fcolor-black-darken-2 {
|
|
||||||
color: #1d1d1d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relatedproduct-black-lighten-2 {
|
|
||||||
color: rgba(0, 0, 0, 1);
|
|
||||||
}
|
|
||||||
.relatedproducts-image-card .v-ripple__container{
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relatedproducts-image-card.v-card--link:focus:before {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
.relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
|
|
||||||
margin-left:10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
.relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
|
|
||||||
margin-right:10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
@media screen and (max-width:764px) {
|
|
||||||
.relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--prev{
|
|
||||||
margin-left:-10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
.relatedproducts-image-slider .vueperslides__arrow.vueperslides__arrow--next{
|
|
||||||
margin-right:-10px !important;
|
|
||||||
color:#2850da;
|
|
||||||
padding-bottom:80px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
<template>
|
|
||||||
<v-container class="py-0 pa-sm-3 white">
|
|
||||||
<v-row no-gutters justify="center" class="pa-0 mt-md-12 mt-sm-10">
|
|
||||||
<div class="hr-line-100px"></div>
|
|
||||||
</v-row>
|
|
||||||
<!----------- mobile view -------->
|
|
||||||
<v-content align="center" class="pa-0 mt-md-5 mt-5 mb-4 d-sm-none ls-n01">
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
|
|
||||||
>Related</p>
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
|
|
||||||
>Products</p>
|
|
||||||
</v-content>
|
|
||||||
<!----------- mobile view end -------->
|
|
||||||
<v-content align="center" class="pa-0 mt-md-5 mt-5 d-none d-sm-block ls-n01">
|
|
||||||
<p
|
|
||||||
class="text-uppercase fontsize-28 mt-5 mb-9 mx-2 px-2 text-center line-height-36 regular-font"
|
|
||||||
>Related Products</p>
|
|
||||||
</v-content>
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-container class="pa-0 pa-sm-3">
|
|
||||||
<v-col lg="12" md="12" cols="12" sm="12" class="pa-0 pa-sm-3">
|
|
||||||
<vueper-slides
|
|
||||||
class="no-shadow mb-0"
|
|
||||||
:visible-slides="perSlides"
|
|
||||||
:dragging-distance="1"
|
|
||||||
:fixed-height="slideHeight"
|
|
||||||
:touchable="false"
|
|
||||||
>
|
|
||||||
<vueper-slide v-for="(products, index) in relatedProducts" v-bind:key="index">
|
|
||||||
<template v-slot:content>
|
|
||||||
<div class="vueperslide__content-wrapper vueperslide__title">
|
|
||||||
<v-card
|
|
||||||
tile
|
|
||||||
class="transparent-background relatedproducts-image-card vueperslide__title px-sm-4 py-3"
|
|
||||||
@click="OpenProductDetails(products.name)"
|
|
||||||
flat
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
v-bind:src="imageBasePathUrl + products.image[0].file"
|
|
||||||
height="auto"
|
|
||||||
:max-height="imageMaxHeight"
|
|
||||||
width="100%"
|
|
||||||
:alt="products.name" :title="products.name"
|
|
||||||
>
|
|
||||||
<!--<div class="text-right">
|
|
||||||
<v-icon icon class="pa-4 white--text">mdi-heart-outline</v-icon>
|
|
||||||
</div>-->
|
|
||||||
</v-img>
|
|
||||||
<v-row no-gutters class="pt-4">
|
|
||||||
<v-col class="pb-0" cols="6">
|
|
||||||
<h1
|
|
||||||
class="font-weight-300 text-left mb-3 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
|
|
||||||
>{{products.name}}</h1>
|
|
||||||
</v-col>
|
|
||||||
<!-- <v-col class="pb-0" cols="6">
|
|
||||||
<p
|
|
||||||
class="text-right mb-0 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
|
|
||||||
>${{Number(products.price)}}/ {{products.uom}}</p>
|
|
||||||
</v-col>-->
|
|
||||||
<v-col class="py-0" cols="12">
|
|
||||||
<p
|
|
||||||
class="mb-3 text-left fontsize-14 body-font ls-n009 word_break fontcolor-grey-darken"
|
|
||||||
>{{products.unitDiscription}}</p>
|
|
||||||
</v-col>
|
|
||||||
<!-- <v-col class="py-0 d-none d-sm-block" sm="12">
|
|
||||||
<div v-for="(items, index) in products.customAttributes" :key="index">
|
|
||||||
<div v-if="items.attributeCode === 'color'">
|
|
||||||
<v-row no-gutters>
|
|
||||||
<v-col
|
|
||||||
v-for="(color,index) in items.value"
|
|
||||||
v-bind:key="index"
|
|
||||||
class="mr-2 mr-md-1 pa-0"
|
|
||||||
cols="1"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
:color="color"
|
|
||||||
fab
|
|
||||||
depressed
|
|
||||||
max-height="16px"
|
|
||||||
max-width="16px"
|
|
||||||
></v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>-->
|
|
||||||
</v-row>
|
|
||||||
</v-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</vueper-slide>
|
|
||||||
</vueper-slides>
|
|
||||||
</v-col>
|
|
||||||
</v-container>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { VueperSlides, VueperSlide } from "vueperslides";
|
|
||||||
import "vueperslides/dist/vueperslides.css";
|
|
||||||
//const personlizeUrl = import.meta.env.VITE_APP_PERSONALIZE_URL;
|
|
||||||
export default {
|
|
||||||
name: "RelatedProductsComponent",
|
|
||||||
props: ["relatedProducts"],
|
|
||||||
components: {
|
|
||||||
VueperSlides,
|
|
||||||
VueperSlide
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
|
||||||
},
|
|
||||||
perSlides: function() {
|
|
||||||
if (this.$vuetify.display.xsOnly) return 1;
|
|
||||||
else if (this.$vuetify.display.smOnly) return 3;
|
|
||||||
else return this.$vuetify.display.mdAndUp ? 4 : 4;
|
|
||||||
},
|
|
||||||
slideHeight: function() {
|
|
||||||
return this.$vuetify.display.xsOnly ? "400px" : "350px";
|
|
||||||
},
|
|
||||||
showArrows: function() {
|
|
||||||
if (this.$vuetify.display.smAndDown) return false;
|
|
||||||
else return true;
|
|
||||||
},
|
|
||||||
imageMaxHeight: function() {
|
|
||||||
if (this.$vuetify.display.xsOnly) return "250px";
|
|
||||||
else return "300px";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
OpenProductDetails(productsName) {
|
|
||||||
this.$router.push({
|
|
||||||
name: productsName,
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
error;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style src="./RelatedProductsComponent.scss" lang="scss" scopped/>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
.fontcolor-grey-shade8b {
|
|
||||||
color: #8b8b8b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.categorybaseproducts-select-button {
|
|
||||||
max-width: 300px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.categorybaseproduct-cancel-buttons.v-icon.v-icon::after {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
@media screen and (max-width:320px) {
|
|
||||||
.searchproducts-sortby{
|
|
||||||
font-size:14px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -231,164 +231,5 @@ export default {
|
||||||
created() {},
|
created() {},
|
||||||
};
|
};
|
||||||
</script>
|
</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;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<style src="./RetailerSearchProducts.scss" lang="scss" scoped />
|
<style src="./RetailerSearchProducts.scss" lang="scss" scoped />
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
.fontcolor-grey-shade8b {
|
|
||||||
color: #8b8b8b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.categorybaseproducts-select-button {
|
|
||||||
max-width: 300px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.categorybaseproduct-cancel-buttons.v-icon.v-icon::after {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
@media screen and (max-width:320px) {
|
|
||||||
.searchproducts-sortby{
|
|
||||||
font-size:14px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,694 +0,0 @@
|
||||||
<template>
|
|
||||||
<div v-resize="OnResize">
|
|
||||||
<v-container class="px-5 px-sm-3 px-md-3 px-lg-3">
|
|
||||||
<div :class="isIpad ? 'd-flex flex-column-reverse' : 'pt-lg-5 pb-lg-2'">
|
|
||||||
<div :class="newUser ? 'pt-lg-6 mt-lg-12' : ''">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12" lg="9" md="12" sm="12" ref="divOne" class="py-0">
|
|
||||||
<div v-if="categoryListIdWise">
|
|
||||||
<BreadcrumbComponent :breadcrumbVal="breadcrumbData" :key="breadcrumbData" />
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</div>
|
|
||||||
<CategoryHeroContent v-if="!isMobile" :categoryContent="categoryPageContent"></CategoryHeroContent>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-row v-if="isIpadOrMobile && searchResults.page.length">
|
|
||||||
<v-col cols="12" class="pa-0">
|
|
||||||
<v-col cols="12" sm="4" >
|
|
||||||
<span>
|
|
||||||
<ul class="pl-0" v-for="(value, index) in enabledFilters" :key="index">
|
|
||||||
<li class="d-flex justify-space-between pb-1" v-if="value.label !='Category'">
|
|
||||||
<div>
|
|
||||||
<b>
|
|
||||||
<span class="text-uppercase">{{ value.label }}</span>
|
|
||||||
</b>
|
|
||||||
: {{ value.value }}
|
|
||||||
</div>
|
|
||||||
<v-hover v-slot:default="{ hover }">
|
|
||||||
<v-icon
|
|
||||||
:color="hover ? 'primary' : ''"
|
|
||||||
@click.stop="deleteFilter(value,index)"
|
|
||||||
class="searchproducts-cancel-buttons cursor-pointer transparent-background"
|
|
||||||
>mdi-close</v-icon>
|
|
||||||
</v-hover>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</span>
|
|
||||||
</v-col>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" sm="4" class="d-lg-none pt-1 pb-5">
|
|
||||||
<v-menu
|
|
||||||
allow-overflow
|
|
||||||
id="filterSelect"
|
|
||||||
offset-y
|
|
||||||
:close-on-content-click="closeFilterMenu"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-select
|
|
||||||
v-bind="attrs"
|
|
||||||
v-on="on"
|
|
||||||
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-filter-button select-change-icon"
|
|
||||||
dense
|
|
||||||
attach="#filterSelect"
|
|
||||||
flat
|
|
||||||
solo
|
|
||||||
single-line
|
|
||||||
background-color="transparent"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
label="FILTERS"
|
|
||||||
color="primary"
|
|
||||||
@click="setFilterValue"
|
|
||||||
></v-select>
|
|
||||||
</template>
|
|
||||||
<v-list class="categorybaseproducts-filter-options mx-auto">
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-title class="filter-component-width">
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-btn
|
|
||||||
block
|
|
||||||
class="text-uppercase ls-0 body pb-1 productpage-button"
|
|
||||||
outlined
|
|
||||||
:class="
|
|
||||||
checkClear ? 'white--text primary' : 'primary--text'
|
|
||||||
"
|
|
||||||
tile
|
|
||||||
depressed
|
|
||||||
@click="clearFilter()"
|
|
||||||
>CLEAR</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<FilterComponent
|
|
||||||
@clearAction="actionClear"
|
|
||||||
:filterList="availalableFilters"
|
|
||||||
:inProgress="inProgress"
|
|
||||||
:enabledFilters="enabledFilters"
|
|
||||||
@applyNewFilter="applyFilter"
|
|
||||||
></FilterComponent>
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
<v-col lg="10" md="4" sm="4" cols="3" class="pt-0 pb-4 pr-0 pr-sm-2">
|
|
||||||
<p
|
|
||||||
class="text-uppercase Whyte-Regular primary--text my-3 mr-1 fontsize-16 ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b searchproducts-sortby"
|
|
||||||
:class="isIpad ? 'float-right' : 'float-left'"
|
|
||||||
>Sort by:</p>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="9" lg="2" md="4" sm="4" class="py-0 pt-1 pl-3 pr-3">
|
|
||||||
<v-select
|
|
||||||
:items="criteria"
|
|
||||||
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button select-change-icon regular-font"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
attach
|
|
||||||
solo
|
|
||||||
ref="sortAndNextPage"
|
|
||||||
@change="sortAndNextPage()"
|
|
||||||
item-text="label"
|
|
||||||
item-value="value"
|
|
||||||
background-color="transparent"
|
|
||||||
v-model="sortBy"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
></v-select>
|
|
||||||
</v-col>
|
|
||||||
<v-col md="12" sm="12" cols="12" class="py-0">
|
|
||||||
<p
|
|
||||||
class="h3 regular-font mb-1"
|
|
||||||
v-if="searchPageContent"
|
|
||||||
>Search results for : '{{ keywords }}'</p>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<CategoryHeroContent v-if="isMobile" :categoryContent="categoryPageContent"></CategoryHeroContent>
|
|
||||||
<v-row class="d-none d-sm-flex" v-if="!isIpadOrMobile">
|
|
||||||
<v-col cols="12" lg="3" md="4" sm="4">
|
|
||||||
<span>
|
|
||||||
<ul class="pl-0" v-for="(value, index) in enabledFilters" :key="index">
|
|
||||||
<li class="d-flex justify-space-between pb-1" v-if="value.label !='Category'">
|
|
||||||
<div>
|
|
||||||
<b>
|
|
||||||
<span class="text-uppercase">{{ value.label }}</span>
|
|
||||||
</b>
|
|
||||||
: {{ value.value }}
|
|
||||||
</div>
|
|
||||||
<v-hover v-slot:default="{ hover }">
|
|
||||||
<v-icon
|
|
||||||
:color="hover ? 'primary' : ''"
|
|
||||||
@click.stop="deleteFilter(value,index)"
|
|
||||||
class="ccategorybaseproduct-cancel-buttons cursor-pointer"
|
|
||||||
>mdi-close</v-icon>
|
|
||||||
</v-hover>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</span>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row v-if="searchResults.page.length">
|
|
||||||
<v-col lg="3" md="1" sm="1" class="d-none d-lg-block pt-12 pr-md-12">
|
|
||||||
<v-row justify="center" class="pt-6">
|
|
||||||
<FilterComponent
|
|
||||||
:filterList="availalableFilters"
|
|
||||||
:inProgress="inProgress"
|
|
||||||
:enabledFilters="enabledFilters"
|
|
||||||
@applyNewFilter="applyFilter"
|
|
||||||
/>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="12" lg="9" md="12" sm="12" class="pl-lg-12" ref="divOnesecond">
|
|
||||||
<v-row>
|
|
||||||
<v-row v-if="!isIpadOrMobile" align="center" >
|
|
||||||
<v-col lg="6" md="4" sm="4" cols="4" class="py-0">
|
|
||||||
<p
|
|
||||||
class="h3 regular-font mb-1"
|
|
||||||
v-if="searchPageContent"
|
|
||||||
>Search results for : '{{ keywords }}'</p>
|
|
||||||
</v-col>
|
|
||||||
<v-col lg="2" md="4" sm="4" cols="4" class="py-0">
|
|
||||||
<p
|
|
||||||
class="text-uppercase primary--text my-3 mr-2 fontsize-14 body float-right ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b"
|
|
||||||
>Sort by:</p>
|
|
||||||
</v-col>
|
|
||||||
<v-col lg="4" md="3" sm="3" cols="4" class="py-0 pt-1 pl-2 pr-7">
|
|
||||||
<v-select
|
|
||||||
:items="criteria"
|
|
||||||
class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button categorybaseproducts-select-button select-change-icon regular-font"
|
|
||||||
dense
|
|
||||||
attach
|
|
||||||
flat
|
|
||||||
solo
|
|
||||||
ref="sortAndNextPage"
|
|
||||||
@change="sortAndNextPage()"
|
|
||||||
item-text="label"
|
|
||||||
item-value="value"
|
|
||||||
background-color="transparent"
|
|
||||||
v-model="sortBy"
|
|
||||||
append-icon="mdi-plus"
|
|
||||||
></v-select>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-row>
|
|
||||||
<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="pr-lg-4 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="pr-lg-4 cursor-pointer pt-lg-6"
|
|
||||||
@click="gotoProductDetails(product.n)"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
:src="imageBasePathUrl + product.i + imageBaseParams"
|
|
||||||
width="100%"
|
|
||||||
:alt="product.n"
|
|
||||||
:title="product.n"
|
|
||||||
></v-img>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="7" class="pb-0">
|
|
||||||
<h1
|
|
||||||
class="float-left fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
|
|
||||||
>{{ product.n }}</h1>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="5" class="pb-0">
|
|
||||||
<p
|
|
||||||
v-if="product.lp"
|
|
||||||
class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
|
|
||||||
>
|
|
||||||
From ${{ product.lp }}
|
|
||||||
{{ product.u }}
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
|
|
||||||
>
|
|
||||||
<div v-if="product.sp">
|
|
||||||
<s>${{ product.p }}</s>
|
|
||||||
<p class="red--text mb-0">${{ roundUp(product.sp) }}</p>
|
|
||||||
/ {{ product.u }}
|
|
||||||
</div>
|
|
||||||
<div v-else-if="product.p != 0">
|
|
||||||
<p>
|
|
||||||
${{ product.p }} /
|
|
||||||
{{ product.u }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<p>TBD</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-row class="pr-5">
|
|
||||||
<v-col cols="12" sm="6" md="8" lg="8">
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
sm="6"
|
|
||||||
md="8"
|
|
||||||
lg="8"
|
|
||||||
class="pa-0 custom-pagination d-flex flex-column"
|
|
||||||
>
|
|
||||||
<v-pagination
|
|
||||||
v-if="pageSize != 'ALL'"
|
|
||||||
prev-icon="Previous"
|
|
||||||
next-icon="Next"
|
|
||||||
class="categorybaseproducts-pagination-button d-flex justify-flex-start"
|
|
||||||
v-model="pageNumber"
|
|
||||||
:length="totalVisiblePages"
|
|
||||||
elevation="0"
|
|
||||||
@input="pageViewChange()"
|
|
||||||
circle
|
|
||||||
></v-pagination>
|
|
||||||
</v-col>
|
|
||||||
</v-col>
|
|
||||||
<v-col sm="6" md="4" lg="4" class="pt-0 d-none d-sm-block">
|
|
||||||
<v-row align="center" justify="end">
|
|
||||||
<p
|
|
||||||
class="mr-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-black-darken pt-6"
|
|
||||||
>Show:</p>
|
|
||||||
<v-overflow-btn
|
|
||||||
class="fontsize-16 body ls-n01 transparent-background fontcolor-black-darken categorybaseproducts-overflow-button"
|
|
||||||
:items="pageNum"
|
|
||||||
label="9"
|
|
||||||
v-model="pageSize"
|
|
||||||
flat
|
|
||||||
target="#dropdown-example"
|
|
||||||
height="36"
|
|
||||||
@change="pageSizeWiseProduct()"
|
|
||||||
></v-overflow-btn>
|
|
||||||
<p
|
|
||||||
class="ml-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-grey-shade8b pt-6"
|
|
||||||
>Per Page</p>
|
|
||||||
</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-alert type="error" text class="font-weight-300 body-font h3">{{
|
|
||||||
noProducts
|
|
||||||
}}</v-alert>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
/* eslint-disable no-alert, no-console , no-debugger */
|
|
||||||
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
|
|
||||||
import BreadcrumbComponent from "@/components/retailer/breadcrumb/Breadcrumb.vue";
|
|
||||||
import { createHelpers } from "vuex-map-fields";
|
|
||||||
import { mapState } from "vuex";
|
|
||||||
import CategoryHeroContent from "@/components/retailer/category/CategoryHeroContent.vue";
|
|
||||||
import FilterComponent from "@/components/retailer/filter/FilterComponent.vue";
|
|
||||||
|
|
||||||
const { mapFields } = createHelpers({
|
|
||||||
getterType: "catalogBrowser/getField",
|
|
||||||
mutationType: "catalogBrowser/updateField"
|
|
||||||
});
|
|
||||||
export default {
|
|
||||||
name: "SearchProductsComponent",
|
|
||||||
components: {
|
|
||||||
FilterComponent,
|
|
||||||
CategoryHeroContent,
|
|
||||||
BreadcrumbComponent
|
|
||||||
},
|
|
||||||
props: [
|
|
||||||
"criteria",
|
|
||||||
"searchPageContent",
|
|
||||||
"breadcrumbData",
|
|
||||||
"categoryPageContent"
|
|
||||||
],
|
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
searchResults: state => state.catalogBrowser.searchResults,
|
|
||||||
enabledFilters: state => state.catalogBrowser.enabledFilters,
|
|
||||||
searchTerms: state => state.catalogBrowser.searchTerms,
|
|
||||||
inProgress: state => state.catalogBrowser.inProgress,
|
|
||||||
totalProducts: state => state.catalogBrowser.totalItems,
|
|
||||||
availalableFilters: state => state.catalogBrowser.availalableFilters
|
|
||||||
}),
|
|
||||||
...mapFields([
|
|
||||||
"searchTerms",
|
|
||||||
"searchTerms.pageNumber",
|
|
||||||
"searchTerms.pageSize",
|
|
||||||
"searchTerms.keywords",
|
|
||||||
"searchTerms.sortBy",
|
|
||||||
"searchTerms.filters"
|
|
||||||
]),
|
|
||||||
easingOptions() {
|
|
||||||
return {
|
|
||||||
duration: this.duration,
|
|
||||||
easing: this.easing
|
|
||||||
};
|
|
||||||
},
|
|
||||||
categoryListIdWise: function() {
|
|
||||||
return this.$store.state.headerCategoryList.categoryListIdWise;
|
|
||||||
},
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_PATH_URL;
|
|
||||||
},
|
|
||||||
imageBaseParams() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PARAMS;
|
|
||||||
},
|
|
||||||
isIpadOrMobile: function() {
|
|
||||||
return this.$vuetify.display.mdAndDown ? true : false;
|
|
||||||
},
|
|
||||||
isIpad: function() {
|
|
||||||
return this.$vuetify.display.smOnly || this.$vuetify.display.mdOnly
|
|
||||||
? true
|
|
||||||
: false;
|
|
||||||
},
|
|
||||||
isMobile: function() {
|
|
||||||
return this.$vuetify.display.xs ? true : false;
|
|
||||||
},
|
|
||||||
categoryId: function() {
|
|
||||||
return this.$route.meta.id;
|
|
||||||
},
|
|
||||||
newUser() {
|
|
||||||
if (this.$vuetify.display.smAndDown) return false;
|
|
||||||
let userVisits = this.$store.state.layout.user.userVisits;
|
|
||||||
if (userVisits && Number(userVisits) > 1) return false;
|
|
||||||
else return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
totalProducts() {
|
|
||||||
if (this.pageSize != "ALL") {
|
|
||||||
this.totalVisiblePages = Math.ceil(
|
|
||||||
this.totalProducts / Number(this.pageSize)
|
|
||||||
);
|
|
||||||
// this.updatePageNumber();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
searchResults(){
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
keywords(){
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
categoryId(){
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
pageSize() {
|
|
||||||
if (this.pageSize != "ALL" && this.totalProducts) {
|
|
||||||
this.totalVisiblePages = Math.ceil(
|
|
||||||
this.totalProducts / Number(this.pageSize)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
closeFilterMenu: false,
|
|
||||||
checkClear: false,
|
|
||||||
easing: "easeInOutCubic",
|
|
||||||
easings: Object.keys(easings),
|
|
||||||
duration: 100,
|
|
||||||
totalVisiblePages: 0,
|
|
||||||
menu: false,
|
|
||||||
showDrawarFilter: false,
|
|
||||||
pageNum: [
|
|
||||||
{ text: 9, callback: () => 9 },
|
|
||||||
{ text: 18, callback: () => 18 },
|
|
||||||
{ text: 27, callback: () => 27 },
|
|
||||||
{ text: "ALL", callback: () => "ALL" }
|
|
||||||
],
|
|
||||||
noProducts: "No products found.",
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
async clearFilter() {
|
|
||||||
await this.$store.dispatch("catalogBrowser/clearFilter");
|
|
||||||
this.closeFilterMenu = true;
|
|
||||||
this.pageNumber=1;
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
},
|
|
||||||
async deleteFilter(value,index) {
|
|
||||||
await this.$store.dispatch("catalogBrowser/deleteSelectedFilter", {
|
|
||||||
index: index
|
|
||||||
});
|
|
||||||
this.pageNumber=1;
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
|
|
||||||
setFilterValue() {
|
|
||||||
this.closeFilterMenu = false;
|
|
||||||
},
|
|
||||||
async applyFilter(filterObj) {
|
|
||||||
await this.$store.dispatch("catalogBrowser/setNewFilter", filterObj);
|
|
||||||
this.closeFilterMenu = true;
|
|
||||||
this.pageNumber=1;
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
|
|
||||||
},
|
|
||||||
async actionClear() {
|
|
||||||
await this.$store.dispatch("catalogBrowser/clearFilter");
|
|
||||||
this.closeFilterMenu = true;
|
|
||||||
},
|
|
||||||
OnResize() {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (this.$vuetify.display.lgAndUp) {
|
|
||||||
this.showDrawarFilter = false;
|
|
||||||
}
|
|
||||||
}, 200);
|
|
||||||
},
|
|
||||||
gotoProductDetails(productName) {
|
|
||||||
// googleAanalyticsEventSelectContent('select_content',product,this.categoryId)
|
|
||||||
this.$router.push({
|
|
||||||
name: productName,
|
|
||||||
query: {
|
|
||||||
categoryId: this.categoryId,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
pageViewChange() {
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
//googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
pageSizeWiseProduct() {
|
|
||||||
this.updatePageNumber();
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
sortAndNextPage() {
|
|
||||||
this.$emit("criteriaChanged");
|
|
||||||
//googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
},
|
|
||||||
scrollToTop() {
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
},
|
|
||||||
updatePageNumber() {
|
|
||||||
if (this.pageNumber * Number(this.pageSize) > this.totalProducts) {
|
|
||||||
let quotient = Math.floor(this.totalProducts / Number(this.pageSize));
|
|
||||||
let remainder = this.totalProducts % Number(this.pageSize);
|
|
||||||
this.pageNumber = quotient + (remainder == 0 ? 0 : 1);
|
|
||||||
} else {
|
|
||||||
//this.pageNumber = Number(this.$route.query.pageNumber);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
roundUp(num) {
|
|
||||||
var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
|
|
||||||
return with2Decimals;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
if(this.searchTerms)
|
|
||||||
{
|
|
||||||
// googleAanalyticsEventCategoryPage(this.searchResults.page,this.categoryId)
|
|
||||||
}
|
|
||||||
if (this.totalProducts)
|
|
||||||
this.totalVisiblePages = Math.ceil(
|
|
||||||
this.totalProducts / Number(this.pageSize)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</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="./SearchProducts.scss" lang="scss" scoped />
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
table, th, td {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
@ -1,695 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-if="pageContent.length">
|
|
||||||
<div v-html="getPageContent()"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
/* eslint-disable */
|
|
||||||
export default {
|
|
||||||
name: "ShippingAndDeliveryComponent",
|
|
||||||
components: {},
|
|
||||||
computed: {
|
|
||||||
pageContent: function() {
|
|
||||||
return this.$store.state.layout.pageContent;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
pageUrlKey: "shipping-and-delivery",
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
getPageContent() {
|
|
||||||
if (this.pageContent.length) {
|
|
||||||
let data = this.pageContent.filter(element => {
|
|
||||||
return element.identifier === "shipping-and-delivery";
|
|
||||||
});
|
|
||||||
if (data.length > 0) {
|
|
||||||
let path = data[0].content;
|
|
||||||
var div = document.createElement("div");
|
|
||||||
div.innerHTML = path;
|
|
||||||
let imgSrcUrls = div.getElementsByTagName("img");
|
|
||||||
for (let i = 0; i < imgSrcUrls.length; i++) {
|
|
||||||
let urlValue = imgSrcUrls[i].getAttribute("src");
|
|
||||||
if (urlValue) {
|
|
||||||
imgSrcUrls[i].setAttribute(
|
|
||||||
"src",
|
|
||||||
this.imageBasePathUrl() +
|
|
||||||
"/media/" +
|
|
||||||
imgSrcUrls[i].src
|
|
||||||
.replace(window.location.href, "")
|
|
||||||
.replace(window.location.origin, "")
|
|
||||||
.replace(/%22%7D%7D/g, "")
|
|
||||||
.replace(/%7B%7B/g, "")
|
|
||||||
.replace(/%20url=%22/g, "")
|
|
||||||
.replace("media", "")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
imageBasePathUrl() {
|
|
||||||
return import.meta.env.VITE_APP_IMAGE_CATEGORY_PATH_URL;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.onload = function() {
|
|
||||||
document.getElementById("firstColumn").onmouseover = function() {
|
|
||||||
firstcolumnFunction();
|
|
||||||
};
|
|
||||||
document.getElementById("firstColumnOut").onmouseout = function() {
|
|
||||||
firstcolumnFunctionout();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("secondColumn").onmouseover = function() {
|
|
||||||
secondcolumnFunction();
|
|
||||||
};
|
|
||||||
document.getElementById("secondColumnOut").onmouseout = function() {
|
|
||||||
secondcolumnFunctionout();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("thirdColumn").onmouseover = function() {
|
|
||||||
thirdcolumnFunction();
|
|
||||||
};
|
|
||||||
document.getElementById("thirdColumnOut").onmouseout = function() {
|
|
||||||
thirdcolumnFunctionout();
|
|
||||||
};
|
|
||||||
|
|
||||||
function firstcolumnFunction() {
|
|
||||||
var x = document.getElementById("actualTable");
|
|
||||||
var y = document.getElementById("firstColumnTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function firstcolumnFunctionout() {
|
|
||||||
var x = document.getElementById("firstColumnTable");
|
|
||||||
var y = document.getElementById("actualTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function secondcolumnFunction() {
|
|
||||||
var x = document.getElementById("actualTable");
|
|
||||||
var y = document.getElementById("secondColumnTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function secondcolumnFunctionout() {
|
|
||||||
var x = document.getElementById("secondColumnTable");
|
|
||||||
var y = document.getElementById("actualTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
function thirdcolumnFunction() {
|
|
||||||
var x = document.getElementById("actualTable");
|
|
||||||
var y = document.getElementById("thirdColumnTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function thirdcolumnFunctionout() {
|
|
||||||
var x = document.getElementById("thirdColumnTable");
|
|
||||||
var y = document.getElementById("actualTable");
|
|
||||||
|
|
||||||
y.style.display = "table";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("firstCall").onclick = function() {
|
|
||||||
firstTableFunction();
|
|
||||||
};
|
|
||||||
document.getElementById("secondCall").onclick = function() {
|
|
||||||
secondTableFunction();
|
|
||||||
};
|
|
||||||
document.getElementById("thirdCall").onclick = function() {
|
|
||||||
thirdTableFunction();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("fourCall").onclick = function() {
|
|
||||||
fourTableFunction();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("fiveCall").onclick = function() {
|
|
||||||
fiveTableFunction();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("sixCall").onclick = function() {
|
|
||||||
sixTableFunction();
|
|
||||||
};
|
|
||||||
function firstTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("secondTable");
|
|
||||||
var z = document.getElementById("thirdTable");
|
|
||||||
if (x.style.display === "none") {
|
|
||||||
x.style.display = "block";
|
|
||||||
y.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
} else {
|
|
||||||
y.style.display = "block";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function secondTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("secondTable");
|
|
||||||
var z = document.getElementById("thirdTable");
|
|
||||||
|
|
||||||
if (y.style.display === "none") {
|
|
||||||
y.style.display = "block";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
} else {
|
|
||||||
y.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function thirdTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("thirdTable");
|
|
||||||
var z = document.getElementById("secondTable");
|
|
||||||
|
|
||||||
if (y.style.display === "none") {
|
|
||||||
y.style.display = "block";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
} else {
|
|
||||||
y.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fourTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("thirdTable");
|
|
||||||
var z = document.getElementById("secondTable");
|
|
||||||
|
|
||||||
if (y.style.display === "none") {
|
|
||||||
y.style.display = "block";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
} else {
|
|
||||||
y.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fiveTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("thirdTable");
|
|
||||||
var z = document.getElementById("secondTable");
|
|
||||||
|
|
||||||
if (y.style.display === "none") {
|
|
||||||
y.style.display = "block";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
} else {
|
|
||||||
y.style.display = "none";
|
|
||||||
z.style.display = "none";
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sixTableFunction() {
|
|
||||||
var x = document.getElementById("firstTable");
|
|
||||||
var y = document.getElementById("thirdTable");
|
|
||||||
var z = document.getElementById("secondTable");
|
|
||||||
|
|
||||||
if (z.style.display === "none") {
|
|
||||||
y.style.display = "none";
|
|
||||||
x.style.display = "none";
|
|
||||||
z.style.display = "block";
|
|
||||||
} else {
|
|
||||||
y.style.display = "block";
|
|
||||||
z.style.display = "none";
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("openDayOne").onclick = function() {
|
|
||||||
showDayOneOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
|
|
||||||
};
|
|
||||||
document.getElementById("openDaySecond").onclick = function() {
|
|
||||||
showDaySecondOptions(),closeDayOneOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayThird").onclick = function() {
|
|
||||||
showDayThirdOptions(),closeDaySecondOptions(),closeDayOneOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDaySixOptions();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayFour").onclick = function() {
|
|
||||||
showDayFourOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayOneOptions(),closeDayFiveOptions(),closeDaySixOptions();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayFive").onclick = function() {
|
|
||||||
showDayFiveOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayOneOptions(),closeDaySixOptions();
|
|
||||||
};
|
|
||||||
document.getElementById("openDaySix").onclick = function() {
|
|
||||||
showDaySixOptions(),closeDaySecondOptions(),closeDayThirdOptions(),closeDayFourOptions(),closeDayFiveOptions(),closeDayOneOptions();
|
|
||||||
};
|
|
||||||
function showDayOneOptions() {
|
|
||||||
var x = document.getElementById("dayOneOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayOneOptions").onclick = function() {
|
|
||||||
closeDayOneOptions();
|
|
||||||
};
|
|
||||||
function closeDayOneOptions() {
|
|
||||||
var x = document.getElementById("dayOneOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDaySecondOptions() {
|
|
||||||
var x = document.getElementById("daySecondOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("daySecondOptions").onclick = function() {
|
|
||||||
closeDaySecondOptions();
|
|
||||||
};
|
|
||||||
function closeDaySecondOptions() {
|
|
||||||
var x = document.getElementById("daySecondOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayThirdOptions() {
|
|
||||||
var x = document.getElementById("dayThirdOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayThirdOptions").onclick = function() {
|
|
||||||
closeDayThirdOptions();
|
|
||||||
};
|
|
||||||
function closeDayThirdOptions() {
|
|
||||||
var x = document.getElementById("dayThirdOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayFourOptions() {
|
|
||||||
var x = document.getElementById("dayFourOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayFourOptions").onclick = function() {
|
|
||||||
closeDayFourOptions();
|
|
||||||
};
|
|
||||||
function closeDayFourOptions() {
|
|
||||||
var x = document.getElementById("dayFourOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayFiveOptions() {
|
|
||||||
var x = document.getElementById("dayFiveOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayFiveOptions").onclick = function() {
|
|
||||||
closeDayFiveOptions();
|
|
||||||
};
|
|
||||||
function closeDayFiveOptions() {
|
|
||||||
var x = document.getElementById("dayFiveOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDaySixOptions() {
|
|
||||||
var x = document.getElementById("daySixOptions");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("daySixOptions").onclick = function() {
|
|
||||||
closeDaySixOptions();
|
|
||||||
};
|
|
||||||
function closeDaySixOptions() {
|
|
||||||
var x = document.getElementById("daySixOptions");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("openDayOneMobileView").onclick = function() {
|
|
||||||
showDayOneOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
document.getElementById("openDaySecondMobileView").onclick = function() {
|
|
||||||
showDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayThirdMobileView").onclick = function() {
|
|
||||||
showDayThirdOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayFourMobileView").onclick = function() {
|
|
||||||
showDayFourOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayOneOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
document.getElementById("openDayFiveMobileView").onclick = function() {
|
|
||||||
showDayFiveOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayOneOptionsMobileView(),closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
document.getElementById("openDaySixMobileView").onclick = function() {
|
|
||||||
showDaySixOptionsMobileView(),closeDaySecondOptionsMobileView(),closeDayThirdOptionsMobileView(),closeDayFourOptionsMobileView(),closeDayFiveOptionsMobileView(),closeDayOneOptionsMobileView();
|
|
||||||
};
|
|
||||||
function showDayOneOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayOneOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayOneOptionsMobileView").onclick = function() {
|
|
||||||
closeDayOneOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDayOneOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayOneOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDaySecondOptionsMobileView() {
|
|
||||||
var x = document.getElementById("daySecondOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("daySecondOptionsMobileView").onclick = function() {
|
|
||||||
closeDaySecondOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDaySecondOptionsMobileView() {
|
|
||||||
var x = document.getElementById("daySecondOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayThirdOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayThirdOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayThirdOptionsMobileView").onclick = function() {
|
|
||||||
closeDayThirdOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDayThirdOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayThirdOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayFourOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayFourOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayFourOptionsMobileView").onclick = function() {
|
|
||||||
closeDayFourOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDayFourOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayFourOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDayFiveOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayFiveOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("dayFiveOptionsMobileView").onclick = function() {
|
|
||||||
closeDayFiveOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDayFiveOptionsMobileView() {
|
|
||||||
var x = document.getElementById("dayFiveOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
function showDaySixOptionsMobileView() {
|
|
||||||
var x = document.getElementById("daySixOptionsMobileView");
|
|
||||||
x.style.display = "block";
|
|
||||||
}
|
|
||||||
document.getElementById("daySixOptionsMobileView").onclick = function() {
|
|
||||||
closeDaySixOptionsMobileView();
|
|
||||||
};
|
|
||||||
function closeDaySixOptionsMobileView() {
|
|
||||||
var x = document.getElementById("daySixOptionsMobileView");
|
|
||||||
x.style.display = "none";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// this.$store.dispatch("block/fetchOne",10)
|
|
||||||
//this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
|
|
||||||
//this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
table,
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
border: 1px solid #2850da;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
#secondTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#thirdTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#firstColumnTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#secondColumnTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#thirdColumnTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
background-color: #2850da;
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-map-image{
|
|
||||||
width:100%;
|
|
||||||
min-height: 415px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-col-10{
|
|
||||||
max-width:83%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-image{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-col-4 {
|
|
||||||
width: 33.33%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-row {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.shipping-delivery-height-315 {
|
|
||||||
height: 315px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-cols-6 {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-ups-first {
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.shipping-delivery-ups-second {
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.shipping-delivery-ups-third {
|
|
||||||
background-position: left center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.shipping-delivery-page-primary-link {
|
|
||||||
color: #2850da !important;
|
|
||||||
& .shipping-delivery-page-icon {
|
|
||||||
background-image: url("@/assets/right-arrow.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shipping-delivery-page-primary-link:hover {
|
|
||||||
color: #fff !important;
|
|
||||||
& .shipping-delivery-page-icon {
|
|
||||||
background-image: url("@/assets/right-arrow-white.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shipping-delivery-page-link {
|
|
||||||
color: #ccb7ff !important;
|
|
||||||
& .shipping-delivery-page-icon {
|
|
||||||
background-image: url("@/assets/right-hover-arrow.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shipping-delivery-page-link:hover {
|
|
||||||
color: #fff !important;
|
|
||||||
& .shipping-delivery-page-icon {
|
|
||||||
background-image: url("@/assets/right-arrow-white.png");
|
|
||||||
max-width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-position: right center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.showonhover {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-hero-min-height-800 {
|
|
||||||
min-height: 800px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-horizontal-line {
|
|
||||||
border: 0.0625rem solid #2850da !important;
|
|
||||||
width: 100%;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.shipping-delivery-vertical-line {
|
|
||||||
border-left: 1px solid #2850da;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-days-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 130px;
|
|
||||||
border: thin solid #2850da;
|
|
||||||
}
|
|
||||||
.shipping-delivery-days-button-mobileview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width:100% ;
|
|
||||||
border:none!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shipping-delivery-dayone-inside {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-days-options {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.shipping-delivery-days-button:hover .shipping-delivery-days-options {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 130px;
|
|
||||||
margin-left: -1px;
|
|
||||||
z-index: 9999;
|
|
||||||
border: thin solid #2850da;
|
|
||||||
}
|
|
||||||
#dayOneOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#daySecondOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayThirdOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayFourOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayFiveOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#daySixOptions{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayOneOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#daySecondOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayThirdOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayFourOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#dayFiveOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#daySixOptionsMobileView{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.shipping-delivery-days-options-mobileview {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 130px;
|
|
||||||
margin-left: -1px;
|
|
||||||
z-index: 9999;
|
|
||||||
border: thin solid #2850da;
|
|
||||||
}
|
|
||||||
.shipping-delivery-dayone-square {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-daysix-inside-square {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
border-bottom: thin solid #2850da;
|
|
||||||
}
|
|
||||||
.shipping-delivery-daysecond-square {
|
|
||||||
opacity: 0.8 !important;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-daythird-square {
|
|
||||||
opacity: 0.6 !important;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-dayfour-square {
|
|
||||||
opacity: 0.4 !important;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-dayfive-square {
|
|
||||||
opacity: 0.2 !important;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
.shipping-delivery-daysix-square {
|
|
||||||
opacity: 0 !important;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plus {
|
|
||||||
display: inline-block;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
|
|
||||||
background-position: center;
|
|
||||||
background-size: 40% 2px, 2px 40%; /*thickness = 2px, length = 50% (25px)*/
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.minus {
|
|
||||||
display: inline-block;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
|
|
||||||
background-position: center;
|
|
||||||
background-size: 40% 2px; /*thickness = 2px, length = 50% (25px)*/
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
@media (min-width:600px) and (max-width:768px) {
|
|
||||||
.shipping-delivery-days-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100px;
|
|
||||||
border: thin solid #2850da;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.shipping-delivery-cols-6 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
background-color: #c6c9d3;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.shipping-delivery-row {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.shipping-delivery-col-4 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style src="./ShippingAndDeliveryComponent.scss" lang="scss" scoped />
|
|
||||||
|
|
@ -21,9 +21,8 @@
|
||||||
<v-col cols="12" sm="12" md="12">
|
<v-col cols="12" sm="12" md="12">
|
||||||
<v-col cols="12" sm="12" md="8">
|
<v-col cols="12" sm="12" md="8">
|
||||||
|
|
||||||
<v-menu location="bottom" attach>
|
|
||||||
<template v-slot:activator="{ props}">
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
id="menu-activator"
|
||||||
prepend-inner-icon="mdi-magnify"
|
prepend-inner-icon="mdi-magnify"
|
||||||
placeholder="Enter Item, Name, Keyword"
|
placeholder="Enter Item, Name, Keyword"
|
||||||
v-model="searchData"
|
v-model="searchData"
|
||||||
|
|
@ -34,15 +33,17 @@
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
>
|
>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
</template>
|
<v-menu activator="#menu-activator" contained location-strategy='connected' attach>
|
||||||
<v-card tile flat v-if="searchData">
|
<v-card tile flat v-if="searchData">
|
||||||
|
<v-container>
|
||||||
<RetailerSearchProducts @actionClose="showSnackBarMessage"/>
|
<RetailerSearchProducts @actionClose="showSnackBarMessage"/>
|
||||||
|
</v-container>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-card v-else>
|
<v-card v-else>
|
||||||
<div class="fontcolor-bordeaux pa-1">Please type Item, Name, or Keyword to search</div>
|
<div class="fontcolor-bordeaux pa-1">Please type Item, Name, or Keyword to search</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
||||||
</v-menu>
|
</v-menu>
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue