C++ A BEGINNERS GUIDE TEACH YOURSELF by KARLINS DAVID

Author:KARLINS, DAVID [KARLINS, DAVID]
Language: eng
Format: epub
Publisher: UNKNOWN
Published: 2021-01-03T00:00:00+00:00

Though not necessary, it might be a good idea to notify the user to start adding items when no cart items are present. Let’s set this up prior to dispatching the last remaining action, removeAllCartItems .

CartList

In the CartList template, we’ll display a<p> tag that tells the user to ‘Add some items to the cart’ only under the condition that no cart items are present in the shopping cart.

We can do this by conditionally displaying the <p> tag with thevif directive. We’ll state that the tag will only be shown when there are no items in CartList (i.e. the length of the cartItems property is equal to 0).

The<p> element will look something like this:

< p v-if = "!cartItems.length"

class = "cart-empty-text has-text-centered" > Add some items to the cart!

</ p >

When this condition is met, we can also hide the ‘Total Quantity’ text and ‘Remove all’ icon within the cart. We’ll specify to only show this cart information under the condition that at least a single item exists (v-if="cartItems.length > 0" ):

< ul v-if = "cartItems.length > 0" >

< li v-for = "cartItem in

cartItems" class = "cart

item" > <CartListItem

:cartItem = "cartItem" />

</ li >

< div class = "cart-details" >

< p >Total Quantity:

<span class = "has-text-weight

bold" >{{ cartQuantity }}</span >

</p >

<p class = "cart-remove-all--text" > <i class = "fa fa-trash" ></i >Remove all

</p >

</div >

</ul >

We can also disable the checkout button if no cart items is present. We’ll ensure this happens by binding the buttons disabled attribute to !cartItems.length (when this statement is true - thedisabled attribute becomes true):

< button

:disabled = "!cartItems.length" class = "button is-primary" > Checkout (<span class = "has-text-weight-bold" >

{{

cartTotal

}}$

</span >)

</ button >

Let’s now create the dispatcher to call the last remaining action, removeAllCartItems . We’ll set up the click listener on thefatrash icon to call aremoveAllCartItems method when clicked:

< p @ click = "removeAllCartItems"

class = "cart-remove-all--text" >

<i class = "fa fa-trash" ></i >Remove all

</ p >

With all this implemented, the finished<template> of the CartList.vue file looks like the following:

vuex/shopping_cart/src/app-complete//cart/CartList.vue < template >

< div id = "cart" >

< div class = "cart--header

has-text-centered" > <i

class = "fa fa-2x fa

shopping-cart" ></i >

< p v-if = "!cartItems.length"

class = "cart-empty-text has-textcentered" > Add some items to the cart!

</ p >

< ul v-if = "cartItems.length > 0" >

< li v-for = "cartItem in cartItems" :key = "cartItem.id" class = "cart-item" > <CartListItem :cartItem = "cartItem" />

</ li >

< div class = "cart-details" >

< p >Total Quantity:

<span class = "has-text-weight

bold" >{{ cartQuantity }}</span >

</p >

<p @ click = "removeAllCartItems"

class = "cart-remove-all--text" > <i class = "fa fa-trash" ></i >Remove all

</p >

</div >

</ul >

<button :disabled = "!cartItems.length"

class = "button is-primary" > Checkout (<span class = "has-text-weight-bold" >${{ cartTotal }}</span >)

</ button >

</ template >

To enable the final interactive piece of our application, we’ll import mapActions and map the component removeAllCartItems method to the store action of the same name. The<script> of theCartList.vue file will be updated to:

vuex/shopping_cart/src/app-complete//cart/CartList.vue < script >

import {mapGetters,

mapActions} from 'vuex' ;

import CartListItem from

'./CartListItem' ;

export default {

name: 'CartList' ,

computed: {

...mapGetters([ 'cartItems' , 'cartTotal' , 'cartQuantity' ])

},

created() {

this .

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.