In this video we are going to learn about Creating Shop Page.
For creating the shop page first of all lets create a new controller
So in command prompt run the command

php artisan make:controller ShopController

Now lets open this controller
So go to the app directory then http controllers
Now from here lets open this ShopController
And here lets create a function here

public function index()
{
    return view('shop');
}

Now lets create the route for the function so go to the routes
directory and the open web.php file
And here add new route

Route::get('/shop',[ShopController::class,'index'])->name('shop.index');

Now create this shop view
So go to the resources directory the views
Now here lets create new blade file shop.blade.php
Now here lets extends the layout

@extends("layouts.base");
@section("content")
@endsection

Now go to the template directory and from here lets open shop.html
file in vs code
Now lets copy from body content except header and foter
And paste inside this shop.blade.php file
Now save this and lets check
You can see the shop page
This time these products are hard coded
Now lets make these products dynamic
For that First of all lets create three models and migration 1st for Brands, 2nd for Category and 3rd for Product
So go to the command prompt and for creating the model run the command

Php artisan make:model Brand –m
Php artisan make:model Category –m
Php artisan make:model Product –m

Now lets open the migration
So go to the database directory then migrations
From here open create brands table migration add the columns
Now open Create brands table migration and the following code

public function up(): void
{
    Schema::create('brands', function (Blueprint $table) {
        $table->id();
        $table->string('name')->unique();
        $table->string('slug')->unique();
        $table->string('image')->nullable();
        $table->timestamps();
    });
}

Now open create categories table migratation and following code

public function up(): void
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name')->unique();
        $table->string('slug')->unique();
        $table->string('image')->nullable();
        $table->timestamps();
    });
}

Now open create products table migratation and following code

public function up(): void
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('slug')->unique();
        $table->string('short_description');
        $table->text('description');
        $table->decimal('regular_price');
        $table->decimal('sale_price')->nullable();
        $table->string('SKU');
        $table->enum('stock_status',["instock","outofstock"]);
        $table->boolean('featured')->default(false);
        $table->unsignedInteger('quantity')->default(1);
        $table->string('image');
        $table->text('images');
        $table->unsignedBigInteger('category_id');
        $table->unsignedBigInteger('brand_id');
        $table->timestamps();
        $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
        $table->foreign('brand_id')->references('id')->on('brands')->onDelete('cascade');
    });
}

Now lets migrate the migration
So in command prompt run the command

php artisan migrate

Now go to the Models directory and open the Brand Model and here
add the function to relate brand to the multiple products

public function products()
{
    return $this->hasMany(Product::class,'brand_id');
}

Now open the category model
And here add a relation with product add to many
So write here

public function products()
{
    return $this->hasMany(Product::class,'category_id');
}

Now open the Product Model
And here add two functions
One for the brand which
Belongs to Brand model and
Another one is Category which
belongs to Category

public function category()
{
    return $this->belongsTo(Category::class,'category_id');
}

public function brand()
{
    return $this->belongsTo(Brand::class,'brand_id');
}

Now lets insert some records into to table
For that lets create factory for brand, catgory and product
So for crating factory
In command prompt run the command

php artisan make:factory BrandFactory –model=Brand
php artisan make:factory CategoryFactory –model=Category
php artisan make:factory ProductFactory –model=Product

Now switch to project and just go inside the database directory then open factories
Now open BrandFactory and here just write

public function definition(): array
{
    $brand_name = $this->faker->unique()->words($nb=2,$asText = true);
    $slug = Str::slug($brand_name);
    return [
        'name' => Str::title($brand_name),
        'slug'=>$slug,
        'image' => $this->faker->numberBetween(1,6).'.jpg'
    ];
}

Now open CategoryFactory add the following code

public function definition(): array
{
    $category_name = $this->faker->unique()->words($nb=2,$asText = true);
    $slug = Str::slug($category_name);
    return [
        'name' => Str::title($category_name),
        'slug'=>$slug,
        'image' => $this->faker->numberBetween(1,6).'.jpg'
    ];
}

