swarnamath/pages/_slug.vue

<template>
  <v-container mt-4 style="padding-bottom:120px;">
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching...</p>
    <v-row v-else>
      <v-card class="mx-auto pa-3">
        <v-card width="500" class="justify-center">
          <v-img
            :src="`https://api7.siliconpin.com/assets/${pageContent.data[0].img}`"
            aspect-ratio="1.2"
          ></v-img>
        </v-card>

        <v-card-title
          class="font-weight-bold justify-center"
          style="font-size:2em; line-height: 1.6;"
        >{{ pageContent.data[0].name }}</v-card-title>
        <!-- :class="{'subheading': $vuetify.breakpoint.xs}" -->
        <hr />
        <div class="text-center font-weight-bold">
          <span v-if="pageContent.data[0].description"></span>
          &nbsp; &nbsp; {{ pageContent.data[0].description }}
          <br />
          <div class="pa-1" v-if="pageContent.data[0].price">
            <v-btn
              color="primary"
              @click="addToCart(pageContent.data[0].price)"
            >{{ pageContent.data[0].quantity }}</v-btn>
            <span>মূল্য - {{ pageContent.data[0].price }} টাকা ।</span>
          </div>
          <div class="pa-1" v-if="pageContent.data[0].p2">
            <v-btn
              color="primary"
              @click="addToCart(pageContent.data[0].p2)"
            >{{ pageContent.data[0].q2 }}</v-btn>
            <span>মূল্য - {{ pageContent.data[0].p2 }} টাকা ।</span>
          </div>
          <div class="pa-1" v-if="pageContent.data[0].p3">
            <v-btn color="primary"
            @click="addToCart(pageContent.data[0].p3)"
            >{{ pageContent.data[0].q3 }}</v-btn>
            <span>মূল্য - {{ pageContent.data[0].p3 }} টাকা ।</span>
          </div>
          <div class="pa-1" v-if="pageContent.data[0].p4">
            <v-btn color="primary"
            @click="addToCart(pageContent.data[0].p4)"
            >{{ pageContent.data[0].q4 }}</v-btn>
            <span>মূল্য - {{ pageContent.data[0].p4 }} টাকা ।</span>

    </div>
<!-- <div> {{ cartTotal }} </div> -->
<!-- <div> {{cartBag}} </div> -->
<div v-if="addedToCartChip">
  <v-chip
      class="ma-2"
      close
      color="red"
      text-color="white"
      @click:close="addedToCartChip = false"
    >
     ব্যাগ এ রাখা হয়েছে 
    </v-chip>
    <nuxt-link to="/">  <v-btn> আরও </v-btn> </nuxt-link>
    <a href="/bag">  <v-btn> ব্যাগ </v-btn> </a>
</div>

          <!-- <div v-show="loaded">
            {{ $shoppingCart }}
            {{ $localStorageLoaded }}
            {{ $sessionStorageLoaded }}
          </div> -->

        </div>
        <br />
        <div id="block_container">
          <div>
            <!-- <span> <a href="'https://wa.me/8597894293?url='+$route.params.slug" > Purchase Cash On Delivery </a> </span> -->
          </div>
        </div>
      </v-card>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      pageContent: {},
      name: "",
      slug: "",
      img: "",
      cartBag:[],
      addedToCartChip:false,
      cartTotal:0,
      // apiLink:process.env.apiLink
    };
  },
    computed: {
    // loaded() {
    //   return this.$store.state.shoppingCart.status ,this.$store.state.localStorage.status , this.$store.state.sessionStorage.status
    // }
  },
  mounted: function() {
    /// Retrieves cart from local storage when user first loads

    // this.shoppingCart = JSON.parse(
    //   localStorage.getItem('shoppingCart') || "[]")

            if (localStorage && localStorage.cart) {
            const cartBag = JSON.parse(localStorage.cart);
            this.cartBag = cartBag;
            cartBag.forEach((i) => {
              // total += i.amount * 1;
              this.cartTotal++
            });
            // this.cartTotal = total;
            //   this.countTotals(cart);
            // alert("ss")
        }

  },
  methods: {
    addToCart(price) {
      const cartRaw = localStorage.cart || '[]';
      const cart = JSON.parse(cartRaw)
      let product={}
      product["slug"]=this.slug
      product["name"]=this.name
      product["price"]=price
      product["img"]=this.img
      // const product=[slug, name, price]
      // if(process.client){
      cart.push({
        // ...this.selectedCard,
        product:product
      });
      localStorage.cart = JSON.stringify(cart);
      this.addedToCartChip=true
      // this.$router.push('/bag');
      // }
      // let exists = false

      // for (const cartItem of this.shoppingCart) {
      //   if (cartItem.slug === product.slug) {
      //     cartItem.amount = cartItem.amount + 1
      //     exists = true
      //     break
      //   }
      // }
      // if (!exists) {
        
        // this.shoppingCart.push({
        //   ...product,
        //   amount: 1,
        // })
        // console.log(product)
      // }
    },
  },
  // async asyncData({ $axios, route }) {
  //   const product = await $axios.$get(`/swarnamaths/?slug=`+route.params.slug)
  //   // $route.fullPath
  //   //    console.log(route.params.slug);
  //   // console.log(product)
  //   const url=route.params.slug
  //   return { product}
  // },
  async fetch() {
    this.pageContent = await fetch(
      'https://api7.siliconpin.com/items/swarnamath?filter[slug]=' + this.$route.params.slug
    ).then(res => res.json())
    this.name = this.pageContent.data[0].name
    this.slug = this.pageContent.data[0].slug
    if (this.pageContent.data[0].img) this.img = this.pageContent.data[0].img
  },
  fetchOnServer: false,
  head() {
    return {
      title: this.name,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        {
          hid: 'description',
          name: 'description',
          content: this.name
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.name
        },
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.name
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: 'https://swarnamath.com/' + this.slug
        },
        {
          hid: 'og:image',
          name: 'og:image',
          content: 'https://api7.siliconpin.com' + this.img
        },
        {
          hid: 'og:image:secure_url',
          name: 'og:image:secure_url',
          content: 'https://api7.siliconpin.com' + this.img
        },
        {
          hid: 'og:type',
          name: 'og:type',
          content: 'News'
        }
      ]
    }
  }
}
</script>

<style scopped>
#block_container {
  font-size: 18px;
}
</style>