In this video we are going to learn about Making Shop Page Products Dynamic.
So let see how can we make products dynamic on shop page.
First of all lets create product and product category model and migration.
For that go to the command prompt and run the following command.
Now switch to the project and just go inside the database directory then migration and from migration directory open create_category_table migration.
Inside this migration add following code.
Now open app\\Models\\Category.php model and add following code.
Now from migration directory open create_product_table migration.
Inside this migration add following code.
Now open product model and And here just add the table name
Alright now save the files and lets migrate the migration
For that switch to the command prompt and just type the command for migratrion
Alright migration migrated
Now lets insert some dummy product and categories
For that lets create factory for product and catogries So for crating factory just type the command
Now switch to project and just go inside the database directory then open factories. Now open CategoryFactory and here just write.
Now open the ProductFactory add the following code
Now just go inside the seeders directory and from here open DatabaseSeeders.php file.
Inside the DatabaseSeeder.php file just write the following code.
now lets run the seeder So in command prompt just type here
database seeding complete
Now lets open app\\Http\\Livewire\\ShopComponent.php class file add the following code.
Now open resources\\views\\livewire\\shop-component.blade.php view file and add the following code.
Now lets check this. Switch to the browser and go to the shop page
You can see here products, these products are coming from database.
So in this way you can make products dynamic on shop page.
So let see how can we make products dynamic on shop page.
First of all lets create product and product category model and migration.
For that go to the command prompt and run the following command.
php artisan make:model Category –m
php artisan make:model Product –m
Now switch to the project and just go inside the database directory then migration and from migration directory open create_category_table migration.
Inside this migration add following code.
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name')->unique();
$table->string('slug')->unique();
$table->timestamps();
});
}
Now open app\\Models\\Category.php model and add following code.
class Category extends Model
{
use HasFactory;
protected $table = \"categories\";
}
Now from migration directory open create_product_table migration.
Inside this migration add following code.
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('slug')->unique();
$table->string('short_description')->nullable();
$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(10);
$table->string('image')->nullable();
$table->text('images')->nullable();
$table->bigInteger('category_id')->unsigned()->nullable();
$table->timestamps();
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
});
}
Now open product model and And here just add the table name
class Product extends Model
{
use HasFactory;
protected $table=\"products\";
}
Alright now save the files and lets migrate the migration
For that switch to the command prompt and just type the command for migratrion
php artisan migrate
Alright migration migrated
Now lets insert some dummy product and categories
For that lets create factory for product and catogries So for crating factory just type the command
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 CategoryFactory and here just write.
<?php
namespace Database\\Factories;
use App\\Models\\Category;
use Illuminate\\Database\\Eloquent\\Factories\\Factory;
use Illuminate\\Support\\Str;
class CategoryFactory extends Factory
{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = Category::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition()
{
$category_name = $this->faker->unique()->words($nb=2,$asText=true);
$slug = Str::slug($category_name);
return [
'name' => $category_name,
'slug' =>$slug
];
}
}
Now open the ProductFactory add the following code
<?php
namespace Database\\Factories;
use App\\Models\\Product;
use Illuminate\\Database\\Eloquent\\Factories\\Factory;
use Illuminate\\Support\\Str;
class ProductFactory extends Factory
{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = Product::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition()
{
$product_name = $this->faker->unique()->words($nb=4,$asText=true);
$slug = Str::slug($product_name);
return [
'name' => $product_name,
'slug' => $slug,
'short_description'=> $this->faker->text(200),
'description' => $this->faker->text(500),
'regular_price' => $this->faker->numberBetween(10,500),
'SKU' => 'DIGI'.$this->faker->unique()->numberBetween(100,500),
'stock_status' => 'instock',
'quantity' => $this->faker->numberBetween(100,200),
'image' => 'digital_' . $this->faker->unique()->numberBetween(1,22).'.jpg',
'category_id' => $this->faker->numberBetween(1,5)
];
}
}
Now just go inside the seeders directory and from here open DatabaseSeeders.php file.
Inside the DatabaseSeeder.php file just write the following code.
\\App\\Models\\Category::factory(6)->create();
\\App\\Models\\Product::factory(22)->create();
now lets run the seeder So in command prompt just type here
php artisan db:seed
database seeding complete
Now lets open app\\Http\\Livewire\\ShopComponent.php class file add the following code.
<?php
namespace App\\Http\\Livewire;
use App\\Models\\Product;
use Livewire\\Component;
use Livewire\\WithPagination;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
$products = Product::paginate(12);
return view('livewire.shop-component',['products'=> $products])->layout(\"layouts.base\");
}
}
Now open resources\\views\\livewire\\shop-component.blade.php view file and add the following code.
<main id=\"main\" class=\"main-site left-sidebar\">
<div class=\"container\">
<div class=\"wrap-breadcrumb\">
<ul>
<li class=\"item-link\"><a href=\"#\" class=\"link\">home</a></li>
<li class=\"item-link\"><span>Shop</span></li>
</ul>
</div>
<div class=\"row\">
<div class=\"col-lg-9 col-md-8 col-sm-8 col-xs-12 main-content-area\">
<div class=\"banner-shop\">
<a href=\"#\" class=\"banner-link\">
<figure><img src=\"{{ asset('assets/images/shop-banner.jpg') }}\" alt=\"\"></figure>
</a>
</div>
<div class=\"wrap-shop-control\">
<h1 class=\"shop-title\">Shop</h1>
<div class=\"wrap-right\">
<div class=\"sort-item orderby \">
<select name=\"orderby\" class=\"use-chosen\">
<option value=\"default\" selected=\"selected\">Default sorting</option>
<option value=\"date\">Sort by newness</option>
<option value=\"price\">Sort by price: low to high</option>
<option value=\"price-desc\">Sort by price: high to low</option>
</select>
</div>
<div class=\"sort-item product-per-page\">
<select name=\"post-per-page\" class=\"use-chosen\">
<option value=\"12\" selected=\"selected\">12 per page</option>
<option value=\"16\">16 per page</option>
<option value=\"18\">18 per page</option>
<option value=\"21\">21 per page</option>
<option value=\"24\">24 per page</option>
<option value=\"30\">30 per page</option>
<option value=\"32\">32 per page</option>
</select>
</div>
<div class=\"change-display-mode\">
<a href=\"#\" class=\"grid-mode display-mode active\"><i class=\"fa fa-th\"></i>Grid</a>
<a href=\"list.html\" class=\"list-mode display-mode\"><i class=\"fa fa-th-list\"></i>List</a>
</div>
</div>
</div><!--end wrap shop control-->
<style>
.product-wish{
position: absolute;
top:10%;
left:0;
z-index:99;
right:30px;
text-align:right;
padding-top: 0;
}
.product-wish .fa{
color:#cbcbcb;
font-size:32px;
}
.product-wish .fa:hover{
color:#ff7007;
}
.fill-heart{
color:#ff7007 !important;
}
</style>
<div class=\"row\">
<ul class=\"product-list grid-products equal-container\">
@php
$witems = Cart::instance('wishlist')->content()->pluck('id') ;
@endphp
@foreach ($products as $product)
<li class=\"col-lg-4 col-md-6 col-sm-6 col-xs-6 \">
<div class=\"product product-style-3 equal-elem \">
<div class=\"product-thumnail\">
<a href=\"{{route('product.details',['slug'=>$product->slug])}}\" title=\"{{$product->name}}\">
<figure><img src=\"{{ asset('assets/images/products') }}/{{$product->image}}\" alt=\"{{$product->name}}\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"{{route('product.details',['slug'=>$product->slug])}}\" class=\"product-name\"><span>{{$product->name}}</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">${{$product->regular_price}}</span></div>
<a href=\"#\" class=\"btn add-to-cart\" wire:click.prevent=\"store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})\">Add To Cart</a>
<div class=\"product-wish\">
@if($witems->contains($product->id))
<a href=\"#\" wire:click.prevent=\"removeFromWishlist({{$product->id}})\"><i class=\"fa fa-heart fill-heart\"></i></a>
@else
<a href=\"#\" wire:click.prevent=\"addToWishlist({{$product->id}},'{{$product->name}}',{{$product->regular_price}})\"><i class=\"fa fa-heart\"></i></a>
@endif
</div>
</div>
</div>
</li>
@endforeach
</ul>
</div>
<div class=\"wrap-pagination-info\">
{{$products->links()}}
</div>
</div>
<div class=\"col-lg-3 col-md-4 col-sm-4 col-xs-12 sitebar\">
<div class=\"widget mercado-widget categories-widget\">
<h2 class=\"widget-title\">All Categories</h2>
<div class=\"widget-content\">
<ul class=\"list-category\">
<li class=\"category-item has-child-cate\">
<a href=\"#\" class=\"cate-link\">Fashion & Accessories</a>
<span class=\"toggle-control\">+</span>
<ul class=\"sub-cate\">
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Batteries (22)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Headsets (16)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Screen (28)</a></li>
</ul>
</li>
<li class=\"category-item has-child-cate\">
<a href=\"#\" class=\"cate-link\">Furnitures & Home Decors</a>
<span class=\"toggle-control\">+</span>
<ul class=\"sub-cate\">
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Batteries (22)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Headsets (16)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Screen (28)</a></li>
</ul>
</li>
<li class=\"category-item has-child-cate\">
<a href=\"#\" class=\"cate-link\">Digital & Electronics</a>
<span class=\"toggle-control\">+</span>
<ul class=\"sub-cate\">
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Batteries (22)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Headsets (16)</a></li>
<li class=\"category-item\"><a href=\"#\" class=\"cate-link\">Screen (28)</a></li>
</ul>
</li>
<li class=\"category-item\">
<a href=\"#\" class=\"cate-link\">Tools & Equipments</a>
</li>
<li class=\"category-item\">
<a href=\"#\" class=\"cate-link\">Kid’s Toys</a>
</li>
<li class=\"category-item\">
<a href=\"#\" class=\"cate-link\">Organics & Spa</a>
</li>
</ul>
</div>
</div><!-- Categories widget-->
<div class=\"widget mercado-widget filter-widget brand-widget\">
<h2 class=\"widget-title\">Brand</h2>
<div class=\"widget-content\">
<ul class=\"list-style vertical-list list-limited\" data-show=\"6\">
<li class=\"list-item\"><a class=\"filter-link active\" href=\"#\">Fashion Clothings</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Laptop Batteries</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Printer & Ink</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">CPUs & Prosecsors</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Sound & Speaker</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Shop Smartphone & Tablets</a></li>
<li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Printer & Ink</a></li>
<li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">CPUs & Prosecsors</a></li>
<li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Sound & Speaker</a></li>
<li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Shop Smartphone & Tablets</a></li>
<li class=\"list-item\"><a data-label='Show less<i class=\"fa fa-angle-up\" aria-hidden=\"true\"></i>' class=\"btn-control control-show-more\" href=\"#\">Show more<i class=\"fa fa-angle-down\" aria-hidden=\"true\"></i></a></li>
</ul>
</div>
</div><!-- brand widget-->
<div class=\"widget mercado-widget filter-widget price-filter\">
<h2 class=\"widget-title\">Price</h2>
<div class=\"widget-content\">
<div id=\"slider-range\"></div>
<p>
<label for=\"amount\">Price:</label>
<input type=\"text\" id=\"amount\" readonly>
<button class=\"filter-submit\">Filter</button>
</p>
</div>
</div><!-- Price-->
<div class=\"widget mercado-widget filter-widget\">
<h2 class=\"widget-title\">Color</h2>
<div class=\"widget-content\">
<ul class=\"list-style vertical-list has-count-index\">
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Red <span>(217)</span></a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Yellow <span>(179)</span></a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Black <span>(79)</span></a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Blue <span>(283)</span></a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Grey <span>(116)</span></a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Pink <span>(29)</span></a></li>
</ul>
</div>
</div><!-- Color -->
<div class=\"widget mercado-widget filter-widget\">
<h2 class=\"widget-title\">Size</h2>
<div class=\"widget-content\">
<ul class=\"list-style inline-round \">
<li class=\"list-item\"><a class=\"filter-link active\" href=\"#\">s</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">M</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">l</a></li>
<li class=\"list-item\"><a class=\"filter-link \" href=\"#\">xl</a></li>
</ul>
<div class=\"widget-banner\">
<figure><img src=\"{{ asset('assets/images/size-banner-widget.jpg') }}\" width=\"270\" height=\"331\" alt=\"\"></figure>
</div>
</div>
</div><!-- Size -->
<div class=\"widget mercado-widget widget-product\">
<h2 class=\"widget-title\">Popular Products</h2>
<div class=\"widget-content\">
<ul class=\"products\">
<li class=\"product-item\">
<div class=\"product product-widget-style\">
<div class=\"thumbnnail\">
<a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
<figure><img src=\"{{ asset('assets/images/products/digital_01.jpg') }}\" alt=\"\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
</div>
</div>
</li>
<li class=\"product-item\">
<div class=\"product product-widget-style\">
<div class=\"thumbnnail\">
<a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
<figure><img src=\"{{ asset('assets/images/products/digital_17.jpg') }}\" alt=\"\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
</div>
</div>
</li>
<li class=\"product-item\">
<div class=\"product product-widget-style\">
<div class=\"thumbnnail\">
<a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
<figure><img src=\"{{ asset('assets/images/products/digital_18.jpg') }}\" alt=\"\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
</div>
</div>
</li>
<li class=\"product-item\">
<div class=\"product product-widget-style\">
<div class=\"thumbnnail\">
<a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
<figure><img src=\"{{ asset('assets/images/products/digital_20.jpg') }}\" alt=\"\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
</div>
</div>
</li>
</ul>
</div>
</div><!-- brand widget-->
</div><!--end sitebar-->
</div><!--end row-->
</div><!--end container-->
</main>
Now lets check this. Switch to the browser and go to the shop page
You can see here products, these products are coming from database.
So in this way you can make products dynamic on shop page.
