Laravel 8 E-Commerce - Admin Show Product Categories On Homepage
In this video, we will learn about how to show product categories on the homepage.
Let's see how we can make the product category carousel dynamic. To do this, we first need to create a Livewire component.
Switch to the command prompt and run the command to create a new Livewire component:
php artisan make:livewire admin/AdminHomeCategoryComponent
Next, create a route for this component. Open the web.php file and add a new route inside the admin middleware route group:
Route::get('/admin/home-categories', AdminHomeCategoryComponent::class)->name('admin.homecategories');
Now, let's create a model and migration. Switch to the command prompt and run the command to create a new model:
php artisan make:model HomeCategory –m
Switch to the project and go to the database directory, then migrations. Open the create_home_categories_table migration and add the following code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateHomeCategoriesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('home_categories', function (Blueprint $table) {
$table->id();
$table->string('sel_categories');
$table->integer('no_of_products');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('home_categories');
}
}
Now, let's migrate the migration. Run the command:
php artisan migrate
Open phpMyAdmin and browse the home_categories table. Insert one record with sel_categories as 1, 2, 3, and no_of_products as 8.
Run the application by running the command:
php artisan serve
Open the AdminHomeCategoryComponent class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Category;
use App\Models\HomeCategory;
use Livewire\Component;
class AdminHomeCategoryComponent extends Component
{
public $selected_categories = [];
public $numberofproducts;
public function mount()
{
$category = HomeCategory::find(1);
$this->selected_categories = explode(',',$category->sel_categories);
$this->numberofproducts = $category->no_of_products;
}
public function updateHomeCategory()
{
$category = HomeCategory::find(1);
$category->sel_categories = implode(',',$this->selected_categories);
$category->no_of_products = $this->numberofproducts;
$category->save();
session()->flash('message','HomeCategory has been updated successfully!');
}
public function render()
{
$categories = Category::all();
return view('livewire.admin.admin-home-category-component',['categories'=>$categories])->layout('layouts.base');
}
}
Open the admin-home-category-component.blade.php view file and add the following code:
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Manage Home Categories
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="updateHomeCategory">
<div class="form-group">
<label class="col-md-4 control-label">Choose Categories</label>
<div class="col-md-4" wire:ignore>
<select class="sel_categories form-control" name="categories[]" multiple="multiple" wire:model="selected_categories">
@foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">No Of Products</label>
<div class="col-md-4">
<input type="text" class="form-control input-md" wire:model="numberofproducts" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
$(document).ready(function(){
$('.sel_categories').select2();
$('.sel_categories').on('change',function(e){
var data = $('.sel_categories').select2("val");
@this.set('selected_categories',data);
});
});
</script>
@endpush
Open the base layout file and add a link for Manage Home Category inside the admin menu:
<li class="menu-item">
<a title="Manage Home Categories" href="{{route('admin.homecategories')}}">Manage Home Categories</a>
</li>
Now, let's use Select2 for this select field. Open a new tab and go to the Select2 website. Copy the CSS and JS CDN and paste it inside the base layout file before the closing body tag:
@stack('scripts')
Now, let's make the categories carousel dynamic. Go to the HomeComponent.php class file and add the following code inside the render method:
$category = HomeCategory::find(1);
Open the home-component.blade.php view file and add the following code:
<div class="wrap-show-advance-info-box style-1">
<h3 class="title-box">Product Categories</h3>
<div class="wrap-top-banner">
<a href="#" class="link-banner banner-effect-2">
<figure><img src="{{ asset('assets/images/fashion-accesories-banner.jpg') }}" width="1170" height="240" alt=""></figure>
</a>
</div>
<div class="wrap-products">
<div class="wrap-product-tab tab-style-1">
<div class="tab-control">
@foreach ($categories as $key=>$category)
<a href="#category_{{$category->id}}" class="tab-control-item {{$key==0 ? 'active':''}}">{{$category->name}}</a>
@endforeach
</div>
<div class="tab-contents">
@foreach ($categories as $key=>$category)
<div class="tab-content-item {{$key==0 ? 'active':''}}" id="category_{{$category->id}}">
<div class="wrap-products slide-carousel owl-carousel style-nav-1 equal-container" data-items="5" data-loop="false" data-nav="true" data-dots="false" data-responsive='{"0":{"items":"1"},"480":{"items":"2"},"768":{"items":"3"},"992":{"items":"4"},"1200":{"items":"5"}}' >
@php
$c_products = DB::table('products')->where('category_id',$category->id)->get()->take($no_of_products);
@endphp
@foreach ($c_products as $c_product)
<div class="product product-style-2 equal-elem ">
<div class="product-thumnail">
<a href="{{route('product.details',['slug'=>$c_product->slug])}}" title="{{$c_product->name}}">
<figure><img src="{{ asset('assets/images/products') }}/{{$c_product->image}}" width="800" height="800" alt="{{$c_product->name}}"></figure>
</a>
</div>
<div class="product-info">
<a href="{{route('product.details',['slug'=>$c_product->slug])}}" class="product-name"><span>{{$c_product->name}}</span></a>
<div class="wrap-price"><span class="product-price">${{$c_product->regular_price}}</span></div>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
Now, everything is set up. Let's check it. Switch to the browser and refresh the page.
You can see the categories and products here. If you click on a category tab, you can see the products related to that category.
Let's add one more category. Go to the Manage Home Category page, select one more category, and click on Save.
Now, let's check the homepage again. You can see the selected categories and products.
So, in this way, you can show product categories on the homepage.
