swarnamath/pages/bag.vue

<template>
    <v-container mt-4 style="padding-bottom:120px;">
        <!-- <v-card class="bg mb-5"  v-show="calculateCart"> -->
        <v-card class="bg mb-5" >
            <v-card v-for="item in cartBag" :key="item.slug">
                <div>
                    <div>
                        <v-avatar class="ma-3" size="125" tile>
                            <v-img v-if="item.product.img" :src="`https://api7.siliconpin.com/assets/${item.product.img}`"></v-img>
                        </v-avatar>

                        <v-card-title class="text-h5" v-text="item.product.name"></v-card-title>

                        <v-card-subtitle v-text="item.product.name"></v-card-subtitle>

                        <!-- <v-card-actions>
                  <v-btn
                    v-if="item.artist === 'Ellie Goulding'"
                    class="ml-2 mt-3"
                    fab
                    icon
                    height="40px"
                    right
                    width="40px"
                  >
                    <v-icon>mdi-play</v-icon>
                  </v-btn>

                  <v-btn
                    v-else
                    class="ml-2 mt-5"
                    outlined
                    rounded
                    big
                  >
                    বাদ
                  </v-btn>
                        </v-card-actions>-->
                    </div>
                </div>
            </v-card>
            <div v-if="bagTotalPrice>0" >
                <h2 > মোট {{bagTotalPrice}} /- টাকা</h2>
                <v-btn @click="cartEmpty()">
                    বাদ
                </v-btn>
                <v-btn>
                    <nuxt-link to="/purchase">এগিয়ে যাই</nuxt-link>
                </v-btn>
                
            </div>
            
            <h2 v-else >  ব্যাগ ফাঁকা  </h2>
        </v-card>
        <v-btn>
            <nuxt-link to="/">আরও কিনবো</nuxt-link>
        </v-btn>
    </v-container>
</template>

<script>
export default {
    data() {
        return {
            pageContent: {},
            name: "",
            slug: "",
            img: "",
            cartBag: [],
            bagTotalPrice: 0,
            formData: {
                slug: "",
                name: "",
                price: "",
                // permission: []
            }

            // apiLink:process.env.apiLink
        };
    },
    computed: {
        // loaded() {
        //   return this.$store.state.shoppingCart.status ,this.$store.state.localStorage.status , this.$store.state.sessionStorage.status
        // }
        // calculateCart(){
        //     if (localStorage && localStorage.cart) {
        //     const cart = JSON.parse(localStorage.cart);
        //     this.cart = cart;
        //     //   this.countTotals(cart);
        // }
        // }
    },
    mounted() {
        /// 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;
            this.cartBag.forEach(element => {
                this.bagTotalPrice +=element.product.price
                // console.log(element.product.price)
            });
            //   this.countTotals(cart);
            // alert("ss")
        }

    },
    methods: {
        cartEmpty() {
        
        localStorage.cart =  '[]';
        // this.$forceUpdate();
        this.$router.go(0);

        
        },
        calculateCart(){
            if (localStorage && localStorage.cart) {
            const cart = JSON.parse(localStorage.cart);
            this.cart = cart;
            //   this.countTotals(cart);
        }
        }
    },
    //   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
    //   },
    //   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 scoped>
a{ text-decoration:none}
</style>