Laravel E-Commerce Application Development – Categories Navigation

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\[email protected]')->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 resources/views/site/partials/nav.blade.php file and replace the whole file content with the below one.

<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.

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