Cart Vue example

cart.vue

<template>

    <div id="bix-cart">
        <v-modal v-ref:modal modifier="uk-modal-dialog-blank">
            <partial :name="modal_template"></partial>
        </v-modal>
    </div>

</template>

<script>
    var md5 = require('md5');
    var defaultAddress = {
        first_name: '',
        middle_name: '',
        last_name: '',
        company_name: '',
        email: '',
        address_1: '',
        address_2: '',
        zipcode: '',
        city: '',
        county: '',
        state: '',
        country_code: 'NL',
        phone: '',
        mobile: ''
    };
    var defaultItem = {
        id: '',
        sku: '',
        title: '',
        quantity: 1,
        price: 0,
        currency: 0,
        quantity_options: [],
        data: {},
        template: 'default-product'
    };

    var defaultCart = {
        delivery_address: _.assign({}, defaultAddress),
        items: [],
        delivery_options: [],
        payment_options: [],
        delivery_option_id: '',
        card: {},
        confirmed: false
    };

    module.exports = {

        name: 'bix-cart',

        data: function () {
            return _.merge({
                modal_template: 'default-cart-modal',
                error: '',
                filter: {
                    currency: 'EUR'
                },
                order: {},
                cart: {}
            }, window.$bix_cart);
        },

        created: function () {
            var storedCart = localStorage.getItem('bixcart.cart');
            this.cart = storedCart ? JSON.parse(storedCart) : _.assign({}, defaultCart);
            this.Cart = this.$resource('api/cart/cart{/id}', {}, {terms: {method: 'GET', url: 'api/cart/cart/terms'}});
        },

        events: {
            'address.saved': 'saveCart'
        },

        watch: {
            'cart': {handler: function (cart) {
                localStorage.setItem('bixcart.cart', JSON.stringify(cart));
            }, deep: true},
            'total_price': 'saveCart'
        },

        methods: {
            openCart: function () {
                this.$refs.modal.open();
            },
            closeCart: function () {
                this.$refs.modal.close();
            },
            addItem: function (item) {
                var existing = _.find(this.cart.items, 'sku', item.sku);
                if (existing) {
                    console.log(existing.sku);
                    this.addQuantity(existing, item.quantity);
                } else {
                    this.cart.items.push(_.merge({}, defaultItem, item, {id: md5(item.sku  + item.title)}));
                }
            },
            addQuantity: function (item, quantity) {
                var des_option = _.find(item.quantity_options, 'quantity', (item.quantity + quantity));
                if (des_option) {
                    item.quantity = des_option.quantity;
                    item.price = des_option.price;
                    item.currency = des_option.currency;
                } else {
                    //todo refine this. now goto next option
                    var idx = _.findIndex(item.quantity_options, 'quantity', quantity);
                    if (idx < item.quantity_options.length) {
                        item.quantity = item.quantity_options[(idx + 1)].quantity;
                        item.price = item.quantity_options[(idx + 1)].price;
                        item.currency = item.quantity_options[(idx + 1)].currency;
                    }
                }
            },
            removeItem: function (item) {
                this.cart.items.$remove(item);
            },
            saveCart: function () {
                this.resetError();
                console.log('save ' + this.cart.items.length);
                this.Cart.save({}, {cart: this.cart}).then(function (res) {
                    console.log('saved ' + res.data.items.length);
                    if (res.data.items) { //valid result?
                        this.cart = res.data;
                    }
                }, function (res) {
                    this.setError(res.data.message || res.data);
                });
            },
            emptyCart: function () {
                this.cart =  _.assign({}, defaultCart)
            },
            getTerms: function () {
                return this.Cart.terms().then(_.noop(), function (res) {
                    this.setError(res.data.message || res.data);
                });
            },
            placeOrder: function () {
                this.resetError();
                console.log('save ' + this.cart.items.length);
                this.Cart.save({id: 'checkout'}, {cart: this.cart}).then(function (res) {
                    if (res.data.order) { //valid result?
                        this.order = res.data.order;
                    }
                }, function (res) {
                    this.setError(res.data.message || res.data);
                });

            },
            resetError: function () {
                this.error = '';
            },
            setError: function (error) {
                this.error = error;
                if (UIkit.notify) UIkit.notify(error, 'danger');
            }
        },

        computed: {
            currency: function () {
                return this.filter.currency;
            },
            nr_items_format: function () {
                return this.$transChoice('{0} %count% items|{1} %count% item|]1,Inf[ %count% items',
                        this.nr_items, {count: this.nr_items}
                );
            },
            nr_items: function () {
                return this.cart.items.length || 0;
            },
            delivery_price: function () {
                var delivery_option = _.find(this.cart.delivery_options, 'id', this.cart.delivery_option_id);
                if (delivery_option) {
                    return delivery_option.price;
                }
                return 0;
            },
            total_price: function () {
                var item_total = _.reduce(this.cart.items, function (sum, item) {
                    return sum + item.price;
                }, 0);

                console.log('total_priceCalx', item_total);
                return item_total + this.delivery_price;
            },
            cart_valid: function () {
                return !!(this.cart.delivery_option_id && this.cart.confirmed)
            }
        },

        partials: {
            'default-product': require('./templates/product/default-product.html'),
            'default-cart-modal': require('./templates/cart/modal.html'),
        },

        components: {
            'cart-item': require('./components/cart-item.vue'),
            'cart-address': require('./components/cart-address.vue'),
            'cart-delivery': require('./components/cart-delivery.vue'),
            'cart-payment': require('./components/cart-payment.vue'),
            'cart-terms': require('./components/cart-terms.vue')
        }

    };

</script>