Laravel E-Commerce Project - Add Attribute Option on Add New Product Page

In this video, we will learn how to add product attribute options on the add new product page.

Let's start by creating a migration. Open the command prompt and run the following command:

php artisan make:model AttributeValue –m

Next, open the migration file. Switch to the project, go to the database directory, and then open the create_attribute_vlues_table_migration file. Add 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');
    });
}

Migrate the migration by running the following command in the command prompt:

php artisan migrate

Run the application:

php artisan serve

Switch to the project and open the AdminAddProductComponent.php file. Inside the render method, fetch all attributes and return them to the view as follows:

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');
}

Open the admin-add-product-component.blade.php view file and add a select control for attributes as follows:

<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

Create some properties in the class file:

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

Bind these properties in the view file. Create two functions in the class file: one for adding a new control according to the selected property. Open the view file and add the 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]);
}

That's it! Let's test the functionality. Switch to the browser and refresh the page. Add a new product and you should see all the attributes. If you want to add a new attribute, go to the attribute link and add a new attribute. Refresh the add product page and you should see the new attribute.

Enter the product details, select the product image, and add the attribute. For example, add the color and size attributes. Enter the color separated by commas and the size separated by commas. Click on add product and you should see that the product has been added.

Check the database table by going to phpMyAdmin and opening the Laravel8ecommmercedb database. Browse the attribute_values table and you should see the records.

By following these steps, you can add product attribute options on the add new product page.