fixes ui
This commit is contained in:
rakesh
parent
03ad966265
commit
b30e6d0f2a
|
|
@ -3,8 +3,7 @@
|
|||
<v-snackbar
|
||||
:color="snackbar.color"
|
||||
v-model="snackbar.show"
|
||||
right
|
||||
top
|
||||
location="right top"
|
||||
:timeout="snackbar.timeout"
|
||||
>{{ snackbar.message }}</v-snackbar>
|
||||
</v-container>
|
||||
|
|
@ -13,14 +12,5 @@
|
|||
export default {
|
||||
name: "SnackbarComponent",
|
||||
props:["snackbar"],
|
||||
data: () => ({
|
||||
}),
|
||||
components: {},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
created() {
|
||||
}
|
||||
};
|
||||
</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() {},
|
||||
};
|
||||
</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 />
|
||||
|
|
@ -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="8">
|
||||
|
||||
<v-menu location="bottom" attach>
|
||||
<template v-slot:activator="{ props}">
|
||||
<v-text-field
|
||||
id="menu-activator"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
placeholder="Enter Item, Name, Keyword"
|
||||
v-model="searchData"
|
||||
|
|
@ -34,15 +33,17 @@
|
|||
v-bind="props"
|
||||
>
|
||||
</v-text-field>
|
||||
</template>
|
||||
<v-menu activator="#menu-activator" contained location-strategy='connected' attach>
|
||||
<v-card tile flat v-if="searchData">
|
||||
<v-container>
|
||||
<RetailerSearchProducts @actionClose="showSnackBarMessage"/>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-card v-else>
|
||||
<div class="fontcolor-bordeaux pa-1">Please type Item, Name, or Keyword to search</div>
|
||||
</v-card>
|
||||
|
||||
</v-menu>
|
||||
|
||||
</v-col>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
|
|||
Loading…
Reference in New Issue