Remove From Cart

With a Subscription, click any sentence in the script to jump to that part of the video!

Our cart page is nearly fully functional! Just one last task: bring the remove button to life!

Let's repeat the process we used for quantity. Start in cart-item. Find the button so we can add an "on click". I'll break this onto multiple lines. @click= then $emit and call the event, how about, removeFromCart, though remove-from-cart would better follow the standard naming convention for events.

            
            88 lines
            
            assets/components/shopping-cart/cart-item.vue
        
            <template>
        
                <div :class="[$style.component, 'row', 'p-3']">
        
                                                    ... lines 3 - 29
                            
                    <div class="col-3">
        
                        <button
        
                            class="btn btn-info btn-sm"
        
                            @click="$emit('removeFromCart')"
        
                        >
        
                            Remove
        
                        </button>
        
                    </div>
        
                </div>
        
            </template>
        
                                                    ... lines 40 - 88

Unlike quantity, this time, we do not need to include any data with the event: we're simply saying "remove from cart".

Next, in index.vue, listen to this with @removeFromCart="". Do the same thing we did before: emit an event with the same name - removeFromCart - and make sure to include productId and colorId so that our parent component knows which item to remove. I'll copy these from the emit above.

            
            72 lines
            
            assets/components/shopping-cart/index.vue
        
            <template>
        
                <div>
        
                                                    ... lines 3 - 6
                            
                    <div v-if="items.length">
        
                                                    ... lines 8 - 20
                            
                        <shopping-cart-item
        
                                                    ... lines 22 - 29
                            
                            @removeFromCart="$emit('removeFromCart', {
        
                                productId: item.product['@id'],
        
                                colorId: item.color ? item.color['@id'] : null,
        
                            })"
        
                        />
        
                                                    ... lines 35 - 38
                            
                    </div>
        
                </div>
        
            </template>
        
                                                    ... lines 42 - 72

Finally, we can listen to the removeFromCart event from the top level shopping-cart.vue. Scroll up. Hey! I have an extra import I can remove - yay! Keep going to find the <shopping-cart-list component. Add @removeFromCart="".

But this time, instead of calling a method on this component, let's immediately put a new method in the mixin to handle everything related to removing an item from the cart.

Adding More Mixin Logic

Over in get-shopping-cart.js, add a new method called removeProductFromCart(). We know this will need the productId and colorId to identify which item it is. Inside, we can call another function from cart-service that we haven't used yet. It's called removeItemFromCart(). Hit tab so that it adds the import for us. Pass this the cart: this.cart, productId and colorId.

            
            58 lines
            
            assets/mixins/get-shopping-cart.js
        
            import {
        
                                                    ... lines 2 - 4
                            
                removeItemFromCart,
        
                                                    ... line 6
                            
            } from '@/services/cart-service';
        
            export default {
        
                                                    ... lines 10 - 19
                            
                methods: {
        
                                                    ... lines 21 - 45
                            
                    async removeProductFromCart(productId, colorId) {
        
                        await removeItemFromCart(this.cart, productId, colorId);
        
                                                    ... lines 48 - 49
                            
                    },
        
                                                    ... lines 51 - 55
                            
                },
        
            };

Hold Command or Ctrl and click removeItemFromCart to jump into that function. Just like with updateCartItemQuantity(), this does two things: it modifies the cart object to remove the item and then makes an AJAX call to save that to the server.

            
            149 lines
            
            assets/services/cart-service.js
        
                                                    ... lines 1 - 89
                            
            /**
        
             * Removes an item from the shopping cart
        
             *
        
             * @param {CartCollection} cart
        
             * @param {string} productId
        
             * @param {string} colorId
        
             * @return {Promise}
        
             */
        
            export async function removeItemFromCart(cart, productId, colorId) {
        
                cart.items = cart.items.filter(
        
                    (item) => (!(item.product === productId && item.color === colorId)),
        
                );
        
                const response = await axios.put(getCartIri(), cart);
        
                return { items: response.data.items };
        
            }
        
                                                    ... lines 107 - 149

Back in the mixin, don't forget to update the header: this.updateCartHeaderTotal(). Oh, but let's await for the AJAX call to finish before doing this.

            
            58 lines
            
            assets/mixins/get-shopping-cart.js
        
                                                    ... lines 1 - 8
                            
            export default {
        
                                                    ... lines 10 - 19
                            
                methods: {
        
                                                    ... lines 21 - 45
                            
                    async removeProductFromCart(productId, colorId) {
        
                        await removeItemFromCart(this.cart, productId, colorId);
        
                        this.updateCartHeaderTotal();
        
                    },
        
                                                    ... lines 51 - 55
                            
                },
        
            };

