Laravel E-Commerce Application Development – Catalog Listing

This is part 20 of the Laravel E-Commerce Application Development series. In this part, we will work on the Catalog Listing page which means we will loop through all products under a category.

I assume you should have the e-commerce application project on your machine or you can grab it from Laravel E-Commerce Application repository, we will start from where we left it in the last part.

Adding Product Show Route

Firstly, we will be starting by adding the some required routes for our Catalog Listing page.

For example, when we will show products on a category page then we might need to have a link to load the product details page.

So to add the product show route, open the routes/web.php file and add the below route after the category show route.

Route::get('/product/{slug}', 'Site\[email protected]')->name('product.show');

Updating Product Contract & Repository

As we can see the above route is pointing to the ProductController, but before we will add a new method in our Product repository.

Open the ProductContract form the app/Contract folder and add the below method signature in it.

/**
 * @param $slug
 * @return mixed
 */
public function findProductBySlug($slug);

Next, we will implement this method in our Product repository. Open the ProductRepository file from the app/Repositories folder and add the below method.

/**
 * @param $slug
 * @return mixed
 */
public function findProductBySlug($slug)
{
    $product = Product::where('slug', $slug)->first();

    return $product;
}

So now we have a findProductBySlug() method in our ProductRepository class which we will use in our ProductController.

Creating Product Controller

To create the ProductController class, run the below command in terminal.

php artisan make:controller Site\ProductController

Now, open the newly generated ProductController and update it with the below code.

namespace App\Http\Controllers\Site;

use Illuminate\Http\Request;
use App\Contracts\ProductContract;
use App\Http\Controllers\Controller;

class ProductController extends Controller
{
    protected $productRepository;

    public function __construct(ProductContract $productRepository)
    {
        $this->productRepository = $productRepository;
    }

    public function show($slug)
    {
        $product = $this->productRepository->findProductBySlug($slug);

        dd($product);
    }
}

As you can see that we have injected the ProductContract and then used the findProductBySlug() method to load the requested product.

Updating Categroy Show Method

Now, we move on to the main subject of this post which is creating a Catalog Listing view.

Firstly, we will open the CategoryController class and update the show() method as below.

public function show($slug)
{
    $category = $this->categoryRepository->findBySlug($slug);

    return view('site.pages.category', compact('category'));
}

In this method, we are simply returning a category view and send the category data to this view file.

Creating Catalog Listing Page

Create a new file in the resources/views/site/pages folder and name it category.blade.php file.

Now open this file and add the below markup in it.

@extends('site.app')
@section('title', $category->name)
@section('content')
<section class="section-pagetop bg-dark">
    <div class="container clearfix">
        <h2 class="title-page">{{ $category->name }}</h2>
    </div>
</section>
<section class="section-content bg padding-y">
    <div class="container">
        <div id="code_prod_complex">
            <div class="row">
                @forelse($category->products as $product)
                    <div class="col-md-4">
                        <figure class="card card-product">
                            @if ($product->images->count() > 0)
                                <div class="img-wrap padding-y"><img src="{{ asset('storage/'.$product->images->first()->full) }}" alt=""></div>
                            @else
                                <div class="img-wrap padding-y"><img src="https://via.placeholder.com/176" alt=""></div>
                            @endif
                            <figcaption class="info-wrap">
                                <h4 class="title"><a href="{{ route('product.show', $product->slug) }}">{{ $product->name }}</a></h4>
                            </figcaption>
                            <div class="bottom-wrap">
                                <a href="" class="btn btn-sm btn-success float-right"><i class="fa fa-cart-arrow-down"></i> Buy Now</a>
                                @if ($product->sale_price != 0)
                                    <div class="price-wrap h5">
                                        <span class="price"> {{ config('settings.currency_symbol').$product->sale_price }} </span>
                                        <del class="price-old"> {{ config('settings.currency_symbol').$product->price }}</del>
                                    </div>
                                @else
                                    <div class="price-wrap h5">
                                        <span class="price"> {{ config('settings.currency_symbol').$product->price }} </span>
                                    </div>
                                @endif
                            </div>
                        </figure>
                    </div>
                @empty
                    <p>No Products found in {{ $category->name }}.</p>
                @endforelse
            </div>
        </div>
    </div>
</section>
@stop

In this view, we are firstly extending our layout and then we have a header section where we are displaying the current category name.

Next, we are running a forelse loop and rendring a product card to show products. Within the markup of this card, we are getting the product images and loading the first image, if no image found for the current product we are showing a place holder.

Next, we are displaying the product name along with the link to show the product page, and a Buy Now button which we will make it functional in the coming post.

In the pricing block, we are checking if the current product has a sale price then we are showing sale price along with the original price. If no sale price simply shows the normal price.

In the end, we show the no product found a message if there are no products for a category.

Here is how the Catalog Listing page looks on my end.

What’s Next

In the next post, we will start working on the product detail page to show all the products information.

If you have any question about this post, please leave a comment in the comment box below.