Laravel E-Commerce Project - Show Product Attributes On Product Details Page

In this video, we will learn how to display product attributes on the product details page.

Let's start by going to the ProductAttribute model and creating a function:

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

Next, open the AttributeValue model and create a function for productAttribute:

public function productAttribute()
{
    return $this->belongsTo(ProductAttribute::class,'product_attribute_id');
}

Now, open the details-component.blade.php view file and display the product attributes:

<div>
    @foreach($product->attributeValues->unique('product_attribute_id') as $av)
        <div class="row" style="margin-top: 20px">
            <div class="col-xs-2">
                <p>{{$av->productAttribute->name}}</p>
            </div>
            <div class="col-xs-10">
                <select class="form-control" style="width: 200px" wire:model="satt.{{$av->productAttribute->name}}">
                    @foreach($av->productAttribute->attributeValues->where('product_id',$product->id) as $pav)
                        <option value="{{$pav->value}}">{{$pav->value}}</option>                                                
                    @endforeach
                </select>
            </div>
        </div>
    @endforeach
</div>       

That's it! Let's test the functionality. Switch to the browser and refresh the page. Click on any product, and you should see the product attributes, such as color and size.

Try checking another product, and you should see its attributes as well. If a product has no attributes, it will be displayed accordingly.

By following these steps, you can display product attributes on the product details page.