My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Component Button Add to Cart

Sekarang kita akan lanjutkan membuat component button Add to Cart, dimana component ini nanti akan kita panggil di dalam component card product dan card product populer. Fungsi dari component ini adalah menambahkan sebuah product ke dalam cart atau keranjang belanja.

Langkah 1 - Membuat Component Button Add to 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/BtnAddToCart

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:

  1. Class Component: app/Livewire/Web/Cart/BtnAddToCart.php
  2. View Component: resources/views/livewire/web/cart/btn-add-to-cart.blade.php

Langkah 2 - Menambahkan Fungsi Add to Cart

Sekarang kita akan menambahkan sebuah method yang berfungsi untuk melakukan proses add to cart atau memasukkan data product ke keranjang belanja.

Silahkan buka file app/Livewire/Web/Cart/BtnAddToCart.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 BtnAddToCart extends Component
{   
    /**
     * product_id
     *
     * @var mixed
     */
    public $product_id;
    
    /**
     * addToCart
     *
     * @param  mixed $product_id
     * @return void
     */
    public function addToCart()
    {
        //check user is logged in
        if(!auth()->guard('customer')->check()) {

            session()->flash('warning', 'Silahkan login terlebih dahulu');

            return $this->redirect('/login', navigate: true);
        }
        
        //check cart
        $item = Cart::where('product_id', $this->product_id)
                    ->where('customer_id', auth()->guard('customer')->user()->id)
                    ->first();
        
        //if cart already exist
        if ($item) {

            //update cart qty
            $item->increment('qty');

        } else {

            //store cart
            $item = Cart::create([
                'customer_id'   => auth()->guard('customer')->user()->id,
                'product_id'    => $this->product_id,
                'qty'           => 1
            ]);

        }

        // session flash
        session()->flash('success', 'Produk ditambahkan ke keranjang');

        //redirect to cart
        return $this->redirect('/cart', navigate: true);

    }
    
    /**
     * render
     *
     * @return void
     */
    public function render()
    {
        return view('livewire.web.cart.btn-add-to-cart');
    }
}

Dari perubahan kode di atas, pertama kita import Model Cart.


        
perl

        

            
        

     
use App\Models\Cart;

Kemudian di dalam class kita membuat public properti.


        
php

        

            
        

     
public $product_id;

Selanjutnya, kita membuat method yang bernama addToCart, method ini akan dijalankan ketika button add to cart diklik.


        
csharp

        

            
        

     
public function addToCart()
{

	//...
	
}

Di dalamnya, pertama kita akan cek apakah customer sudah login atau belum, jika belum maka akan kita redirect ke halaman login terlebih dahulu.


        
scss

        

            
        

     
//check user is logged in
if(!auth()->guard('customer')->check()) {

    session()->flash('warning', 'Silahkan login terlebih dahulu');

    return $this->redirect('/login', navigate: true);
    
}

Jika customer sudah login, maka akan menjalankan kode dibawahnya, yaitu mengecek data cart di dalam table database berdasarkan product_id yang dikirimkan dan customer_id.


        
php

        

            
        

     
//check cart
$item = Cart::where('product_id', $this->product_id)
    ->where('customer_id', auth()->guard('customer')->user()->id)
    ->first();

Jika data cart ada, artinya kita cukup mengupdate qty di dalam cart. Disini kita menggunakan fitur yang bernama increment dari Laravel.


        
php

        

            
        

     
//update cart qty
$item->increment('qty');

Tapi jika data cart tidak ada, maka kita akan insert ke dalam database menggunakan Model.


        
php

        

            
        

     
//store cart
$item = Cart::create([
    'customer_id'   => auth()->guard('customer')->user()->id,
    'product_id'    => $this->product_id,
    'qty'           => 1
]);

Setelah itu, kita buat session flash dengan status success dan kita redirect ke halaman /carts.


        
kotlin

        

            
        

     
// session flash
session()->flash('success', 'Produk ditambahkan ke keranjang');

//redirect to cart
return $this->redirect('/cart', navigate: true);

Langkah 3 - Menambahkan Button Add to Cart

Sekarang kita akan membuat sebuah button di dalam view component, dimana nantinya component ini akan kita panggil di dalam card product dan card product populer.

