Memasukan Produk Kedalam Keranjang – Shopping Cart

Posted on by

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.

  1. 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
          }
       })
    },
  }
})