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
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
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
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
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
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
Now open create categories table migratation and following code
Now open create products table migratation and following code
Now lets migrate the migration
So in command prompt run the command
Now go to the Models directory and open the Brand Model and here
add the function to relate brand to the multiple products
Now open the category model
And here add a relation with product add to many
So write here
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
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
Now switch to project and just go inside the database directory then open factories
Now open BrandFactory and here just write
Now open CategoryFactory add the following code
Now open the product factory
Inside the product factory just write here
Now just go inside the seeders directory
And from here open database seeders
Inside the database seeder
Just write here
now lets run the seeder
So in command prompt just type here
database seeding complete
Now open ShopController and here lets fetch the products
Now go to the shop.blade.php file and add following code.
Now add the the following code on just ofter the @extends directive
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.
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.