Keranjang belanja berfungsi untuk mengumpulkan daftar belanja dari produk-produk yang ingin dibeli oleh customer. sehingga keranjang belanja ini sangat baik untuk di miliki setiap toko online. ketika customer menjelajahi produk yang tersedia pada toko online dan mengklik tombol beli produk akan masuk kedalam keranjang belanja, sehingga customer dapat memilih ingin melanjutnya untuk mencari produk lain atau langsung akan melakukan pemesanan.
pada catatan kali ini di tulis bagaimana cara memasukan produk ke dalam keranjang belanja.
- Pada file Welcome.vue untuk menampilkan produk kodenya seperti berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<template> <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto"> <div class="row"> <div v-for="product in products" :key="product.id" class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" :src="domain + '/img/products/' + product.foto"> <div class="card-body"> <h5 class="card-title">{{product.name}}</h5> <p class="card-text">{{product.price | currency}}</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button @click="onView(product.id)" type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" @click="addProductToCart(product)" class="btn btn-sm btn-outline-secondary">Buy</button> </div> <small class="text-muted">Stock: {{product.stock}}</small> </div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Welcome', created () { this.$store.dispatch('products') }, computed: { products () { return this.$store.getters.products }, domain () { return this.$store.state.domainName }, }, methods: { onView (id) { this.$router.push('product-detail/' + id) }, addProductToCart (product) { this.$store.dispatch('addProductToCart', product) }, } } </script> |
2. Pada file Cart.vue kodenya sebagai berikut
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<template> <div class="container px-3 py-3 pt-md-5 pb-md-4 mx-auto"> <section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">CART</h1> </div> </section> <div class="container mb-4"> <div class="row"> <div class="col-12"> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th scope="col"> </th> <th scope="col">Product</th> <th scope="col" class="text-center">Quantity</th> <th scope="col" class="text-right">Price</th> <th> </th> </tr> </thead> <tbody> <tr v-for="cart in carts" :key="cart.id"> <td><img :src="domain + '/img/products/' + cart.foto" width="50px" height="50px" /> </td> <td>{{cart.name}}</td> <td><input class="form-control" type="text" :value="cart.qty" /></td> <td class="text-right">{{cart.price | currency}}</td> <td class="text-right"><button class="btn btn-sm btn-danger"><font-awesome-icon icon="trash" /> </button> </td> </tr> <tr> <td></td> <td></td> <td></td> <td><strong>Total</strong></td> <td class="text-right"><strong>...</strong></td> </tr> </tbody> </table> </div> </div> <div class="col mb-2"> <div class="row"> <div class="col-sm-12 col-md-6"> <button class="btn btn-block btn-light">Continue Shopping</button> </div> <div class="col-sm-12 col-md-6 text-right"> <button class="btn btn-lg btn-block btn-success text-uppercase">Checkout</button> </div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Cart', computed: { carts () { return this.$store.getters.carts }, domain () { return this.$store.state.domainName }, } } </script> <style scoped> .bloc_left_price { color: #c01508; text-align: center; font-weight: bold; font-size: 150%; } .category_block li:hover { background-color: #007bff; } .category_block li:hover a { color: #ffffff; } .category_block li a { color: #343a40; } .add_to_cart_block .price { color: #c01508; text-align: center; font-weight: bold; font-size: 200%; margin-bottom: 0; } .add_to_cart_block .price_discounted { color: #343a40; text-align: center; text-decoration: line-through; font-size: 140%; } .product_rassurance { padding: 10px; margin-top: 15px; background: #ffffff; border: 1px solid #6c757d; color: #6c757d; } .product_rassurance .list-inline { margin-bottom: 0; text-transform: uppercase; text-align: center; } .product_rassurance .list-inline li:hover { color: #343a40; } .reviews_product .fa-star { color: gold; } .pagination { margin-top: 20px; } footer { background: #343a40; padding: 40px; } footer a { color: #f8f9fa!important } </style> |
3. Dan pada file store kodenya sebagai berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) axios.defaults.baseURL = 'http://mylaravel.test/api' const baseUrl = 'http://mylaravel.test' export const store = new Vuex.Store({ state: { products: [], domainName: baseUrl, cart: [] }, mutations: { setProducts (state, products) { state.products = products }, pushProductToCart (state, productId) { state.cart.push({ id: productId, qty: 1 }) }, incrementItemQty (state, cartItem) { cartItem.qty++ }, }, actions: { products(context) { axios.get('/products/get') .then(response => { context.commit('setProducts', response.data.products) }) .catch(error => { console.log(error) }) }, addProductToCart(context, product) { const cartItem = context.state.cart.find(item => item.id === product.id) if(!cartItem) { context.commit('pushProductToCart', product.id) } else { context.commit('incrementItemQty', cartItem) } }, }, getters: { products(state) { return state.products }, carts(state) { return state.cart.map(cartItem => { const product = state.products.find(product => product.id === cartItem.id) return { name: product.name, price: product.price, qty: cartItem.qty, foto: product.foto } }) }, } }) |