Terakhir, pada bab cart, kita akan mempelajari cara membuat button untuk menghapus data pada cart. Button ini akan memungkinkan customer untuk menghapus item yang tidak lagi diinginkan dari keranjang belanja mereka.
Langkah 1 - Membuat Component Btn Delete Cart
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/BtnDelete
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:
- Class Component:
app/Livewire/Web/Cart/BtnDelete.php - View Component:
resources/views/livewire/web/cart/btn-delete.blade.php
Langkah 2 - Membuat Fungsi Delete Cart di Class Component
Sekarang kita lanjutkan belajar membuat fungsi delete data cart. Silahkan teman-teman buka file app/Livewire/Web/Cart/BtnDelete.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 BtnDelete extends Component
{
public $cart_id;
/**
* mount
*
* @param mixed $cart_id
* @return void
*/
public function mount($cart_id)
{
$this->cart_id = $cart_id;
}
/**
* delete
*
* @return void
*/
public function delete()
{
$cart = Cart::find($this->cart_id);
$cart->delete();
//session flash
session()->flash('success', 'Keranjang Berhasil Dihapus');
//redirect
return $this->redirect('/cart', navigate: true);
}
public function render()
{
return view('livewire.web.cart.btn-delete');
}
}
Dari perubahan kode di atas, pertama kita import Model Cart.
perl
use App\Models\Cart;
Kemudian kita membuat 1 public properti.
php
public $cart_id;
Setelah itu, kita membuat method mount yang di dalamnya kita melakukan set 2 public properti di atas.
php
public function mount($cart_id)
{
$this->cart_id = $cart_id;
}
Selanjutnya, kita membuat method baru dengan nama delete.
csharp
public function delete()
{
//...
}
Di dalamnya, kita mencari data cart berdasarkan ID yang dikirimkan, kemudian jika data ditemukan maka kita akan melakukan delete data cart.
php
$cart = Cart::find($this->cart_id);
$cart->delete();
Selanjutnya, kita buat session flash dengan status success dan kita redirect ke halaman cart index.
kotlin
//session flash
session()->flash('success', 'Keranjang Berhasil Dihapus');
//redirect
return $this->redirect('/cart', navigate: true);
Langkah 3 - Membuat Button Delete
Sekarang kita akan membuat sebuah button yang nanti akan mentrigger method delete yang sudah kita buah sebelumnya di atas.
Silahkan teman-teman buka file resources/views/livewire/web/cart/btn-delete.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.
xml
<button wire:click="delete({{ $cart_id }})" class="btn-cart-delete me-2 shadow-sm border-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
</svg>
</button>
Di atas, kita memanggil method delete menggunakan event wire:click dan di dalamnya kita kirimkan data cart id.
Langkah 4 - Memanggil Component Delete di Halaman Cart
Sekarang kita lanjutkan untuk memanggil component delete 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 -->
<livewire:web.cart.btn-delete :cart_id="$cart->id" />
</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">
<!-- decrement qty -->
<livewire:web.cart.btn-decrement :cart_id="$cart->id" :product_id="$cart->product_id" :disabled="$cart->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 delete cart dan di dalamnya kita memberikan 1 data props, yaitu :cart_id
perl
<livewire:web.cart.btn-delete :cart_id="$cart->id" />
Langkah 5 - Uji Coba Delete Cart
Silahkan teman-teman reload halaman cart index, jika berhasil maka kurang lebih hasilnya seperti berikut ini, yaitu akan terdapat btn delete cart.
Silahkan klik button delete pada salah satu data yang teman-teman miliki di halaman cart, jika berhasil maka data akan terhapus dan akan menampilkan alert seperti berikut ini.
