diff --git a/src/components/common/SnackbarComponent.vue b/src/components/common/SnackbarComponent.vue
index 1b3eb8f..839a765 100644
--- a/src/components/common/SnackbarComponent.vue
+++ b/src/components/common/SnackbarComponent.vue
@@ -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>
diff --git a/src/components/common/SubscriptionDialog.vue b/src/components/common/SubscriptionDialog.vue
deleted file mode 100644
index bb7844c..0000000
--- a/src/components/common/SubscriptionDialog.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/retailer/breadcrumb/Breadcrumb.scss b/src/components/retailer/breadcrumb/Breadcrumb.scss
deleted file mode 100644
index 213c92d..0000000
--- a/src/components/retailer/breadcrumb/Breadcrumb.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.disabled {
- color: #2c50da;
- pointer-events: none;
-}
-
-.text-color-black {
- color: #B7B7B7;
-}
\ No newline at end of file
diff --git a/src/components/retailer/breadcrumb/Breadcrumb.vue b/src/components/retailer/breadcrumb/Breadcrumb.vue
deleted file mode 100644
index 2197d9d..0000000
--- a/src/components/retailer/breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -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 />
\ No newline at end of file
diff --git a/src/components/retailer/filter/FilterComponent.scss b/src/components/retailer/filter/FilterComponent.scss
deleted file mode 100644
index a5a785a..0000000
--- a/src/components/retailer/filter/FilterComponent.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/filter/FilterComponent.vue b/src/components/retailer/filter/FilterComponent.vue
deleted file mode 100644
index 53e4106..0000000
--- a/src/components/retailer/filter/FilterComponent.vue
+++ /dev/null
@@ -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/>
\ No newline at end of file
diff --git a/src/components/retailer/gift-guide/GiftGuideComponent.vue b/src/components/retailer/gift-guide/GiftGuideComponent.vue
deleted file mode 100644
index 3b76b0d..0000000
--- a/src/components/retailer/gift-guide/GiftGuideComponent.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/components/retailer/home/HomeComponent.scss b/src/components/retailer/home/HomeComponent.scss
deleted file mode 100644
index 585c1a1..0000000
--- a/src/components/retailer/home/HomeComponent.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/home/HomeComponent.vue b/src/components/retailer/home/HomeComponent.vue
deleted file mode 100644
index 1d3b678..0000000
--- a/src/components/retailer/home/HomeComponent.vue
+++ /dev/null
@@ -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 />
\ No newline at end of file
diff --git a/src/components/retailer/home/PostScriptBlog.scss b/src/components/retailer/home/PostScriptBlog.scss
deleted file mode 100644
index 93d3cf5..0000000
--- a/src/components/retailer/home/PostScriptBlog.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/home/PostScriptBlog.vue b/src/components/retailer/home/PostScriptBlog.vue
deleted file mode 100644
index 6d0d418..0000000
--- a/src/components/retailer/home/PostScriptBlog.vue
+++ /dev/null
@@ -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 />
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss b/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss
deleted file mode 100644
index 2a54e6e..0000000
--- a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue b/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue
deleted file mode 100644
index 4907365..0000000
--- a/src/components/retailer/product-detail/ConfiguredProductDetailComponent.vue
+++ /dev/null
@@ -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/>
diff --git a/src/components/retailer/product-detail/GiftCardDetailsComponent.scss b/src/components/retailer/product-detail/GiftCardDetailsComponent.scss
deleted file mode 100644
index 4ada2a4..0000000
--- a/src/components/retailer/product-detail/GiftCardDetailsComponent.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/GiftCardDetailsComponent.vue b/src/components/retailer/product-detail/GiftCardDetailsComponent.vue
deleted file mode 100644
index ab824c0..0000000
--- a/src/components/retailer/product-detail/GiftCardDetailsComponent.vue
+++ /dev/null
@@ -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/>
diff --git a/src/components/retailer/product-detail/ProductDetailComponent.scss b/src/components/retailer/product-detail/ProductDetailComponent.scss
deleted file mode 100644
index 4aa6756..0000000
--- a/src/components/retailer/product-detail/ProductDetailComponent.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/ProductDetailComponent.vue b/src/components/retailer/product-detail/ProductDetailComponent.vue
deleted file mode 100644
index 364740c..0000000
--- a/src/components/retailer/product-detail/ProductDetailComponent.vue
+++ /dev/null
@@ -1,1016 +0,0 @@
-<template>
- <v-container class="white">
- <v-row class="mt-12" justify="center" v-if="fetchInProgress || updateProgress">
- <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
- </v-row>
- <v-row class="mb-md-10" v-else-if="!fetchErrorMessage">
- <v-col cols="1" class="d-none d-sm-block pr-4" v-if="productDetails.mediaGalleryEntries.length">
- <div v-for="(productImage,index) in productDetails.mediaGalleryEntries" v-bind:key="index">
- <div v-if="productImage.mediaType === 'image'">
- <v-col class="pb-2 pt-0 pl-0 pr-0">
- <v-hover v-slot:default="{ hover }">
- <v-card
- outlined
- @click="setSelected(productImage.file,index)"
- :color="hover ? blue : white"
- v-bind:class="{ 'primary': index==selected }"
- tile
- v-if="productImage.file"
- >
- <v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
- </v-card>
- </v-hover>
- </v-col>
- </div>
- </div>
- </v-col>
- <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="productDetails.mediaGalleryEntries.length==0">
- <v-col class="pb-2 pt-0 px-0">
- <v-hover v-slot:default="{ hover }">
- <v-card
- outlined
- :color="hover ? blue : white"
- class="primary"
- tile
- >
- <v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
- </v-card>
- </v-hover>
- </v-col>
- </v-col>
- <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-if="imagepath">
- <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
- <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
- </v-col>
- <v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name" ></v-img>
- </v-col>
- <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else>
- <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
- <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
- </v-col>
- <v-img :src="imageBasePathUrl + (this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:'')" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
- </v-col>
- <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="productDetails.mediaGalleryEntries.length">
- <v-col
- v-for="(productImage,index) in productDetails.mediaGalleryEntries"
- v-bind:key="index"
- v-show="productImage.mediaType === 'image'"
- class="px-2"
- cols="3"
- >
- <v-hover v-slot:default="{ hover }">
- <v-card
- max-width="70"
- max-height="70"
- class="mx-auto"
- outlined
- @click="setSelected(productImage.file,index)"
- :color="hover ? blue : white"
- v-bind:class="{ 'primary': index==selected }"
- tile
- v-if="productImage.file"
- >
- <v-img
- v-bind:src="imageBasePathUrl + productImage.file"
- max-width="70"
- max-height="70"
- @error="setAltImg()"
- :alt="productImage.name" :title="productImage.name"
- ></v-img>
- </v-card>
- </v-hover>
- </v-col>
- </v-row>
- <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="productDetails.mediaGalleryEntries.length==0">
- <v-col
- class="px-2"
- cols="3"
- >
- <v-hover v-slot:default="{ hover }">
- <v-card
- max-width="70"
- max-height="70"
- class="mx-auto primary"
- outlined
- :color="hover ? blue : white"
- tile
- >
- <v-img
- v-bind:src="imageBasePathUrl+''"
- max-width="70"
- max-height="70"
- @error="setAltImg()"
- :alt="productDetails.name" :title="productDetails.name"
- ></v-img>
- </v-card>
- </v-hover>
- </v-col>
- </v-row>
- <!-- <v-progress-circular :size="60" color="primary" indeterminate v-if="fetchInProgress"></v-progress-circular>-->
- <v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
- <v-row>
- <v-col md="12" cols="12" class="pr-0 pt-0">
- <h1
- class="font-weight-300 d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
- >{{ productDetails.name}}</h1>
- <p
- class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
- >{{productDetails.sku}}</p>
- </v-col>
- <!--<v-col md="1" cols="2" align="right" justify="right" class="pl-0 pt-0">
- <v-icon light class="pt-1 d-none d-sm-block">mdi-heart-outline</v-icon>
- <v-icon light class="d-block d-sm-none productpage-icon">mdi-heart-outline</v-icon>
- </v-col>-->
- </v-row>
- <p
- class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
- >sku {{productDetails.sku}}</p>
- <p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
- <v-row class="pt-3">
- <v-col cols="6" sm="12" md="12" lg="5" class="pr-0 pb-0">
- <p
- class="body-font mb-0 caption ls-n008 fontcolor-grey-darken pb-1"
- >{{productDetails.unitDescription}}</p>
- <!-- <p
- class="body title-color-black"
- >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p> (old code )-->
- <p
- v-if="getCustomAttributeValue(productDetails.customAttribute,'lowest_price')"
- class="body title-color-black"
- >From ${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'lowest_price'), true)}} {{ productDetails.uom}}</p>
- <div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
- <div v-if="getCustomAttributeValue(productDetails.customAttribute,'special_price') ">
- <s>${{priceFormatter( productDetails.price, true)}}</s>
- <span
- class="red--text mb-0"
- >${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'special_price'), true)}}</span>
- / {{ productDetails.uom}}
- </div>
- <p
- v-else
- class="body title-color-black"
- >${{priceFormatter(productDetails.price, true)}} / {{ productDetails.uom}}</p>
- </div>
-
- <!-- <p
- v-else
- class="body title-color-black"
- >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p>-->
- </v-col>
- <v-col
- align="right"
- justify="right"
- cols="6"
- sm="12"
- md="12"
- lg="7"
- class="d-none d-sm-block pb-0"
- >
- <div
- v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
- >
- <v-hover v-slot:default="{ hover }">
- <v-select
- :items="qtyPriceOptions"
- class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
- dense
- attach
- flat
- solo
- item-text="price"
- item-value="qty"
- single-line
- v-model="selectedQty"
- ref="selectedQty1"
- background-color="transparent"
- append-icon="mdi-plus"
- >
- <template v-slot:selection="data">
- <span
- class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
- :class="hover || !isActive?'primary--text':'black--text'"
- >{{data.item.qty}} ($ {{ data.item.price }} )</span>
- </template>
- <template v-slot:item="data">
- <template>
- <v-list-item-content @click="isActive = true">
- <v-list-item-title
- class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
- >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
- </v-list-item-content>
- </template>
- </template>
- </v-select>
- </v-hover>
- </div>
- <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
- <v-select
- :items="numberOptions"
- class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
- dense
- attach
- flat
- solo
- v-model="selectedQty"
- ref="selectedQty2"
- background-color="transparent"
- append-icon="mdi-plus"
- ></v-select>
- </div>
- </v-col>
-
- <v-col align="right" justify="right" cols="6" class="d-block d-sm-none pl-4 pb-0">
- <div
- v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
- >
- <v-hover v-slot:default="{ hover }">
- <v-select
- :items="qtyPriceOptions"
- class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
- dense
- attach
- flat
- solo
- item-text="price"
- item-value="qty"
- single-line
- v-model="selectedQty"
- ref="selectedQty3"
- background-color="transparent"
- append-icon="mdi-plus"
- >
- <template v-slot:selection="data">
- <span
- class="fontsize-14 d-block text-truncate ml-1 line-height-21 ls-n009 regular-font font-weight-400"
- :class="hover || !isActive?'primary--text':'black--text'"
- >{{data.item.qty}} ($ {{ data.item.price }} )</span>
- </template>
- <template v-slot:item="data">
- <template>
- <v-list-item-content @click="isActive = true">
- <v-list-item-title
- class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
- >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
- </v-list-item-content>
- </template>
- </template>
- </v-select>
- </v-hover>
- </div>
- <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
- <v-hover v-slot:default="{ hover }">
- <v-select
- :items="numberOptions"
- class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
- dense
- attach
- flat
- solo
- outlined
- :class="hover?'primary--text':'black--text'"
- v-model="selectedQty"
- background-color="transparent"
- ref="selectedQty4"
- append-icon="mdi-plus"
- ></v-select>
- </v-hover>
- </div>
- </v-col>
- </v-row>
- <!--<v-row>
- <v-col cols="auto" class="pr-0 pt-0">
- <div v-for="(colors,index) in productDetails.customAttribute" v-bind:key="index">
- <div v-if="colors.attributeCode === 'color'">
- <v-btn-toggle
- v-for="(color,index) in colors.value"
- v-bind:key="index"
- v-model="selected"
- :color="color"
- group
- rounded
- >
- <v-btn
- elevation="0"
- class="ml-0 mr-2"
- @click="setValue(color)"
- :color="color"
- :value="color"
- small
- ></v-btn>
- </v-btn-toggle>
- </div>
- </div>
- </v-col>
- </v-row>-->
- <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
- <p class="py-0 my-0 red--text">{{ errorMessage }}</p>
- <v-row v-if="!itemId">
- <v-col
- class="pt-4"
- v-if="productDetails.status=='1' && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0' ) && stockFlag"
- >
- <v-hover v-slot:default="{ hover }">
- <v-btn
- :disabled="inProgress"
- block
- x-large
- :outlined="!inProgress ? hover:false"
- :color="hover?'white':'primary'"
- :class="hover?'primary--text':'white--text'"
- class="text-uppercase ls-0 body productpage-button"
- tile
- depressed
- @click="addToCart(productDetails.sku,productDetails)"
- >
- <v-progress-circular
- align="center"
- :size="40"
- block
- color="primary"
- indeterminate
- v-if="inProgress"
- ></v-progress-circular>
- <span v-if="!inProgress">ADD TO CART</span>
- </v-btn>
- </v-hover>
- </v-col>
- <v-col
- v-else-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1'&& qtyPriceOptions.length > 0 && stockFlag"
- >
- <v-hover v-slot:default="{ hover }">
- <v-btn
- block
- x-large
- class="text-uppercase ls-0 body pb-1 productpage-button"
- :outlined="!hover"
- :color="hover?'primary':'white'"
- :class="hover?'white--text':'primary--text'"
- tile
- depressed
- @click="gotoPersonalize(productDetails)"
- >PERSONALIZE</v-btn>
- </v-hover>
- </v-col>
- <v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
- <v-btn
- block
- x-large
- class="text-uppercase ls-0 body pb-1 white--text"
- tile
- color="#97ABB4"
- depressed
- >UNAVAILABLE</v-btn>
- </v-col>
- </v-row>
-
- <v-row v-else>
- <v-col
- class="pt-4"
- v-if="itemId && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')"
- >
- <v-hover v-slot:default="{ hover }">
- <v-btn
- :disabled="inProgress"
- block
- x-large
- depressed
- :outlined="!inProgress ? hover:false"
- :color="hover?'white':'primary'"
- :class="hover?'primary--text':'white--text'"
- class="text-uppercase ls-0 body productpage-button"
- tile
- @click="updateToCart(productDetails.name,productDetails.sku)"
- >
- <v-progress-circular
- align="center"
- :size="40"
- color="primary"
- indeterminate
- v-if="inProgress"
- ></v-progress-circular>
- <span v-if="!inProgress">UPDATE CART</span>
- </v-btn>
- </v-hover>
- </v-col>
- </v-row>
- <v-row>
-
- </v-row>
- <v-row>
- <v-col class="pt-5">
- <v-tabs color="black" class="product-overview-tabs">
- <v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
- <v-tab-item>
- <ul class="py-3 fontsize-16 body-font ls-n008">
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
- </ul>
- </v-tab-item>
- <v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
- <v-tab-item>
- <ul class="py-3 fontsize-16 body-font ls-n008">
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
- </ul>
- </v-tab-item>
- <v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
- <v-tab-item>
- <ul class="py-3 fontsize-16 body-font ls-n008">
- <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
- <li>Standard shipping available</li>
- <li>Expedited shipping available</li>
- <li>Ships from Cohoes, NY</li>
- </ul>
- </v-tab-item>
- </v-tabs>
- </v-col>
- </v-row>
- </v-col>
- </v-row>
- <v-row v-else>
- <v-col class="text-center">
- <v-alert type="error" text>{{fetchErrorMessage}}</v-alert>
- </v-col>
- </v-row>
- <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
- </v-container>
-</template>
-<script>
-const personlizeUrl = 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 { priceFormatter, getLable, customAttributeValue , /*criteoForCurrentProduct, */setCategoryNameInLocal} from "@/services/util.service";
-//import { getAuthUser } from "@/services/auth";
-/* eslint-disable no-alert, no-console , no-debugger */
-export default {
- name: "ProductDetailsComponent",
- props: ["productDetails","stockFlag","categoryId"],
- components: { SnackbarComponent },
- data: () => ({
- productDefaultImage:require('@/assets/defaultProduct.jpg'),
- updateProgress: "",
- dropDownIcon: "mdi mdi-plus",
- iconColor: "black--text",
- isActive: true,
- easings: Object.keys(easings),
- snackbar: {
- show: false,
- message: null,
- color: null,
- timeout: 0
- },
- selectedQty: "",
- blue: "primary",
- white: "white",
- errorMessage: "",
- itemNumber: "193C",
- quantity: "25",
- savFromKey: "Ub07GxNhS3yyoDfO",
- ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
- selected: "",
- imagepath: "",
- fav: true,
- menu: false,
- message: false,
- hints: true,
- priceOptions: [
- { text: "31 ($110.00)", callback: () => "31 ($110.00)" },
- { text: "32 ($110.00)", callback: () => "32 ($110.00)" },
- { text: "33 ($110.00)", callback: () => "33 ($110.00)" }
- ],
- priceFormatter: priceFormatter,
- /*numberOptions: [
- { qty: "1 ", callback: () => "1" },
- { qty: "2", callback: () => "2" },
- { qty: "3", callback: () => "3" }
- ]*/
- }),
- computed: {
- imageBasePathUrl() {
- return 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 qtyPriceArray = this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "qty_price"
- );
- if(qtyPriceArray){
- let list = JSON.parse(
- this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "qty_price"
- )
- );
- if (this.qty) {
- vm.selectedQty = this.qty.toString();
- } else {
- vm.selectedQty = list[0].qty;
- }
- vm.validPersonalisedProduct = true;
- return list;
- }else{
- vm.validPersonalisedProduct = false;
- }
- return [];
- },
- numberOptions: function() {
- let vm = this;
- if (this.productDetails.customAttribute) {
- let minSalesQty = this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "ba_min_sales_qty"
- );
- let qtyIncrements = this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "ba_qty_increments"
- );
- minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
- qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;
-
- let nums = [];
- nums[0] = minSalesQty;
- if (this.qty) {
- vm.selectedQty = Number(this.qty);
- } else {
- vm.selectedQty = minSalesQty;
- }
- for (let i = 1; i <= 98; i++) {
- minSalesQty = minSalesQty + qtyIncrements;
- nums[i] = minSalesQty;
- }
- if (nums.length > 0) return nums;
- else return "";
-
- // return minSalesQty + " " + qtyIncrements;
- } else {
- return "";
- }
- },
- userAuth: function() {
- return this.$store.state.auth.userAuth;
- },
-
- inProgress: function() {
- if (this.userAuth) {
- return this.$store.state.userCartProduct.inProgress;
- } else {
- return this.$store.state.cartProduct.inProgress;
- }
- },
- fetchInProgress: function() {
- return this.$store.state.productOne.fetchInProgress;
- },
- fetchErrorMessage: function() {
- return this.$store.state.productOne.errorMessage;
- }
- },
- watch: {
- productDetails() {
- this.imagepath = this.productDetails.mediaGalleryEntries && this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:"";
- // criteoForCurrentProduct(this.productDetails.id);
- }
- /* qtyPriceOptions()
- {
- if(this.qtyPriceOptions.length > 0)
- this.selectedQty=this.qtyPriceOptions[0];
- }*/
- },
- methods: {
- setAltImg() {
- event.target.src =this.productDefaultImage
- },
- getCustomAttributeValue(customAttributes, attributeCode) {
- return customAttributeValue(customAttributes, attributeCode);
- },
- addToCart(sku,productDetails) {
- let vm =this;
- let qtyNew=this.selectedQty;
- if (this.selectedQty) {
- this.errorMessage = "";
- if (this.userAuth) {
- this.$store
- .dispatch("userCartProduct/addToCart", {
- sku: sku,
- qty: this.selectedQty,
- ccid: null,
- price: null,
- personalizeDetails: null
- })
- .then((res) => {
- // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
- if(this.categoryId)
- {
- setCategoryNameInLocal(this.categoryId,res);
- }
-
- this.$store.dispatch("userCartProduct/cartProductList");
- // this.$store.dispatch("userCartProduct/productTotalAmt");
- this.$store.dispatch("userCartProduct/cartDrawer", true);
- this.snackbar = {
- message: "Product Added Successfully",
- color: "success",
- show: true,
- timeout: 2000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- })
- .catch(error => {
- this.snackbar = {
- message: error.message,
- color: "error",
- show: true,
- timeout: 2000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- });
- } else {
- this.$store
- .dispatch("cartProduct/addToCart", {
- sku: sku,
- qty: this.selectedQty,
- ccid: null,
- price: null,
- personalizeDetails: null
- })
- .then((res) => {
- // googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
- if(this.categoryId)
- {
- setCategoryNameInLocal(this.categoryId,res);
- }
- this.snackbar = {
- message: "Product Added Successfully",
- color: "success",
- show: true,
- timeout: 2000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- })
- .catch(error => {
- this.snackbar = {
- message: error.message,
- color: "error",
- show: true,
- timeout: 2000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- });
- }
- } else {
- this.errorMessage = "Please Select Quantity";
- }
- },
- updateToCart(productName,sku) {
- if (this.selectedQty) {
- this.errorMessage = "";
- if (this.userAuth) {
- this.$store
- .dispatch("userCartProduct/updateToCart", {
- sku: sku,
- qty: this.selectedQty,
- itemId: this.itemId,
- ccid: null,
- price: null,
- personalizeDetails: null
- })
- .then(() => {
- this.snackbar = {
- message: "Product Updated Successfully",
- color: "success",
- show: true,
- timeout: 3000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- })
- .catch(error => {
- this.snackbar = {
- message: error.message,
- color: "error",
- show: true,
- timeout: 3000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- });
- } else {
- this.$store
- .dispatch("cartProduct/updateToCart", {
- sku: sku,
- qty: this.selectedQty,
- itemId: this.itemId,
- ccid: null,
- price: null,
- personalizeDetails: null
- })
- .then(() => {
- this.snackbar = {
- message: "Product Updated Successfully",
- color: "success",
- show: true,
- timeout: 3000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- })
- .catch(error => {
- this.snackbar = {
- message: error.message,
- color: "error",
- show: true,
- timeout: 3000
- };
- // setTimeout(() => {
- // this.$router.push({
- // name: "CategoryPage",
- // params: { category: "stationery" }
- // });
- // }, 5000);
- });
- }
- if(this.$route.name == productName)
- this.$router.push({
- name: productName,
- query: { "qty": this.selectedQty, "itemId": this.itemId }
- }).catch(error => {
- error;
- });
- } else {
- this.errorMessage = "Please Select Quantity";
- }
- },
- /* getAttribute(customAttributes, attributeCode) {
- return attribute(customAttributes, attributeCode, this.productAttributes);
- },*/
- getCustomAttributeLable(customAttributes, attributeCode) {
- return getLable(customAttributes, attributeCode);
- },
-
- setValue(color) {
- return (this.selected = color) && (this.errorMessage = "");
- },
- submit() {
- if (this.selected !== "") {
- return (this.selected = "") && (this.errorMessage = "");
- } else {
- this.errorMessage = "Please Select Color";
- }
- },
- gotoPersonalize(productDetails) {
- // window.open(`${personlizeUrl}/product/${this.sku}`, "_self");
- if (
- this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "builder_version"
- ) === "1.0" ||
- this.getCustomAttributeLable(
- this.productDetails.customAttribute,
- "builder_version"
- ) === ""
- ) {
- // googleAanalyticsEvent('personalize_cc', 'ecommerce', productDetails);
- this.$router.push({
- name: "CraneConnection",
- params: {
- retailorId: retailorId,
- quantity: this.selectedQty,
- itemNumber: this.sku
- }
- });
- } else {
- let itemCode = this.itemId ? this.itemId : "new";
- //googleAanalyticsEvent('personalize_builder', 'ecommerce', productDetails);
- if(this.categoryId)
- {
- window.open(
- `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}?categoryId=${this.categoryId}`,
- "_self"
- );
- }
- else
- {
- window.open(
- `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
- "_self"
- );
- }
-
- }
- },
- setSelected(part, index) {
- this.imagepath = part;
- this.selected = index;
- },
- pageScrollUp() {
- /* if (this.$refs.divOne)
- this.$vuetify.goTo(this.$refs.divOne, {
- duration: 300,
- easing: "easeInOutCubic"
- });*/
- this.updateProgress = true;
- setTimeout(() => {
- this.updateProgress = false;
- }, 3000);
- }
- },
- mounted() {
- this.pageScrollUp();
- },
- created() {
- if (this.itemId) {
- this.updateProgress = true;
- setTimeout(() => {
- this.updateProgress = false;
- }, 3000);
- }
- }
-};
-</script>
-<style lang="scss">
-.overflow-button .v-select__slot {
- border-left: 1px solid #dcdddd !important;
- border-right: 1px solid #dcdddd !important;
-}
-.product-overview-tabs .v-tabs-slider-wrapper {
- color: #2850da;
- height: 4px !important;
-}
-.overflow-button.v-overflow-btn.v-input--is-focused .v-input__slot {
- box-shadow: none !important;
- border-top: 1px solid #dcdddd !important;
- border-bottom: 1px solid #dcdddd !important;
- border-radius: 0px !important;
-}
-/*.v-autocomplete__content.v-menu__content {
- box-shadow: none !important;
- border: 1px solid #dcdddd !important;
-}*/
-.v-menu__content {
- box-shadow: none !important;
- outline: 1px solid #2850da !important;
- //border-right: 1px solid #2850da !important;
- //border-bottom: 1px solid #2850da !important;
- border-radius: 0px !important;
-}
-.product-overview-tabs .v-tabs-items {
- background-color: transparent !important;
-}
-.product-overview-tabs .v-tabs-bar {
- background-color: transparent !important;
- height: 35px !important;
-}
-.product-overview-tabs .v-slide-group__prev {
- display: none !important;
-}
-.v-text-field .v-input__control {
- border-radius: unset !important;
-}
-.productpage-select-button .v-input__control .v-input__slot {
- border: thin solid #8b8b8b !important;
-}
-.productpage-select-button:hover .v-input__control .v-input__slot {
- border: thin solid #2850da !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
- .v-select__selection.v-select__selection--comma {
- color: #2850da !important;
-}
-.productpage-select-button:hover
- .v-select__selection.v-select__selection--comma {
- color: #2850da !important;
-}
-.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
- color: #2850da !important;
-}
-.productpage-select-button .v-input__append-inner .v-input__icon .v-icon {
- font-size:20px !important;
-}
-.productpage-select-button.v-input--is-label-active.v-input--is-focused
- .v-input__control
- .v-input__slot {
- border: thin solid #2850da !important;
-}
-/*.productpage-select-button.v-text-field.v-text-field--solo
- .v-input__append-inner{
- -ms-flex-item-align: center;
- align-self: center;
- padding-top: 7px;
- border-left: 1px solid #8b8b8b;
- padding-left: 10px;
- height: 37px;
-}*/
-.productpage-select-button.v-text-field.v-text-field--solo.v-select--is-menu-active .v-input__append-inner{
- -ms-flex-item-align: center;
- align-self: center;
- padding-top: 7px;
- border-left: 1px solid #2850da;
- padding-left: 12px !important;
- height: 37px;
-}
-.productpage-select-button .v-input__control .v-select__slot .v-select__selections{
- justify-content: center;
-}
-.productpage-select-button.v-select.v-text-field input{
- display:none;
-}
-.productpage-select-button .v-input__control .v-input__slot{
- padding-left:0px !important;
-}
-//productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo.v-input__append-inner
-/*.productpage-select-button.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
- > .v-input__control
- > .v-input__slot {
- padding: 0 !important;
-}
-.productpage-select-button .v-select__slot {
- border: thin solid #dcdddd;
- height: 48px;
-}
-.productpage-select-button .v-select__slot:hover {
- border: thin solid #2850da !important;
- height: 48px;
-}
-.productpage-select-button .v-input__icon.v-input__icon--append {
- padding-right: 15px;
-}
-.productpage-select-button.v-select.v-input--dense .v-select__selection--comma {
- margin-left: 10px;
-}
-.productpage-select-button.v-text-field.v-text-field--solo
- .v-input__append-inner,
-.v-text-field.v-text-field--solo .v-input__prepend-inner {
- -ms-flex-item-align: center;
- align-self: center;
- margin-top: 0;
- border-left: 1px solid #dcdddd;
- height: 48px;
- padding-top: 12px;
- padding-left: 15px;
-}*/
-</style>
-<style src="./ProductDetailComponent.scss" lang="scss"/>
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RecentlyViewedComponent.scss b/src/components/retailer/product-detail/RecentlyViewedComponent.scss
deleted file mode 100644
index 7c870f8..0000000
--- a/src/components/retailer/product-detail/RecentlyViewedComponent.scss
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RecentlyViewedComponent.vue b/src/components/retailer/product-detail/RecentlyViewedComponent.vue
deleted file mode 100644
index a5e02db..0000000
--- a/src/components/retailer/product-detail/RecentlyViewedComponent.vue
+++ /dev/null
@@ -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" />
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RelatedProductsComponent.scss b/src/components/retailer/product-detail/RelatedProductsComponent.scss
deleted file mode 100644
index d0bb93b..0000000
--- a/src/components/retailer/product-detail/RelatedProductsComponent.scss
+++ /dev/null
@@ -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;
- }
- }
\ No newline at end of file
diff --git a/src/components/retailer/product-detail/RelatedProductsComponent.vue b/src/components/retailer/product-detail/RelatedProductsComponent.vue
deleted file mode 100644
index b683d5e..0000000
--- a/src/components/retailer/product-detail/RelatedProductsComponent.vue
+++ /dev/null
@@ -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/>
\ No newline at end of file
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.scss b/src/components/retailer/retailer-search/RetailerSearchProducts.scss
index a865840..e69de29 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.scss
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.scss
@@ -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;
- }
- }
\ No newline at end of file
diff --git a/src/components/retailer/retailer-search/RetailerSearchProducts.vue b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
index 3065788..dc328c9 100644
--- a/src/components/retailer/retailer-search/RetailerSearchProducts.vue
+++ b/src/components/retailer/retailer-search/RetailerSearchProducts.vue
@@ -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 />
\ No newline at end of file
diff --git a/src/components/retailer/search/SearchProducts.scss b/src/components/retailer/search/SearchProducts.scss
deleted file mode 100644
index a865840..0000000
--- a/src/components/retailer/search/SearchProducts.scss
+++ /dev/null
@@ -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;
- }
- }
\ No newline at end of file
diff --git a/src/components/retailer/search/SearchProducts.vue b/src/components/retailer/search/SearchProducts.vue
deleted file mode 100644
index 0d906b1..0000000
--- a/src/components/retailer/search/SearchProducts.vue
+++ /dev/null
@@ -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 />
\ No newline at end of file
diff --git a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss b/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss
deleted file mode 100644
index 6b856eb..0000000
--- a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-table, th, td {
- border: 1px solid black;
- }
\ No newline at end of file
diff --git a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue b/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue
deleted file mode 100644
index f6af6b2..0000000
--- a/src/components/retailer/shipping-delivery/ShippingAndDeliveryComponent.vue
+++ /dev/null
@@ -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 />
\ No newline at end of file
diff --git a/src/routes/retailer/cart_products.vue b/src/routes/retailer/cart_products.vue
index d2a17db..afc1768 100644
--- a/src/routes/retailer/cart_products.vue
+++ b/src/routes/retailer/cart_products.vue
@@ -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-menu>
+
</v-col>
</v-col>
</v-row>