In this video we are going to learn about Add Product Attribute Option on Add New Product Page.
So let see how can we Add Product Attribute Option on Add New Product Page.
First of all lets create a migration
In command prompt run the command

php artisan make:model AttributeValue –m

Now lets open the migration
So switch to the project go inside the database directory then migration
Now open the create_attribute_vlues_table_migration
Now add here the following columns

public function up()
{
    Schema::create('attribute_values', function (Blueprint $table) {
        $table->id();
        $table->bigInteger('product_attribute_id')->unsigned()->nullable();
        $table->string('value');
        $table->bigInteger('product_id')->unsigned()->nullable();
        $table->timestamps();
        $table->foreign('product_attribute_id')->references('id')->on('product_attributes')->onDelete('cascade');
        $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
    });
}

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

php artisan migrate

No run the application

php artisan serve

Now switch to the project and lets open the
AdminAddProductComponent.php and inside the render method
Lets fetch here all attributes and return to the view as following

public function render()
{
    $categories = Category::all();
    $scategories = Subcategory::where('category_id',$this->category_id)->get();

    $pattributes = ProductAttribute::all();
    return view('livewire.admin.admin-add-product-component',['categories'=>$categories,'scategories'=>$scategories,'pattributes'=>$pattributes])->layout('layouts.base');
}

Now go to the admin-add-product-component.blade.php view file and here lets add the
select control for attributes as following

<div class="form-group">
    <label class="col-md-4 control-label">Product Attributes</label>
    <div class="col-md-3">
        <select class="form-control" wire:model="attr">
            <option value="0">Select Attribute</option>
            @foreach ($pattributes as $pattribute)
                <option value="{{$pattribute->id}}">{{$pattribute->name}}</option>
            @endforeach                                        
        </select>                                    
    </div>
    <div class="col-md-1">
        <button type="button" class="btn btn-info" wire:click.prevent="add">Add</button>
    </div>
</div>

@foreach($inputs as $key => $value)
    <div class="form-group">
        <label class="col-md-4 control-label">{{$pattributes->where('id',$attribute_arr[$key])->first()->name}}</label>
        <div class="col-md-3">
            <input type="text" placeholder="{{$pattributes->where('id',$attribute_arr[$key])->first()->name}}" class="form-control input-md" wire:model="attribute_values.{{$value}}" />                                        
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">Remove</button>
        </div>
    </div>
@endforeach

Now go to the class file here lets create some properties

public $attr;
public $inputs = [];
public $attribute_arr = [];
public $attribute_values;

Now go to the view file and bind these properties
Now in class file create two function one for add new control
according the selected property
Now go to the view file and from here lets all the add function

public function add()
{
    if(!in_array($this->attr,$this->attribute_arr))
    {
        array_push($this->inputs,$this->attr);
        array_push($this->attribute_arr,$this->attr);
    }
}

public function remove($attr)
{
    unset($this->inputs[$attr]);
}

Now all done so lets check so switch to browser and refresh the page
Now lets add new product
And here you see the all attributes I add new attribute for that go to the attribute link from here lets add new attribute
When I refresh the add product page now
Lets check here the attributes
And you can see the all attribute also here in new attribute
Now lets enter the product details select the product image
Now add the attribute
Lets add the color, size
Now enter the color separated with command and size separate with comma
Now click on add product, and here you can see product has been added
Now lets check the table so go to the phpMyAdmin and open Laravel8ecommmercedb database
From here browse this attribute_values table and here you can see the records
So in this way you can Add Product Attribute Option on Add New Product Page.