Building an E-Commerce Store - Adding a Checkout Chapter 11Showing the product count in the header of the app
It's common practice for a shop to show a link to the cart in the site's header—along with
the number of items in the cart next to it. To achieve this, we'll use a Vuex getter to calculate
and return the number of items in the basket.
Open the index.html file and add a
placeholder, span—we'll convert this to a link once we've set up the routes. Within the
span, output a cartQuantity variable:
<div id="app">
<header>
<span>Cart {{ cartQuantity }}</span>
</header>
<main>
<router-view></router-view>
</main>
<aside>
<router-view name="sidebar"></router-view>
</aside>
</div>Navigate to your Vue instance and create a computed object containing a cartQuantity
function:
new Vue({
el: '#app',store,
router,computed: {
cartQuantity() {
}
},created() {
CSV.fetch({url: './data/csv-files/bicycles.csv'}).then(data => {
this.$store.dispatch('initializeShop', this.$formatProducts(data));
});
}
});