Jika teman-teman perhatikan, pada halaman cart index kita sudah menampilkan jumlah qty. Sekarang, kita akan membuat sebuah komponen bernama Increment Qty, yang berfungsi untuk menambahkan jumlah qty pada cart.
Langkah 1 - Membuat Component Btn Increment Qty
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.
go
php artisan make:livewire Web/Cart/BtnIncrement
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:
- Class Component:
app/Livewire/Web/Cart/BtnIncrement.php - View Component:
resources/views/livewire/web/cart/btn-increment.blade.php
Langkah 2 - Membuat Fungsi Increment Qty di Class Component
Sekarang kita lanjutkan belajar membuat fungsi increment qty pada data cart. Silahkan teman-teman buka file app/Livewire/Web/Cart/BtnIncrement.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
php
<?php
namespace App\Livewire\Web\Cart;
use App\Models\Cart;
use Livewire\Component;
class BtnIncrement extends Component
{
public $cart_id;
public $product_id;
/**
* mount
*
* @param mixed $cart_id
* @param mixed $product_id
* @return void
*/
public function mount($cart_id, $product_id)
{
$this->cart_id = $cart_id;
$this->product_id = $product_id;
}
/**
* increment
*
* @return void
*/
public function increment()
{
$cart = Cart::find($this->cart_id);
$cart->increment('qty');
//session flash
session()->flash('success', 'Qty Keranjang Berhasil Ditambahkan');
//redirect
return $this->redirect('/cart', navigate: true);
}
public function render()
{
return view('livewire.web.cart.btn-increment');
}
}
Dari perubahan kode di atas, pertama kita import Model Cart.
perl
use App\Models\Cart;
Kemudian kita membuat 2 public properti.
php
public $cart_id;
public $product_id;
Setelah itu, kita membuat method mount yang di dalamnya kita melakukan set 2 public properti di atas.
php
public function mount($cart_id, $product_id)
{
$this->cart_id = $cart_id;
$this->product_id = $product_id;
}
Selanjutnya, kita membuat method baru dengan nama increment.
csharp
public function increment()
{
//...
}
Di dalamnya, kita mencari data cart berdasarkan ID yang dikirimkan, kemudian jika data ditemukan maka kita akan melakukan increment data qty.
php
$cart = Cart::find($this->cart_id);
$cart->increment('qty');
Selanjutnya, kita buat session flash dengan status success dan kita redirect ke halaman cart index.
kotlin
//session flash
session()->flash('success', 'Qty Keranjang Berhasil Ditambahkan');
//redirect
return $this->redirect('/cart', navigate: true);
Langkah 3 - Membuat Button Increment
Sekarang kita akan membuat sebuah button yang nanti akan mentrigger method increment yang sudah kita buah sebelumnya di atas.
Silahkan teman-teman buka file resources/views/livewire/web/cart/btn-increment.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.
bash
<input type="button" value="+" wire:click="increment({{ $cart_id, $product_id }})" class="button-minus border-0 rounded-circle icon-shape icon-sm mx-1" data-field="quantity">
Di atas, kita memanggil method increment menggunakan event wire:click dan di dalamnya kita kirimkan data cart id dan product id.
Langkah 4 - Memanggil Component Increment di Halaman Cart
Sekarang kita lanjutkan untuk memanggil component increment pada halaman cart index. Silahkan teman-teman buka file resources/views/livewire/cart/index.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
xml
@section('title')
Carts - Eat Your Favorite Foods
@stop
@section('keywords')
Food Store, Eat Your Favorite Foods
@stop
@section('description')
Food Store - Eat Your Favorite Foods
@stop
@section('image')
{{ asset('images/logo.png') }}
@stop
<div>
<div class="container">
<div class="row justify-content-center mt-0" style="margin-bottom: 270px;">
<div class="col-md-6">
<div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-5">
<div class="d-flex justify-content-start">
<div>
<x-buttons.back />
</div>
</div>
</div>
<div class="row">
@forelse ($carts as $cart)
<div class="col-12 col-md-12 mb-4">
<div class="card rounded border-0 shadow-sm">
<div class="row g-0">
<div class="col-5 col-md-4">
<img src="{{ asset('/storage/' . $cart->product->image) }}" class="img-fluid w-100 h-100 object-fit-cover rounded-start">
</div>
<div class="col-7 col-md-8">
<div class="card-body">
<div class="d-flex justify-content-between mt-4">
<div class="text-start">
<h6 class="card-title">{{ $cart->product->title }}</h6>
</div>
<div class="text-end">
<!-- btn delete -->
</div>
</div>
<div class="d-flex justify-content-between mt-4">
<div class="text-start">
<span class="text-success fw-bold">Rp. {{ number_format($cart->product->price) }}</span>
</div>
<div class="text-end">
<div class="input-group justify-content-center align-items-center group-btn-qty">
<!-- qty cart -->
<input type="number" step="1" max="10" value="{{ $cart->qty }}" name="quantity" class="quantity-field border-0 text-center w-25" style="background: transparent;">
<!-- increment qty -->
<livewire:web.cart.btn-increment :cart_id="$cart->id" :product_id="$cart->product_id" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@empty
<div class="col-12 col-md-12 mb-4">
<div class="card rounded border mb-3">
<div class="card-body">
<div class="d-flex justify-content-center">
<div class="mt-2">
<span class="fw-bold">You don't have any items in the cart.</span>
</div>
</div>
</div>
</div>
</div>
@endforelse
</div>
</div>
</div>
</div>
@if(count($carts) > 0)
<div class="container fixed-total">
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<div class="card rounded shadow-sm border-0 mb-5 ">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h6 class="fw-bold mb-0">Total</h6>
</div>
<div class="ms-auto">
<h6 class="fw-bold mb-0">Rp. {{ number_format($totalPrice) }}</h6>
</div>
</div>
<hr style="border: dotted 1px #e92715;">
<a href="/checkout" wire:navigate class="btn btn-orange-2 rounded border-0 shadow-sm w-100">Process to Checkout</a>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
Dari perubahan kode di atas, kita memanggil component increment qty dan di dalamnya kita memberikan 2 data props, yaitu :cart_id dan :product_id.
bash
<livewire:web.cart.btn-increment :cart_id="$cart->id" :product_id="$cart->product_id" />
Langkah 5 - Uji Coba Increment Cart
Silahkan teman-teman reload halaman cart index, jika berhasil maka kurang lebih hasilnya seperti berikut ini, yaitu akan terdapat btn qty untuk menambah jumlah qty pada cart.
Silahkan klik +, jika berhasil maka jumlah qty akan bertambah dan akan muncul alert yang berisi informasi data qty berhasil ditambahkan.