Ok: let's put our new method to work! Back in shopping-cart.vue, since we use that mixin, we can call the method directly: removeProductFromCart() passing $event.productId and $event.colorId.

            
            103 lines
            
            assets/pages/shopping-cart.vue
        
            <template>
        
                <div :class="[$style.component, 'container-fluid']">
        
                    <div class="row">
        
                                                    ... lines 4 - 5
                            
                        <div class="col-xs-12 col-lg-9">
        
                                                    ... lines 7 - 8
                            
                            <div class="content p-3">
        
                                                    ... lines 10 - 11
                            
                                <shopping-cart-list
        
                                                    ... lines 13 - 15
                            
                                    @removeFromCart="removeProductFromCart(
        
                                        $event.productId,
        
                                        $event.colorId,
        
                                    )"
        
                                />
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
            </template>
        
                                                    ... lines 26 - 103

Testing time! Find your browser and do a full page refresh to be safe. Right now, we have 15 items. Remove the couch with quantity 3 and.... it worked! The header says 12, the item is gone, the total updated. We rock! And, when we refresh, the item is still gone.

Next: I have a challenge for us! To help sell, I mean, "share", more high quality merchandise with the world, the marketing department has asked us to add a "featured product" to the sidebar of the cart page with the ability to add that item to the cart directly from this page - including choosing the color.

To accomplish this, we're going need to reuse a lot of code between the sidebar and the cart show page. Let's do it!

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Edit on GitHub

TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue Part 2

Remove From Cart

Keep on Learning!

Adding More Mixin Logic

Leave a comment!

What JavaScript libraries does this tutorial use?

	<template>
	<div :class="[$style.component, 'row', 'p-3']">
	... lines 3 - 29
	<div class="col-3">
	<button
	class="btn btn-info btn-sm"
	@click="$emit('removeFromCart')"
	>
	Remove
	</button>
	</div>
	</div>
	</template>
	... lines 40 - 88

	<template>
	<div>
	... lines 3 - 6
	<div v-if="items.length">
	... lines 8 - 20
	<shopping-cart-item
	... lines 22 - 29
	@removeFromCart="$emit('removeFromCart', {
	productId: item.product['@id'],
	colorId: item.color ? item.color['@id'] : null,
	})"
	/>
	... lines 35 - 38
	</div>
	</div>
	</template>
	... lines 42 - 72

	import {
	... lines 2 - 4
	removeItemFromCart,
	... line 6
	} from '@/services/cart-service';

	export default {
	... lines 10 - 19
	methods: {
	... lines 21 - 45
	async removeProductFromCart(productId, colorId) {
	await removeItemFromCart(this.cart, productId, colorId);
	... lines 48 - 49
	},
	... lines 51 - 55
	},
	};

	... lines 1 - 89
	/**
	* Removes an item from the shopping cart
	*
	* @param {CartCollection} cart
	* @param {string} productId
	* @param {string} colorId
	* @return {Promise}
	*/
	export async function removeItemFromCart(cart, productId, colorId) {
	cart.items = cart.items.filter(
	(item) => (!(item.product === productId && item.color === colorId)),
	);

	const response = await axios.put(getCartIri(), cart);

	return { items: response.data.items };
	}
	... lines 107 - 149

	... lines 1 - 8
	export default {
	... lines 10 - 19
	methods: {
	... lines 21 - 45
	async removeProductFromCart(productId, colorId) {
	await removeItemFromCart(this.cart, productId, colorId);

	this.updateCartHeaderTotal();
	},
	... lines 51 - 55
	},
	};

	<template>
	<div :class="[$style.component, 'container-fluid']">
	<div class="row">
	... lines 4 - 5
	<div class="col-xs-12 col-lg-9">
	... lines 7 - 8
	<div class="content p-3">
	... lines 10 - 11
	<shopping-cart-list
	... lines 13 - 15
	@removeFromCart="removeProductFromCart(
	$event.productId,
	$event.colorId,
	)"
	/>
	</div>
	</div>
	</div>
	</div>
	</template>
	... lines 26 - 103