swarnamath/pages/category/_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-col v-for="Service in pageContent.data" :key="pageContent.data.id" sm="6" lg="4" xl="3">
        <nuxt-link :to="`/${Service.slug}`">
          <v-card class>
            <v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>

            <v-card-text>
              <h3>{{ Service.name }}</h3>
            </v-card-text>
            <v-rating
              half-increments
              dense
              size="20"
              v-model="Service.rating"
              background-color="orange lighten-3"
              color="orange"
            ></v-rating>
            <p style="font-size:16px;padding:0 5px 10px 5px;">
              {{ Service.description }}
              <br />
              <span style="font-weight:bold">মূল্য {{ Service.price }} টাকা ।</span>
              <!-- <span v-if="Service.p2" style="font-weight:bold">মূল্য {{ Service.p2 }} টাকা ।</span> -->
            </p>
          </v-card>
        </nuxt-link>
      </v-col>
    </v-row>

    <!-- <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>
        <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 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>
        <br />
        <div id="block_container">
          <div>
          </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 fetch() {
    this.pageContent = await fetch(
      'https://api7.siliconpin.com/items/swarnamath?filter[cat]=["' + this.$route.params.slug +'"]'
    ).then(res => res.json())
    // console.log(this.pageContent.data[0])
    // 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>