In this video we are going to learn about how to Show Product Categories On Homepage.
So let see how can we make dynamic the product category carousel.
For that first of all lets create a livewire component.
So switch to the command prompt and for creating the new livewire component run the command.

php artisan make:livewire admin/AdminHomeCategoryComponent

Now create the route for this component.
So open web.php file and inside the admin middleware route group.
Create new route

Route::get(‘/admin/home-categories’, AdminHomeCategoryComponent::class)->name(‘admin.homecategories’); 

Now lets create a model and migration.
So switch the command prompt and for creating new model run the command

php artisan make:model HomeCategory –m

Now switch to project and go inside the database directory then migrations.
And from here just open 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 lets migrate the migration.
So in command prompt just run the command.

php artisan migrate

Now open phpmyadmin and open the database.
Now browse the home_categories table.
Insert one record in sel_categories enter 1,2,3 and in no_of_products enter 8.
Now run the application. So run the command.

php artisan serve

Now open AdminHomeCategoryComponent class file and lets 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');
    }
}

Now 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

Now open the base layout file and inside the admin menu add the link for Manage Home Category.

<li class=\"menu-item\">
<a title=\"Manage Home Categories\" href=\"{{route(‘admin.homecategories')}}\">Manage Home Categories</a>
</li> 

  
Now lets use the select2 for this select field.
For that open new tab.
And go to the url.
select2.org.
Now from here copy the css and js cdn and paste inside the base layout file before the closing body tag.
Inside the layout.blade.php file add.

@stack('scripts') 

Now lets make dynamic this categories carousel.
Go to the HomeComponent.php class file and add the following code inside the render method.

$category = HomeCategory::find(1);

Now lets open the home-component.blade.php view file and 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 its done so lets check.
So switch to the browser and refresh the page.
Now you can see here the categories and products.
If click on this category tab you can see the products related to this category.
Now lets add one more category.
Go to the manage home category page.
Here lets select one more category now click on save.
Now lets check on home page.
Here you can see the selected categories and products.
So in this way you can Show Product Categories On Homepage so that's all about Showing Product Categories On Homepage.