Adding product add-ons to lunar

[Xoshbin]

Hi, After adding product add-ons into the products create/edit page with Slots, I just wanted to share my experince here for someone that he/she may need it too.

Creat ProductAddOns model

php artisan make:model ProductAddOns -m

With that command we create ProductAddOns model and a migration file. for the migration we add three fields 'name, value and product_id':

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('product_add_ons', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('value');
            $table->foreignId('product_id')->constrained(config('lunar.database.table_prefix') . 'products');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('product_add_ons');
    }
};

And the ProductAddOns model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Validator;

class ProductAddOns extends Model
{
    use HasFactory;

    public $fillable = ['name', 'value', 'product_id'];

    public static function boot()
    {
        parent::boot();

        //to prevent duplicate values for any product
        static::saving(function ($productAddOn) {
            $validator = Validator::make($productAddOn->toArray(), [
                'name' => 'unique:product_add_ons,name,NULL,id,product_id,' . $productAddOn->product_id,
            ]);

            if ($validator->fails()) {
                return false;
            }
        });

        //Prevent empty values to be stored in the addons table
        static::saving(function ($productAddOn) {
            $validator = Validator::make($productAddOn->toArray(), [
                'name' => 'required|string',
                'value' => 'required|string',
            ]);

            if ($validator->fails()) {
                return false;
            }
        });
    }

    public function product()
    {
        return $this->belongsTo(Product::class);
    }
}

In the boot method of the model, we make sure to prevent empty rows and duplicate rows for a product, so basically we let duplicate values in the table but not for the same product parent.

Now we extend the Lunar product model to add ProductAddOns relation:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends \Lunar\Models\Product
{
    //Load product_add_ons by default when we call a product
    protected $with = ['productAddOns'];

    public function productAddOns()
    {
        return $this->hasMany(ProductAddOns::class);
    }
}

Now we make the AddOns LiveWire component:

php artisan make:livewire AddOns

<?php

namespace App\Http\Livewire\Hub\Components\Slots;

use App\Models\ProductAddOns;
use Livewire\Component;
use App\Models\User;
use Lunar\Hub\Slots\AbstractSlot;
use Lunar\Hub\Slots\Traits\HubSlot;
use function PHPUnit\Framework\isNull;

class AddOns extends Component implements AbstractSlot
{
    use HubSlot;

    public $productAddOns = [];

    public function mount()
    {
        $prodAddOns = $this->slotModel->productAddOns;
        if (!empty($prodAddOns)) {
            foreach ($prodAddOns as $addOn){
                $this->productAddOns[] = ['name' => $addOn->name, 'value' => $addOn->value];
            }
        }
    }

    public function addProductAddOn()
    {
        $this->productAddOns[] = ['name' => '', 'value' => ''];
        $this->saveSlotData($this->productAddOns);
    }

    public function removeProductAddOn($index)
    {
        unset($this->productAddOns[$index]);
    }

    public static function getName()
    {
        return 'hub.components.slots.add-ons';
    }

    public function getSlotHandle()
    {
        return 'add-ons';
    }

    public function getSlotInitialValue()
    {
        //
    }

    public function getSlotPosition()
    {
        return 'top';
    }

    public function getSlotTitle()
    {
        return 'Add-Ons';
    }

    public function updateSlotModel()
    {
    }

    public function handleSlotSave($model, $data)
    {
        $this->slotModel = $model;
        foreach ($data as $key => $value) {
            ProductAddOns::create(['name' => $value['name'], 'value' => $value['value'], 'product_id' => $model->id]);
        }
    }

    public function render()
    {
        return view('livewire.hub.components.slots.add-ons');
    }
}

And the component view, I'm using Tailwind:
HINT: I coludn't use @livewire($slot->getName()) it didn't work for me?!!

<div id="basic-information">
    <div class="shadow sm:rounded-md">
        <div class="flex-col px-4 py-5 space-y-4 bg-white rounded-md sm:p-6">
            <header>
                <h3 class="text-lg font-medium leading-6 text-gray-900">
                    Add-Ons
                </h3>
            </header>
            @foreach($productAddOns as $addOnIndex => $addOn)
            <div class="space-y-4">
                <div class="flex items-center space-x-4 justify-center">
                    <div class="grow">
                        <input type="text" class="form-input block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed" wire:model="productAddOns.{{ $addOnIndex }}.name" placeholder="Enter Name">
                        @error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                    <div class="grow">
                        <input type="number" class="form-input block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed" wire:model="productAddOns.{{ $addOnIndex }}.value" placeholder="Enter value">
                        @error('value.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
                    </div>
                    <div class="col-md-2 items-center justify-center">
                        <button class="py-2 px-4 text-sm bg-red-400 text-slate-50 border-gray-300 hover:bg-gray-100 focus:ring-gray-400 block disabled:cursor-not-allowed disabled:opacity-50 rounded-lg shadow-sm border justify-center font-medium focus:outline-none focus:ring-offset-2 focus:ring-2" wire:click="removeProductAddOn({{ $addOnIndex }})">remove</button>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="col-md-2">
                <button class="py-2 px-4 text-sm bg-white text-gray-600 border-gray-300 hover:bg-gray-100 focus:ring-gray-400 block
      disabled:cursor-not-allowed disabled:opacity-50
      rounded-lg shadow-sm
      border justify-center font-medium focus:outline-none focus:ring-offset-2 focus:ring-2" wire:click="addProductAddOn">Add</button>
            </div>
        </div>
    </div>
</div>

And at the end we need to register both the Product model and the Livewire component in AppServiceProvider, We need to register the model to bind the Extended Product model with Lunar's Product model.

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        Slot::register('product.all', AddOns::class);
    }

    public function boot()
    {
        $models = collect([
            Product::class => \App\Models\Product::class,
        ]);

        ModelManifest::register($models);

        Livewire::component('hub.components.slots.add-ons', AddOns::class);
    }
}

[ryanmitchell]

Rather than extending the Product model I would suggest you instead use resolveRelationUsing in your app service provider.