Laravel 12 E-Commerce: Implementing the Shop Page (Front-End)

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for creating the main Shop Page to display products to users.

1. Create Controller and Route

Create Shop Controller

Run the command to generate a new controller for the shop functionality:

php artisan make:controller ShopController

Create Index Function (`ShopController.php`)

In the new `ShopController`, create an `index` function to fetch the products, ordered by creation date (newest first), and paginate them (12 per page). Pass the products to the view.

public function index(Request $request)
{        
    $products = Product::orderBy("created_at","DESC")->paginate(12);
    return view("shop",compact("products"));
}

Define Route (`web.php`)

Create the GET route for accessing the shop page:

Route::get("/shop",[ShopController::class,"index"])->name("shop.index");

2. Create View and Integrate Products

Create Shop View (`shop.blade.php`)

Create the view file at `resources/views/shop.blade.php`. Extend the main application layout (`x-app-layout`).

<x-app-layout>
    </x-app-layout>

Copy Template Content

Copy the content of the `

` tag from the front-end template file (`shop.index.html`) and paste it into `shop.blade.php`.

Loop Through Products

Locate the `products-grid` section in `shop.blade.php` and use a `@foreach` loop to iterate over the `$products` collection, replacing the static product card wrapper:

<div class="shop-product-wrapper">
    <div class="products-grid products-four-column">
        
        @foreach ($products as $product)
            <div class="product-card-wrapper">
                <!-- Product Card HTML goes here -->
            </div>
        @endforeach
    </div>
</div>

Display Product Details

Inside the loop, update the product card HTML to display dynamic data using the `$product` object, including image, name, prices, and links.

<!-- Image -->
<div class="product-card-img position-relative">
    <a href="#" class="image-box">
        <img class="card-img-top lazyload" src="{{asset("uploads/products")}}/{{$product->image}}" alt="{{$product->name}}">
    </a>
</div>
<!-- Details -->
<div class="product-card-details">
    <h3 class="product-card-title">
        <a href="#">{{$product->name}}</a>
    </h3>
    <div class="product-card-price">
        <span>${{$product->regular_price}}</span>
        @if($product->sale_price)
        <span class="old-price">${{$product->sale_price}}</span>
        @endif
    </div>
</div>

Add to Wishlist/Cart Forms

Integrate the Add to Wishlist functionality. Use an `@auth` check to determine if the user is logged in before showing the form. The form should use the `wishlist.add` route and pass the product details as hidden fields.

<!-- Wishlist Form -->
@if (Auth::check())
    <!-- User is logged in -->
@else
    <form method="POST" action="{{ route("wishlist.add") }}">
        @csrf
        <input type="hidden" name="id" value="{{ $product->id }}" />
        <input type="hidden" name="name" value="{{ $product->name }}" />
        <input type="hidden" name="price"
               value="{{ $product->sale_price == "" ? $product->regular_price : $product->sale_price }}" />
        <input type="hidden" name="quantity" value="1" />
        <button type="submit" class="pc_btn-wl position-absolute top-0 end-0 bg-transparent border-0 js-add-wishlist" title="Add To Wishlist">
            <li><a class="action"><i class="pe-7s-like"></i></a></li>
        </button>
    </form>
@endif

3. Add Pagination and Navigation Link

Add Pagination

Add the pagination links outside the product grid wrapper, using the Bootstrap 5 pagination style:

{{ $products->links("pagination::bootstrap-5") }}

Update Navigation Link (`app.blade.php`)

In the main front-end layout file, update the "Shop" menu link to point to the new route:

href=“{{route(‘shop.index’)}}”

This completes the setup for the basic Shop Page.