PHP Classes

File: resources/js/components/Shop/MiniCart.vue

Recommend this page to a friend!
  Classes of Edward Paul  >  Flexible PHP Coupon System  >  resources/js/components/Shop/MiniCart.vue  >  Download  
File: resources/js/components/Shop/MiniCart.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Flexible PHP Coupon System
E-commerce system that supports discount coupons
Author: By
Last change:
Date: 1 year ago
Size: 2,456 bytes
 

Contents

Class file image Download
<template>
    <div>
        <div class="mini-cart">
            <ul class="list-group" v-if="cart.length">
                <li class="list-group-item" v-for="item in cart">
                    <a href="#" class="badge" @click.prevent="removeProductFromCart(item.product.id)">Remove</a>
                    {{ item.quantity }} x {{ item.product.title }} @ ${{ item.product.price }}
                </li>

                <li class="list-group-item" v-if="getCoupon.value">
                    <a href="#" class="badge" @click.prevent="removeCoupon">X</a>
                    <a href="#" >Discount ({{ getCoupon.code }}) : - {{ getCoupon.value.toFixed(2) }} </a>
                </li>
                <li class="list-group-item">
                    <a href="#" @click.prevent="removeAllProductsFromCart">Clear cart</a>
                </li>


            </ul>
            <p v-else>No items in cart</p>
        </div>
        <div class="py-4" v-if="cart.length && !getCoupon.value">
            <label for="coupon">Sample Coupon On Github</label>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Coupon Code" aria-label="Coupon Code" aria-describedby="button-addon4" v-model="coupon" id="coupon">
                <div class="input-group-append" id="button-addon4">
                    <button class="btn btn-primary" @click.prevent="checkCoupon" type="button">Apply</button>
                </div>
            </div>
        </div>

    </div>



</template>

<script>
    import {mapActions, mapGetters} from 'vuex'
    export default {
        name: "MiniCart",
        data(){
            return{
               coupon: ''
            }
        },
        computed: {
            ...mapGetters({
                cart: 'allCart',
                getCoupon:'getCoupon'
            })
        },
        methods:{
            ...mapActions({
                getAllCarts:'getAllCarts',
                removeProductFromCart: 'removeProductFromCart',
                removeAllProductsFromCart: 'removeAllProductsFromCart',
                applyCoupon: 'applyCoupon',
                removeCoupon: 'removeCoupon'
            }),
            checkCoupon(){
                this.applyCoupon(this.coupon).then(()=>{
                    this.coupon = '';
                })
            }
        },
        mounted() {
            this.getAllCarts();
        }
    }
</script>

<style scoped>

</style>
For more information send a message to info at phpclasses dot org.