Laravel 10 E-Commerce Project - Creating a Shop Page
In this video, we will learn how to create a shop page.
Creating a New Controller
To create the shop page, we need to create a new controller. Open the command prompt and run the following command:
php artisan make:controller ShopController
Now, let's open this controller. Go to the app directory, then http/controllers, and open the ShopController.
Here, let's create a function:
public function index()
{
return view('shop');
}
Creating a Route for the Function
Now, let's create a route for the function. Go to the routes directory and open the web.php file.
Add a new route:
Route::get('/shop',[ShopController::class,'index'])->name('shop.index');
Creating the Shop View
Now, let's create the shop view. Go to the resources directory, then views, and create a new blade file called shop.blade.php.
Here, let's extend the layout:
@extends("layouts.base");
@section("content")
@endsection
Now, go to the template directory and open the shop.html file in VS Code.
Copy the body content, excluding the header and footer, and paste it inside the shop.blade.php file.
Save this and let's check. You can see the shop page.
Currently, these products are hard-coded. Now, let's make these products dynamic.
Creating Models and Migrations
First, let's create three models and migrations: one for Brands, one for Category, and one for Product.
Open the command prompt and run the following command to create the models:
Php artisan make:model Brand –m
Php artisan make:model Category –m
Php artisan make:model Product –m
Now, let's open the migration files.
Go to the database directory, then migrations, and open the create brands table migration file.
Add the following columns:
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();
});
}
Open the create categories table migration file and add the 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();
});
}
Open the create products table migration file and add the 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, let's migrate the migration:
Run the following command in the command prompt:
php artisan migrate
Defining Relationships between Models
Now, go to the Models directory and open the Brand Model.
Add a function to relate the brand to multiple products:
public function products()
{
return $this->hasMany(Product::class,'brand_id');
}
Open the Category Model and add a relation with the product:
public function products()
{
return $this->hasMany(Product::class,'category_id');
}
Open the Product Model and add two functions:
public function category()
{
return $this->belongsTo(Category::class,'category_id');
}
public function brand()
{
return $this->belongsTo(Brand::class,'brand_id');
}
Inserting Records into the Tables
Let's create factories for brand, category, and product.
Run the following command in the command prompt:
php artisan make:factory BrandFactory –model=Brand
php artisan make:factory CategoryFactory –model=Category
php artisan make:factory ProductFactory –model=Product
Now, switch to the project and go inside the database directory, then open factories.
Open the BrandFactory and add the following code:
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'
];
}
Open the CategoryFactory and 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'
];
}
Open the ProductFactory and add the following code:
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, go inside the seeders directory and open the DatabaseSeeder.
Add the following code:
public function run(): void
{
\App\Models\Brand::factory(6)->create();
\App\Models\Category::factory(6)->create();
\App\Models\Product::factory(24)->create();
}
Now, let's run the seeder:
Run the following command in the command prompt:
php artisan db:seed
Database seeding is complete.
Fetching Products in the ShopController
Now, open the ShopController and fetch the products:
public function index()
{
$products = Product::orderBy('created_at','DESC')->paginate(12);
return view('shop',['products'=>$products]);
}
Go to the shop.blade.php file and add the 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()}}
Add the following code just after 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, it's done. Let's check and go to the /shop URL.
You can see the 12 products here, and this is the pagination link.
This pagination link is not in our template style, so in the next tutorial, we will see how to apply the template style to this pagination link.
That's all about creating the shop page.
