swarnamath/pages/bag.vue

<template>
    <v-container mt-4 style="padding-bottom:120px;">
        <!-- <v-card class="bg mb-5"  v-show="calculateCart"> -->
            
        <div class="bg mb-5" >
            <v-row>
                <v-col v-for="item in cartBag" :key="item.slug" sm="6" lg="4" xl="3">
                <v-card>
                <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.price"></v-card-subtitle>
                        <v-btn @click="cartRemoveItem(item.product.slug)"> বাদ </v-btn>
                    </div>
                </div>
                </v-card>
                </v-col>
            </v-row>
            
            
            <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>
        </div>
        <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);

        
        },
        cartRemoveItem(itemslug) {
        let cartData = {}
        // alert(itemslug)
        var json = localStorage.cart;
        // var key = "foo";
        // delete json[itemslug];
        // localStorage.cart =json;
        // localStorage.cart =  '[]';
        // this.$forceUpdate();
        try {
            cartData = JSON.parse(json)
        }
        catch(err) {
            console.log("unable to get local storage data")
        }
        console.log("final data",cartData, itemslug)

        let index = cartData.findIndex(x => x.product.slug ===itemslug);
        console.log("index:",index)
        
        // debugger
        if(index>=0){
            cartData.splice(index, 1);
        } else {
            console.log("unable to remove the cart: index, cart item not available", index, "final data:", cartData)
            return
        }
        localStorage.cart =  JSON.stringify(cartData);
        console.log("cartData:",cartData)
        
        
        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>