How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 3
6 days ago
admin
Laravel
In the third part of this tutorial, we will display the products on the home page and add, update, and remove products from the cart, and finally, we will move to the payment using the Stripe payment gateway.
Create the main blade file
Inside the views folder, let's create a layouts folder. Inside, add a new file app.blade.php. This file serves as a layout template.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 12 Shopping Cart</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<style>
body {
font-family: "Winky Sans", sans-serif;
}
</style>
</head>
<body class="bg-white">
<div class="container">
@include('layouts.alerts')
@yield('content')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
</body>
</html>
Create the alerts file
Inside the layouts folder, add a new file alerts.blade.php. Inside, we have the code that will display the flash messages.
<div class="my-3">
@session('error')
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endsession
@session('info')
<div class="alert alert-info">
{{ session('info') }}
</div>
@endsession
@session('success')
<div class="alert alert-success">
{{ session('success') }}
</div>
@endsession
</div>
Create the home page
Inside the views folder, add a new file home.blade.php, inside we display the products.
@extends('layouts.app')
@section('content')
<div class="row my-5">
<div class="row my-3">
<div class="col-md-12 d-flex justify-content-between">
@if(session()->has('cart'))
<a href="{{ route('cart.index') }}"
class="text-decoration-none text-black"
>
<span class="fs-4 fw-bold">
<i class="fas fa-shopping-cart fa-xl"></i>
({{ count(session()->get('cart')) }})
</span>
</a>
<span class="fs-4 text-danger fw-bold">
${{ session()->get('cartItemsTotal') }}
</span>
@else
<span class="fs-4 fw-bold">
<i class="fas fa-shopping-cart fa-xl"></i>(0)
</span>
@endif
</div>
</div>
@foreach ($products as $product)
<div class="col-md-4 mb-2">
<div class="card h-100">
<img src="{{ asset($product->image) }}" alt="Product Image" class="card-img-top">
<div class="card-body">
<div class="card-title">
{{ $product->name }}
</div>
<p class="card-text">
{{ $product->description }}
</p>
<p>
<span class="fw-bold text-danger">
${{ $product->price }}
</span>
</p>
<form action="{{ route('cart.add') }}" method="post">
@csrf
<input type="hidden" name="product_id" value="{{ $product->id }}">
<button type="submit" class="btn btn-primary">
<i class="fas fa-shopping-cart"></i> add to cart
</button>
</form>
</div>
</div>
</div>
@endforeach
</div>
@endsection
Create the cart page
Inside the views folder, add a new file cart.blade.php, inside we display the cart items.
@extends('layouts.app')
@section('title')
Your Cart
@endsection
@section('content')
<div class="row my-5">
<div class="col-md-10 mx-auto">
<div class="card">
<div class="card-body">
<h2 class="mb-4">
<i class="fas fa-cart-arrow-down"></i> Your Shopping Cart
</h2>
@if (empty($cart))
<div class="alert alert-info">
Your cart is empty.
</div>
<a href="{{ route('home') }}" class="btn btn-primary">Back to Shop</a>
@else
<div
class="table-responsive"
>
<table
class="table"
>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Subtotal</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach ($cart as $key => $item)
<tr>
<td class="d-flex justify-content-start gap-3">
<img
src="{{ asset($item['image']) }}"
class="rounded"
width="60"
height="60"
alt="{{ $item['name']}}">
{{ $item['name'] }}
</td>
<td>
<form action="{{ route('cart.update') }}" method="post" class="d-flex gap-2">
@csrf
@method("PUT")
<input
type="hidden"
name="product_id"
value="{{ $item['product_id'] }}"
>
<input
type="number"
name="qty"
min="1"
value="{{ $item['qty'] }}"
class="form-control w-auto"
>
<button type="submit" class="btn btn-sm btn-warning">
Update
</button>
</form>
</td>
<td>
${{ $item['price'] }}
</td>
<td>
${{ $item['price'] * $item['qty'] }}
</td>
<td>
<form action="{{ route('cart.remove') }}" method="post">
@csrf
@method("DELETE")
<input
type="hidden"
name="product_id"
value="{{ $item['product_id'] }}"
>
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fas fa-xmark"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr class="fw-bold">
<td colspan="6"
class="text-end fs-5"
>
Total
</td>
<td colspan="2"
class="fs-5"
>
${{ session()->get('cartItemsTotal') }}
</td>
</tr>
</tfoot>
</table>
</div>
<div class="d-flex justify-content-between mt-4">
<form action="{{ route('cart.clear') }}" method="post">
@csrf
@method("DELETE")
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fas fa-trash-can"></i> Clear Cart
</button>
</form>
<a href="{{ route('order.pay') }}" class="btn btn-success">Proceed to payment</a>
</div>
@endif
</div>
</div>
</div>
</div>
@endsection
Create the success paid page
Inside the views folder, add a new file success-paid.blade.php, inside we display a success message when the payment is done successfully.
You can download the source code from here.
@extends('layouts.app')
@section('title')
Payment Success
@endsection
@section('content')
<div class="row my-5">
<div class="col-md-12">
<div class="card">
<div class="card-body text-center">
<h1 class="text-success">
Payment Successful
</h1>
<p>
Your payment has been successfully proceeded.
</p>
<a href="{{ route('home') }}" class="btn btn-primary">
Back home
</a>
</div>
</div>
</div>
</div>
@endsection