Laravel E-Commerce Application Development – Categories Navigation
Laravel E-Commerce Application Development ( 27 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- Laravel E-Commerce Application Development – Introduction
- Laravel E-Commerce Application Development – Initial Project Setup
- Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
- Laravel E-Commerce Application Development – Admin Model and Migration
- Laravel E-Commerce Application Development – Backend Admin Authentication
- Laravel E-Commerce Application Development – Base Controller and Repository
- Laravel E-Commerce Application Development – Settings Section Part 1
- Laravel E-Commerce Application Development – Settings Section Part 2
- Laravel E-Commerce Application Development – Categories Section Part 1
- Laravel E-Commerce Application Development – Categories Section Part 2
- Laravel E-Commerce Application Development – Attributes Section Part 1
- Laravel E-Commerce Application Development – Attributes Section Part 2
- Laravel E-Commerce Application Development – Attributes Section Part 3
- Laravel E-Commerce Application Development – Brands Section
- Laravel E-Commerce Application Development – Products Section Part 1
- Laravel E-Commerce Application Development – Products Section Part 2
- Laravel E-Commerce Application Development – Products Section Part 3
- Laravel E-Commerce Application Development – Products Section Part 4
- Laravel E-Commerce Application Development – Frontend Login & Registration
- Laravel E-Commerce Application Development – Categories Navigation
- Laravel E-Commerce Application Development – Catalog Listing
- Laravel E-Commerce Application Development – Product Details Page
- Laravel E-Commerce Application Development – Shopping Cart
- Laravel E-Commerce Application Development – Checkout
- Laravel E-Commerce Application Development – Payment Processing
- Laravel E-Commerce Application Development – Order Management
- Laravel E-Commerce Application Development – Wrap Up
This is part 19 of the Laravel E-Commerce Application Development series. In this part, we will work on Categories Navigation which means we will populate our site navigation with the categories.
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.
Installing Nested Collection Package
As you already know, we have used the parent_id
in our categories table, to nest the categories. We can write our own logic to render the nested categories using a recursive PHP function but I opt for using a package called NestedCollection.
So firstly, we will install this package in our application using the Composer. Open the command line terminal and run the below command to install this package.
composer require typicms/nestablecollection
When the installation finishes, you don’t have to do anything as this package will be auto-discovered in your Laravel installation.
Now we need to use this package, so open the app/Models/Category.php class file and add the NestableTrait in our model file.
use TypiCMS\NestableTrait;
Next, instruct your model to use this trait by adding it like.
use TypiCMS\NestableTrait; use Illuminate\Support\Str; use Illuminate\Database\Eloquent\Model; class Category extends Model { use NestableTrait; // Remaining content of our model file. }
Now we are ready to use the nested collection based on our parent_id
column.
Updating Parent Category List in Admin Area
Before jumping into the frontend navigation, let’s utilize this package to show nested levels of categories in our admin’s categories section.
Firstly, open the CategoryContract(app/Contracts/CategoryContract.php) file and add the below method signature in it.
/** * @return mixed */ public function treeList();
Next, we will implement this treeList()
method in our CategoryRepository class. Open the CategoryRepository(app/Repositories/CategoryRepository.php) file and add the below method.
/** * @return mixed */ public function treeList() { return Category::orderByRaw('-name ASC') ->get() ->nest() ->listsFlattened('name'); }
The nest()
and listFlattened()
methods are provided by the NestedCollection package we installed earlier.
Next, we will use the treeList()
method in our Admin\CategoryController instead of listCategories()
.
Open the category controller (app/Http/Controllers/Admin/CategoryController) and within the create()
and edit()
method, replace the below line:
$categories = $this->categoryRepository->listCategories('id', 'asc');
To this:
$categories = $this->categoryRepository->treeList();
Next, we will update our views for admin section, because treeList()
method return an array instead of a collection.
Open the create.blade.php
file from resources/views/admin/categories folder and replace parent category block with the below one.
<div class="form-group"> <label for="parent">Parent Category <span class="m-l-5 text-danger"> *</span></label> <select id=parent class="form-control custom-select mt-15 @error('parent_id') is-invalid @enderror" name="parent_id"> <option value="0">Select a parent category</option> @foreach($categories as $key => $category) <option value="{{ $key }}"> {{ $category }} </option> @endforeach </select> @error('parent_id') {{ $message }} @enderror </div>
Next, open the edit.blade.php
file from the same folder and replace the parent category block with the below one.
<div class="form-group"> <label for="parent">Parent Category <span class="m-l-5 text-danger"> *</span></label> <select id=parent class="form-control custom-select mt-15 @error('parent_id') is-invalid @enderror" name="parent_id"> <option value="0">Select a parent category</option> @foreach($categories as $key => $category) @if ($targetCategory->parent_id == $key) <option value="{{ $key }}" selected> {{ $category }} </option> @else <option value="{{ $key }}"> {{ $category }} </option> @endif @endforeach </select> @error('parent_id') {{ $message }} @enderror </div>
Now, if you open the categories section in your admin area, you will have the parent category dropdown something like below.

Adding Category View Route for Frontend
Let’s start working on the site navigation on the frontend. When we will click on any category it will lead us to a category page, for that we have to create a route. Open the routes/web.php
file and add the below route in it.
Route::get('/category/{slug}', 'Site\CategoryController@show')->name('category.show');
Creating Category Controller for Frontend
Open the command line terminal and run the below command to create a CategoryController for frontend, as category.show
route pointing to this controller.
php artisan make:controller Site\CategoryController
Now, open the newly generated controller and replace the whole class with below one.
namespace App\Http\Controllers\Site; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Contracts\CategoryContract; class CategoryController extends Controller { protected $categoryRepository; public function __construct(CategoryContract $categoryRepository) { $this->categoryRepository = $categoryRepository; } public function show($slug) { $category = $this->categoryRepository->findBySlug($slug); return view('site.pages.category', compact('category')); } }
In this controller file, we have injected the CategoryContract which will provide us the access to all Category repository functions.
Now, open the CategoryContract and add the below signature in it.
** * @param $slug * @return mixed */ public function findBySlug($slug);
Add the implementation of this method in the CategoryRepository like below.
public function findBySlug($slug) { return Category::with('products') ->where('slug', $slug) ->where('menu', 1) ->first(); }
Next, in our Site\CategoryController we will add the show()
method, which will load the the category by slug.
public function show($slug) { $category = $this->categoryRepository->findBySlug($slug); dd($category); // return view('site.pages.category', compact('category')); we will add this in the next post }
Now, we have a route which points to a controller and that controller will load the requested category.
Creating View Composer Service Provider
The most efficient way to pass categories to our nav.blade.php
partial view is by using the View Composers.
Open the command line terminal and run the below command to generate a service provider.
php artisan make:provider ViewComposerServiceProvider
Now, open this generate provider from app/Providers
folder and replace the content with the below one.
namespace App\Providers; use App\Models\Category; use Illuminate\Support\Facades\View; use Illuminate\Support\ServiceProvider; class ViewComposerServiceProvider extends ServiceProvider { /** * Bootstrap services. * * @return void */ public function boot() { View::composer('site.partials.nav', function ($view) { $view->with('categories', Category::orderByRaw('-name ASC')->get()->nest()); }); } }
As you can see that using the View::
facade, we are binding the site.partials.nav
blade file to a callback function which send the $categories
variable to nav view.
Adding View Composer Service Provider to Providers Array
Now, quickly open the config/app.php
file and register the ViewComposerServiceProvider by adding it to the $providers
array.
// ...
App\Providers\ViewComposerServiceProvider::class,
Updating nav.blade.php File for Categories Navigation
In this last, section we will render our categories in our nav.blade.php
partials file which we created in the last post. Open the
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="main_nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="main_nav"> <ul class="navbar-nav"> @foreach($categories as $cat) @foreach($cat->items as $category) @if ($category->items->count() > 0) <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="{{ route('category.show', $category->slug) }}" id="{{ $category->slug }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $category->name }}</a> <div class="dropdown-menu" aria-labelledby="{{ $category->slug }}"> @foreach($category->items as $item) <a class="dropdown-item" href="{{ route('category.show', $item->slug) }}">{{ $item->name }}</a> @endforeach </div> </li> @else <li class="nav-item"> <a class="nav-link" href="{{ route('category.show', $category->slug) }}">{{ $category->name }}</a> </li> @endif @endforeach @endforeach </ul> </div> </div> </nav>
In this view file, we are running a loop on the $categories
variable which we are getting using the view composer created in the previous section. If any category has the nested items, we are showing a dropdown if not then simply a link.
Now, if you load your site again, you will get the categories in the navigation bar like below.

What’s Next
In the next post, we will start working on the category page to show all products under a category.
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.