Menampilkan Informasi Detail Menggunakan VueJS Klien

Posted on by

Setelah sebelumnya menampilkan seluruh daftar produk pada halaman utama kemudian kita akan menmpilkan informasi detailnya. yang mana apabila salah satu produk di klik maka akan dimunculkan sebuah halaman yang akan menampilkan informasi detail tetang produk tersebut.

Buat tombol View pada Welcome sehingga pada saat di click akan menampikan halaman baru yang berisi detail produk. kodenya seperti berikut ini

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
<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" 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)
      }
    }
}
</script>

dan pada ProductDetail kodenya seperti dibawah ini

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
<template>
    <div class="container px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col-sm-5">
<article class="gallery-wrap">
<div class="img-big-wrap">
  <div> <a href="#"><img class="img-fluid" :src="domain + '/img/products/' + productDetail.foto"></a></div>
</div>
<!-- slider-product.// -->
<!-- <div class="img-small-wrap">
  <div class="item-gallery"> <img src="https://s9.postimg.org/tupxkvfj3/image.jpg"> </div>
  <div class="item-gallery"> <img src="https://s9.postimg.org/tupxkvfj3/image.jpg"> </div>
  <div class="item-gallery"> <img src="https://s9.postimg.org/tupxkvfj3/image.jpg"> </div>
  <div class="item-gallery"> <img src="https://s9.postimg.org/tupxkvfj3/image.jpg"> </div>
</div> -->
<!-- slider-nav.// -->
</article> <!-- gallery-wrap .end// -->
</div>
<div class="col-sm-7">
<h3 class="title mb-3">{{productDetail.name}}</h3>
 
<p class="price-detail-wrap">
<span class="price h3 text-warning">
<span class="num">{{productDetail.price | currency}}</span>
</span>
</p> <!-- price-detail-wrap .// -->
<dl class="item-property">
  <dt>Description</dt>
  <dd><p><pre>{{productDetail.description}}</pre></p></dd>
</dl>
 
<hr>
<a href="#" class="btn btn-lg btn-primary text-uppercase"> Buy now </a>
<a href="#" class="btn btn-lg btn-outline-primary text-uppercase"> <i class="fas fa-shopping-cart"></i> Continue Shopping </a>
 
</div> <!-- col.// -->
</div> <!-- row.// -->
    </div>
</template>
 
<script>
export default {
    name: 'ProductDetail',
    props: ['id'],
    created () {
        this.$store.dispatch('productDetail', {id: this.id})
    },
    computed: {
        productDetail () {
            return this.$store.getters.productDetail
        },
        domain () {
            return this.$store.state.domainName
        },
    },
}
</script>
 
<style scoped>
.gallery-wrap .img-big-wrap img {
    height: auto;
    width: auto;
    display: inline-block;
    cursor: zoom-in;
}
 
.gallery-wrap .img-small-wrap .item-gallery {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    margin: 7px 2px;
    display: inline-block;
    overflow: hidden;
}
 
.gallery-wrap .img-small-wrap {
    text-align: center;
}
.gallery-wrap .img-small-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}
</style>

dan pada store seperti ini

1
2
3
4
5
6
7
8
9
10
productDetail(context, payload) {
      axios.get('/products/get-detail/' + payload.id)
        .then(response => {
          console.log(response.data)
          context.commit('setProductDetail', response.data)
        })
        .catch(error => {
          console.log(error)
      })
    },

sehingga akan menampilkan tampilan seperti gambar berikut ini