Skip to main content

Products Table Main Structure

Premium
6 min read

Now we will move on to products. In this lesson, we will create a table of Products, powered by Livewire. For now, we will just show a list of products, and in other lessons, we will add features to it.

products table with pagination

First, we will create a Livewire component...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (31 h 16 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

FA
Farooq Ahmed ✓ Link copied!

when I was trying to give product model command this error is given ErrorException

include(C:\Users\HP\Documents\Project\project_one\vendor\composer/../../app/Http/Livewire/ProductList.php): Failed to open s stream: No such file or directory

at C:\Users\HP\Documents\Project\project_one\vendor\composer\ClassLoader.php:578 574▕ * @param string $file 575▕ * @return void 576▕ */ 577▕ self::$includeFile = static function($file) { ➜ 578▕ include $file; 579▕ }; 580▕ } 581▕ } 582▕

1 C:\Users\HP\Documents\Project\project_one\vendor\composer\ClassLoader.php:578 include()

2 C:\Users\HP\Documents\Project\project_one\vendor\composer\ClassLoader.php:432 Composer\Autoload\ClassLoader::Composer\Autoload{closure}("C:\Users\HP\Documents\Project\project_one\vendor\composer/.../../app/Http/Livewire/ProductList.php")

PK
Povilas Korop ✓ Link copied!

What do you mean by "give product model command"? It seems like the file of ProductList.php is not found, can you double check it actually exists? Sorry, I can't really debug it for you, the error message is pretty clear, I won't help you more than that.

FA
Farooq Ahmed ✓ Link copied!

sorry I figure it out bug was because I did not give the data of product country in right sequence in database migration thats why i could not migrate it

RB
Rajesh Budhathoki ✓ Link copied!

To seed database in this step, open CategoryFactory.php and amend:

public function definition(): array
    {
        $city = fake()->unique()->city();

        return [
            'name' => $city,
            'slug' => Str::slug($city),
            'position' => fake()->numberBetween(1, 10),
        ];
    }

Create ProductFactory.php and amend:

public function definition(): array
    {
        return [
            'name' => fake()->catchPhrase(),
            'description' => fake()->realText(),
            'country_id' => fake()->numberBetween(1, 240),
            'price' => fake()->numberBetween(100, 500),
        ];
    }

And amend in DatabaseSeeder.php

public function run(): void
    {
        User::factory(10)->create();

        $this->call([
            CountriesSeeder::class,
        ]);

        Product::factory(10)->create()->each(function ($product) {
            $product->categories()
                ->saveMany(Category::factory(mt_rand(1, 2))->make());
        });
    }

We are seeding products with belongs to many relationship. Execute to seed the data:

php artisan migrate:fresh --seed
E
Emruardo ✓ Link copied!

Correct me please, if I'm wrong but It generates a unique category/categories for each product, right?

Product::factory(10)->create()->each(function ($product) {
	$product->categories()
		->saveMany(Category::factory(mt_rand(1, 2))->make());
});

my approach is :

// ...
	Category::factory()->count(11)->create();
	$categories = Category::all();
	Product::factory()->count(11)->create()->each(
		function($product) use ($categories) {
			$product->categories()->attach($categories->random(random_int(1,3)));
		}
	);
RB
Rajesh Budhathoki ✓ Link copied!

@Eduardo, both your approach and mine are producing the same result. I am seeding at least 2 random categories with products, and you are seeding 3. I find my code to be cleaner compared to yours. As you can see in the screenshot:

Seeding code

RB
Rajesh Budhathoki ✓ Link copied!

Dear @Povilas Korop,

I'm afraid there are typos in your code. Shouldn't we type hint the relationship in pascal case like this?

use Illuminate\Database\Eloquent\Relations\BelongsToMany;

public function categories(): BelongsToMany
    {
        return $this->belongsToMany(Category::class);
    }

Reference

PK
Povilas Korop ✓ Link copied!

Yeah, well spotted! Will fix. Thanks for taking the time.

DG
Dom GOUBET ✓ Link copied!

Hello,

I have installed the code from the repository (laravel 10.45 but I encounter the same problem with laravel 11) and migrated/seeded the database on a brand new one.

On a listing page (products or orders), I have found a weird behavior concerning the checkboxes on the left when going from one page to another using the pagination below the table.

If I check some checkboxes on the first page for example and then go to the second page (or any other), the same rows are checked on the second page and if I uncheck one of them on the second page, all become unchecked.

Looking forward for a solution

DG
Dom GOUBET ✓ Link copied!

Found the solution: One needs to add wire:key in the loop line 116 of resources/views/livewire/products-list.blade.php

@foreach($products as $product)
<tr class="bg-white" wire:key="product-{{ $product->id }}">
DG
Dom GOUBET ✓ Link copied!

And obviously the same correction line 136 of resources/views/livewire/orders-list.blade.php

@foreach($orders as $order)
<tr class="bg-white" wire:key="order-{{ $order->id }}">
N
Nerijus ✓ Link copied!

That's a really great catch! Updated lessons and repo