Now open the product factory
Inside the product factory just write here

public function definition(): array
{
    $prduct_name = $this->faker->unique()->words($nb=2,$asText = true);
    $slug = Str::slug($prduct_name);
    $image_name =$this->faker->numberBetween(1,24).'.jpg';
    return [
        'name' => Str::title($prduct_name),
        'slug' => $slug,
        'short_description' => $this->faker->text(200),
        'description' => $this->faker->text(500),
        'regular_price' => $this->faker->numberBetween(1,22),
        'SKU' => 'SMD'.$this->faker->numberBetween(100,500),
        'stock_status' => 'instock',
        'quantity' => $this->faker->numberBetween(100,200),
        'image' => $image_name,
        'images' => $image_name,
        'category_id' => $this->faker->numberBetween(1,6),
        'brand_id' => $this->faker->numberBetween(1,6)
    ];
}

Now just go inside the seeders directory
And from here open database seeders
Inside the database seeder
Just write here

public function run(): void
{       
    \App\Models\Brand::factory(6)->create();
    \App\Models\Category::factory(6)->create();
    \App\Models\Product::factory(24)->create();
}

now lets run the seeder
So in command prompt just type here

php artisan db:seed

database seeding complete
Now open ShopController and here lets fetch the products

public function index()
{
    $products = Product::orderBy('created_at','DESC')->paginate(12);
    return view('shop',['products'=>$products]);
}   

Now go to the shop.blade.php file and add following code.

<div class="row g-sm-4 g-3 row-cols-lg-4 row-cols-md-3 row-cols-2 mt-1 custom-gy-5 product-style-2 ratio_asos product-list-section">
    @foreach ($products as $product)                            
    <div>
        <div class="product-box">
            <div class="img-wrapper">
                <div class="front">
                    <a href="#">
                        <img src="assets/images/fashion/product/front/{{$product->image}}"
                            class="bg-img blur-up lazyload" alt="">
                    </a>
                </div>
                <div class="back">
                    <a href="#">
                        <img src="assets/images/fashion/product/back/{{$product->image}}"
                            class="bg-img blur-up lazyload" alt="">
                    </a>
                </div>
                <div class="cart-wrap">
                    <ul>
                        <li>
                            <a href="javascript:void(0)" class="addtocart-btn">
                                <i data-feather="shopping-cart"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <i data-feather="eye"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="wishlist">
                                <i data-feather="heart"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="product-details">
                <div class="rating-details">
                    <span class="font-light grid-content">{{$product->category->name}}</span>
                    <ul class="rating mt-0">
                        <li>
                            <i class="fas fa-star theme-color"></i>
                        </li>
                        <li>
                            <i class="fas fa-star theme-color"></i>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                        </li>
                    </ul>
                </div>
                <div class="main-price">
                    <a href="#" class="font-default">
                        <h5 class="ms-0">{{$product->name}}</h5>
                    </a>
                    <div class="listing-content">
                        <span class="font-light">{{$product->category->name}}</span>
                        <p class="font-light">{{$product->short_description}}</p>
                    </div>
                    <h3 class="theme-color">${{$product->regular_price}}</h3>
                    <button class="btn listing-content">Add To Cart</button>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
{{$products->links()}}

Now add the the following code on just ofter the @extends directive

@push('styles')
    <link id="color-link" rel="stylesheet" type="text/css" href="assets/css/demo2.css">
    <style>
        nav svg{
            height: 20px;
        }
        .product-box .product-details h5 {            
            width: 100%;	
        }
    </style>
@endpush

Now its done so lets check and go to the /shop url
And here you can see the 12 products here and this is pagination link
This pagination link is not as our template so in next tutorial will see
how can we apply template style on this pagination link
so that's all about creating the shop page.