retailer-vue/src/routes/retailer/product_page.vue

<template>
  <div
    class="productpage-backgorund d-flex flex-column productpage-height"
    ref="divOne"
  >
    <div class="productpage-backgorund">
      <div v-if="this.productDetails.typeId == 'giftcard'">
        <GiftCardDetailsComponent
          v-bind:productDetails="productDetails"
          :stockFlag="stockFlag"
          :categoryId="categoryId"
        ></GiftCardDetailsComponent>
      </div>
      <div v-else-if="this.productDetails.typeId == 'configurable'">
        <ConfiguredProductDetailComponent
          v-bind:productDetails="productDetails"
          :stockFlag="stockFlag"
          :categoryId="categoryId"
        />
      </div>
      <div
        v-else-if="
          this.productDetails.typeId !== 'giftcard' &&
          this.productDetails.typeId !== 'configurable'
        "
      >
        <ProductDetailComponent
          v-bind:productDetails="productDetails"
          :stockFlag="stockFlag"
          :categoryId="categoryId"
        />
      </div>
      <RelatedProductsComponent
        v-bind:relatedProducts="productDetails.relatedLinksProduct"
        v-if="
          productDetails.relatedLinksProduct &&
          productDetails.relatedLinksProduct.length > 0
        "
      />
      <RecentlyViewedComponent
        v-bind:recentlyViewed="recentlyViewedList.items"
      />
    </div>
    <!-- <v-row class="d-flex align-end productpage-backgorund" >
       <FooterComponent />
    </v-row>-->
    <FooterComponent />
  </div>
</template>
<script>
/* eslint-disable no-alert, no-console ,  no-debugger */
const baseUrl = process.env.VUE_APP_BASE_URL;
import * as easings from "vuetify/es5/services/goto/easing-patterns";
import RelatedProductsComponent from "@/components/retailer/product-detail/RelatedProductsComponent";
import RecentlyViewedComponent from "@/components/retailer/product-detail/RecentlyViewedComponent";
import ProductDetailComponent from "@/components/retailer/product-detail/ProductDetailComponent";
import ConfiguredProductDetailComponent from "@/components/retailer/product-detail/ConfiguredProductDetailComponent";
import GiftCardDetailsComponent from "@/components/retailer/product-detail/GiftCardDetailsComponent";
import FooterComponent from "@/components/layout/footer/FooterComponent";
import { getMeta, googleAanalyticsEventPDP } from "@/services/util.service";
export default {
  name: "ProductPage",
  components: {
    RelatedProductsComponent,
    RecentlyViewedComponent,
    ProductDetailComponent,
    FooterComponent,
    GiftCardDetailsComponent,
    ConfiguredProductDetailComponent,
  },
  data: () => ({
    easings: Object.keys(easings),
    stockFlag: true,
  }),
  metaInfo() {
    return {
      title: `${
        this.metaData && this.metaData.title != undefined
          ? this.metaData.title
          : "Crane Stationery"
      }`,
      meta: [
        {
          name: "title",
          content: `${
            this.metaData && this.metaData.title != undefined
              ? this.metaData.title
              : ""
          }`,
        },
        {
          name: "description",
          content: `${
            this.metaData && this.metaData.description != undefined
              ? this.metaData.description
              : ""
          }`,
        },
        {
          name: "keywords",
          content: `${
            this.metaData && this.metaData.keywords != undefined
              ? this.metaData.keywords
              : ""
          }`,
        },
      ],
      link: [
        {
          rel: "canonical",
          href: `${
            this.canonical ? window.location.href.split("?")[0] : baseUrl
          }`,
        },
      ],
    };
  },
  computed: {
    canonical: function () {
      return this.$route.meta.canonical;
    },
    sku: function () {
      return this.$route.meta.sku
        ? this.$route.meta.sku
        : this.$route.params.sku;
    },
    productDetails: function () {
      return this.$store.state.productOne.productDetails;
    },
    recentlyViewedList() {
      return this.$store.state.productList.recentlyViewed;
    },
    metaData() {
      return getMeta(this.productDetails.customAttribute);
    },
    categoryId: function () {
      return this.$route.query.categoryId;
    },
  },
  watch: {
    sku() {
      this.$store.dispatch("productOne/fetchProductDetails", this.sku);
      this.recentlyViewed();
    },
    productDetails() {
      if (this.productDetails.name) {
        googleAanalyticsEventPDP(
          this.productDetails,
          "view_item",
          this.categoryId
        );
        if (
          this.productDetails.stockDetails.backorders == 0 &&
          this.productDetails.stockDetails.qty <= 0
        ) {
          this.stockFlag = false;
          console.log("checked env", process.env.NODE_ENV);
          if (
            process.env.NODE_ENV == "production" &&
            window.craneCatalog.products.hasOwnProperty(this.productDetails.id)
          ) {
            this.$store.dispatch("productOne/updateCatlog");
            console.log("updateCatlog called");
          }
        }
      }
    },
  },
  methods: {
    recentlyViewed() {
      let checkPoint = localStorage.getItem("cr_recently_viewed");
      if (checkPoint) {
        let newVal = localStorage.getItem("cr_recently_viewed").split(",");
        if (newVal.indexOf(this.sku) !== -1) {
          newVal.splice(newVal.indexOf(this.sku), 1);
          this.$store.dispatch(
            "productList/fetchRecentlyViewedList",
            newVal.toString()
          );
          newVal.splice(0, 0, this.sku);
          localStorage.setItem("cr_recently_viewed", newVal);
        } else {
          this.$store.dispatch(
            "productList/fetchRecentlyViewedList",
            newVal.toString()
          );
          newVal.splice(0, 0, this.sku);
          localStorage.setItem("cr_recently_viewed", newVal);
        }
      } else {
        localStorage.setItem("cr_recently_viewed", this.sku);
      }
    },
  },
  mounted() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  },
  created() {
    this.recentlyViewed();
    console.log("sku", this.sku);
    this.$store.dispatch("productOne/fetchProductDetails", this.sku);
    //this.$store.dispatch("productList/fetchProductsList");
    this.$store.dispatch("productList/fetchAttributeList");
  },
};
</script>
<style src="./product_page.scss" lang="scss" scoped />