Silahkan teman-teman buka file resources/views/livewire/web/cart/btn-add-to-cart.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
xml

        

            
        

     
<button wire:click="addToCart({{ $product_id }})" class="btn btn-orange">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
    </svg>
</button>

Di atas kita menambahkan event wire:click yang mengarah ke method addToCart yang sudah kita buat sebelumnya pada class component dan di dalamnya kita berikan parameter $product_id, dimana nantinya value-nya akan berisi data props yang dikirimkan oleh parent component.

Langkah 4 - Memanggil Component BtnAddToCart di Card Product Populer

Silahkan teman-teman buka file resources/views/components/cards/product-popular.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
javascript

        

            
        

     
<div class="col-8 col-md-6 mb-4">
    <div class="card border-0 rounded shadow-sm">
        <img src="{{ asset('/storage/' . $product->image) }}" class="rounded-top-custom object-fit-cover" height="200px">
        <div class="card-body">
            <a href="/products/{{ $product->slug }}" class="text-decoration-none text-dark" wire:navigate>
                <h6 class="card-title">{{ $product->title }}</h6>
            </a>
            <p class="fw-bold text-success mt-3">Rp. {{ number_format($product->price) }}</p>
            <div class="d-flex justify-content-between">
                <div class="mt-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill text-orange mb-1 me-2" viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                    </svg>
                    <span class="fw-bold">{{ number_format($product->ratings_avg_rating, 1) }}</span>
                </div>
                <div>
                    <!-- button add to cart -->
                    <livewire:web.cart.btn-add-to-cart :product_id="$product->id" />
                </div>
            </div>
        </div>
    </div>
</div>

Di atas, kita memanggil component BtnAddToCart yang sudah kita buat sebelumnya.


        
bash

        

            
        

     
<livewire:web.cart.btn-add-to-cart :product_id="$product->id" />

Dan di dalamnya kita juga mengirimkan props :product_id dan berisi id dari data product.

Langkah 5 - Memanggil Component BtnAddToCart di Card Product

Sama seperti di atas, kita akan memanggil component BtnAddToCart di dalam component card product.

Silahkan teman-teman buka file ini resources/views/components/cards/product.blade.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
javascript

        

            
        

     
<div class="card rounded border-0 shadow-sm mb-3">
    <div class="row g-0">
        <div class="col-5 col-md-4">
            <a href="/products/{{ $product->slug }}" class="text-decoration-none" wire:navigate>
                <img src="{{ asset('/storage/' . $product->image) }}" class="img-fluid w-100 h-100 object-fit-cover rounded-start" alt="...">
            </a>
        </div>
        <div class="col-7 col-md-8">
            <div class="card-body">
                <a href="/products/{{ $product->slug }}" class="text-decoration-none text-dark" wire:navigate>
                    <h6 class="card-title">{{ $product->title }}</h6>
                </a>
                <p class="fw-bold text-success mt-3">Rp. {{ number_format($product->price) }}</p>
                <div class="d-flex justify-content-between mt-5">
                    <div class="mt-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill text-orange mb-1 me-2" viewBox="0 0 16 16">
                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                        </svg>
                        <span class="fw-bold">{{ number_format($product->ratings_avg_rating, 1) }}</span>
                    </div>
                    <div>
                        <!-- button add to cart -->
                        <livewire:web.cart.btn-add-to-cart :product_id="$product->id" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sama seperti sebelumnya, di atas kita memanggil component BtnAddToCart dan memberikan props :product_id yang berisi id dari data product.


        
bash

        

            
        

     
<livewire:web.cart.btn-add-to-cart :product_id="$product->id" />

Langkah 6 - Uji Coba Menampilkan Button Add To Cart

Sekarang jika teman-teman reload project-nya dan lihat pada halaman home, maka sekarang di dalam card product akan terdapat button untuk proses add to cart.

Sekarang silahkan teman-teman coba klik, jika status teman-teman belum login maka akan menampilkan hasil seperti berikut ini.

Sekarang silahkan login terlebih dahulu, kemudian coba lagi, jika berhasil maka akan menampilkan halaman 404 | PAGE NOT FOUND. Itu karena halaman /cart belum kita buat.

Jika teman-teman cek di dalam table carts yang ada di dalam database, maka data-nya sudah masuk.

Teman-teman juga bisa melihatnya melalui halaman admin, kurang lebih hasilnya seperti berikut ini.

SELESAI & LANJUTKAN