Laravel E-Commerce Application Development – Catalog Listing

Laravel E-Commerce Application Development – Catalog Listing

Laravel E-Commerce Application Development ( 25 Lessons )

In this course, you’ll learn how to create an E-Commerce Website from scratch in Laravel. The process has never been easier I’ll take you from the very beginning stages of setting up Laravel till the last steps of adding products to the cart. If you’ve good understanding & experience in PHP & MySQL then this course is for you.

see full series
  1. Laravel E-Commerce Application Development – Introduction
  2. Laravel E-Commerce Application Development – Initial Project Setup
  3. Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
  4. Laravel E-Commerce Application Development – Admin Model and Migration
  5. Laravel E-Commerce Application Development – Backend Admin Authentication
  6. Laravel E-Commerce Application Development – Base Controller and Repository
  7. Laravel E-Commerce Application Development – Settings Section Part 1
  8. Laravel E-Commerce Application Development – Settings Section Part 2
  9. Laravel E-Commerce Application Development – Categories Section Part 1
  10. Laravel E-Commerce Application Development – Categories Section Part 2
  11. Laravel E-Commerce Application Development – Attributes Section Part 1
  12. Laravel E-Commerce Application Development – Attributes Section Part 2
  13. Laravel E-Commerce Application Development – Attributes Section Part 3
  14. Laravel E-Commerce Application Development – Brands Section
  15. Laravel E-Commerce Application Development – Products Section Part 1
  16. Laravel E-Commerce Application Development – Products Section Part 2
  17. Laravel E-Commerce Application Development – Products Section Part 3
  18. Laravel E-Commerce Application Development – Products Section Part 4
  19. Laravel E-Commerce Application Development – Frontend Login & Registration
  20. Laravel E-Commerce Application Development – Categories Navigation
  21. Laravel E-Commerce Application Development – Catalog Listing
  22. Laravel E-Commerce Application Development – Product Details Page
  23. Laravel E-Commerce Application Development – Shopping Cart
  24. Laravel E-Commerce Application Development – Checkout
  25. Laravel E-Commerce Application Development – Payment Processing

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.

Learn More

You can learn more about Respository Pattern by reading our post How to use Repository Pattern in Laravel.

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.

Pay close attention to the config() method which we used to load the currency symbol from our settings.

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.

Category Listing Page
Category Listing Page
Category Listing Page - Product Without Image
Category Listing Page – Product Without Image
Category Listing Page - No Product
Category Listing Page – No Product

Category Enhancement

As you know we stored category description and image when we implemented the categories admin section. You can implement the category page header section by yourself. Load the category description under category name and set the header background with the category image.

What’s Next

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

Code Repository

You can find the code base of this series on Laravel eCommerce Application repository.

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

5 comments on “Laravel E-Commerce Application Development – Catalog Listing

  1. Hi Tutor

    I am getting this error message on the console Failed to load resource: the server responded with a status of 500 (Internal Server Error)
    Nothing is displaying on front end.

    1. I have cloned your repo and tries on my side, everything was working fine and all the categories were loading on homepage navigation. I recommend you to double-check your database structure.

Leave a Reply

Your email address will not be published. Required fields are marked *

*When sharing a code snippet please wrap you code with pre tag and add a class code-block to it like below.
<pre class="code-block">you code here</pre>

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.