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

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

Let's start by opening the Product Model. Go to the app directory, then models, and open the Product.php file. Add a function here:

public function attributeValues()
{
    return $this->hasMany(AttributeValue::class,'product_id');
}

Next, open the AdminEditProductComponent.php class file and create the properties:

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

Inside the mount method, add the following code:

public function mount($product_slug)
{
    $product = Product::where('slug',$product_slug)->first();
    $this->name = $product->name;
    $this->slug = $product->slug;
    $this->short_description = $product->short_description;
    $this->description = $product->description;
    $this->regular_price = $product->regular_price;
    $this->sale_price = $product->sale_price;
    $this->SKU = $product->SKU;
    $this->stock_status = $product->stock_status;
    $this->featured = $product->featured;
    $this->quantity = $product->quantity;
    $this->image = $product->image; 
    $this->images = explode(",",$product->images);       
    $this->category_id = $product->category_id;  
    $this->scategory_id = $product->subcategory_id;      
    $this->product_id = $product->id;
    $this->inputs = $product->attributeValues->where('product_id',$product->id)->unique('product_attribute_id')->pluck('product_attribute_id');
    $this->attribute_arr = $product->attributeValues->where('product_id',$product->id)->unique('product_attribute_id')->pluck('product_attribute_id');

    foreach($this->attribute_arr as $a_arr)
    {
        $allAttributeValue = AttributeValue::where('product_id',$product->id)->where('product_attribute_id',$a_arr)->get()->pluck('value');
        $valueString ='';
        foreach($allAttributeValue as $value)
        {
            $valueString = $valueString . $value . ',';
        }
        $this->attribute_values[$a_arr] = rtrim($valueString,",");
    }
}

Inside the render method, fetch all attributes and return them to the component view file 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-edit-product-component',['categories'=>$categories,'scategories'=>$scategories,'pattributes'=>$pattributes])->layout('layouts.base');
}

Open the admin-add-product-component.blade.php file, copy the relevant lines of code, and paste them into the edit product view file. Go to the class file and inside the update method, add the following code:

AttributeValue::where('product_id',$product->id)->delete();
foreach($this->attribute_values as $key=>$attribute_value)
{
    $avalues = explode(",",$attribute_value);
    foreach($avalues as $avalue)
    {
        $attr_value = new AttributeValue();
        $attr_value->product_attribute_id = $key;
        $attr_value->value = $avalue;
        $attr_value->product_id = $product->id;
        $attr_value->save();
    }
}

Create a function for adding attributes and another function for deleting attributes:

public function add()
{
    if(!$this->attribute_arr->contains($this->attr))
    {
        $this->inputs->push($this->attr);
        $this->attribute_arr->push($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. Edit a product and add a new attribute, such as a color. Remove an existing size and add a new one. Click on update and you should see the message "Product updated successfully". Refresh the page and you should see the updated values.

Check the database table by going to phpMyAdmin and opening the database. Browse the table and you should see the updated attribute values.

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