Filament: Repeater With Live Calculations - Total Price Example

Thanks alot friend. I waste two days to slove this problem.

I am making something similar and what I have is slightly different. This would not be good calculation if items are sold in 2019 for example AND invoices is loaded now with latest prizes pulled from latest prizelist. Second issue with approach is for example selling Coca-Cola cans on Pallets. Then picking number of (palets * number of cans per palet) * prize per can. Another and the biggest at least in my project is that total prize isn't re-calculatig on changing quantity or adding new item to the list. Totals refreshes only after saving and refreshing the form.

I've set afterStateUpdated on my field but then $get('invoiceProducts') returns null like it's reset on field value change.

->afterStateUpdated(function (Forms\Get $get, Forms\Set $set) {
			ray("Welll.... Seeing this value changed");
			self::updateTotals($get, $set);
	}),

Hi Medestas, As you have mentioned it's more likely due paths on $get and $set˙. Here is short stripped down example that I have. I have this orderingItems collection for repeating items in repeater. There is a Placeholder just as representation with live calculation (per repeater item) that gets updated when I change quantity.

It's bit harder to explain as I am getting mixed results. Here is a better explanation.

1.) If I use collect($get('orderingItems')) then on each page refresh $set('subtotal',.. is calculated presented properly and Ray will show $totalAmount properly. If I go ahead and change value of pallets_quantity, subtotal value never gets updated and ray("Total: " . $totalAmount); will show 0.

2.) On other hand, if I use collect($get('../*')), subtotal $set('subtotal',.. always shows 0 no matter if I change values in the fields or I reload the Form. Ray ray("Total: " . $totalAmount); will show 0 on page refresh but will show calculated values if I start changing pallets_quantity.

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // Some other fields ...
                // ...
                Forms\Components\Section::make('Add items to order')
                ->compact()
                ->schema([
                    static::getItemsRepeater(),
                ]),


                // footer
                Forms\Components\Section::make("")
                    ->schema(static::getFooterDetailsAndActions())
                    ->compact()
                    ->columns(1),
            ])->columns(1);
    }

    
    // @ Repeater
    public static function getItemsRepeater(): Repeater
    {
        return TableRepeater::make('orderingItems')
        ->relationship('orderingItems')
        ->schema([
            /// ... other fields
            TextInput::make('pallets_quantity')
                ->numeric()
                ->live(true)
                ->minValue(1)
                ->maxValue(100)
                ->label(__('Quantity of pallets'))
                ->afterStateUpdated(function (Get $get, Set $set) {
                    self::updateTotals($get, $set);
                }),

            Placeholder::make('amount')
                ->content(function ($get) {
                    return ($get('pallets_quantity') * $get('on_pallet')) * $get('price');
            })->label(__('Price total per item')),

        ])
        ->defaultItems(0)
        ->hiddenLabel()
        ->columnSpan('full');
    }



    // @ Footer
    public static function getFooterDetailsAndActions(Get $get, Set $set): array
    {
        return [
            Forms\Components\TextInput::make('subtotal')
                ->numeric()
                ->readOnly()
                ->prefix('$')
                ->afterStateHydrated(function (Get $get, Set $set) {
                    self::updateTotals($get, $set);
                }),
            ])->verticalAlignment(VerticalAlignment::End)->alignment(Alignment::End),
        ];
     }

    public static function updateTotals(Get $get, Set $set): void
    {

        ray($get('../*'))->color('orange'); // This prints all items from repeater even with updated values
        ray($get('orderingItems'))->color('blue'); // this prints null after change of value in the fields

        // Worsk only of Refresh/First load
        $selectedProducts = collect($get('orderingItems'))->filter(function ($item) {
            return !empty($item['price']);
        });

        // Works only when changing the value in the field
        $selectedProducts = collect($get('../*'))->filter(function ($item) {
            return !empty($item['price'

Looks like I've hit the limit on lenght. Here is updateTotals function.

public static function updateTotals(Get $get, Set $set): void
    {

        ray($get('../*'))->color('orange'); // This prints all items from repeater even with updated values
        ray($get('orderingItems'))->color('blue'); // this prints null after change of value in the fields

        // Worsk only of Refresh/First load
        $selectedProducts = collect($get('orderingItems'))->filter(function ($item) {
            return !empty($item['price']);
        });

        // Works only when changing the value in the field
        $selectedProducts = collect($get('../*'))->filter(function ($item) {
            return !empty($item['price']);
        });

        // Calculate total price
        $totalAmount = 0;
        foreach ($selectedProducts as $key => $value) {
            $totalAmount += ($value['pallets_quantity'] * $value['on_pallet']) * $value['price'];
        }

        ray("Total: " . $totalAmount);
        $set('subtotal', number_format($totalAmount, 2, '.', '')); // it does not update if $get('../*') is used on top
    }

First to thank you for looking into this and investing time to elaborate. True, I should use pastebin, appology on long posts. True I have multiple fields and different implementation. I've used Livewire to get around it but will use your example to combine and make it cleaner. Whar order actually looks like: https://pasteboard.co/wS6YEzmvcJmi.png Super nasty but working example is below. I'll work around and improove it.

public static function updateTotals(Get $get, Set $set, \Livewire\Component $livewire): void
    {
        $pallet_count = 0;
        $pieces_count = 0;
        $selectedProducts = [];
        $collection = $get('orderingItems'); // default 
        
        if (gettype($collection) !== 'array') {
            $collection = $get('../*');
            $keys = array_map(function($index) {
                return "item-" . ($index + 1);
            }, array_keys($collection));
            // Combine the keys with the original array
            $collection = array_combine($keys, $collection);
        }

        $selectedProducts = collect($collection)->filter(function ($item) {
            return !empty($item['price']);
        });

        $totalAmount = 0;
        foreach ($selectedProducts as $key => $value) {
            $totalAmount += ($value['pallets_quantity'] * $value['on_pallet']) * $value['price'];
            $pallet_count += $value['pallets_quantity'];
            $pieces_count += $value['on_pallet'];
        }

        $set('subtotal', number_format($totalAmount, 2, '.', ','));  // <- this is not updating the subtotal after any modification

        // This does update and its's reactive
        $livewire->order_price_total = number_format($totalAmount, 2, '.', ','); 
        $livewire->order_pallet_total = $pallet_count;
        $livewire->order_pieces_total = $pieces_count;
    }

Thank you so much for the article! Works as a charm. I have a question what if each product has an in-stock-number which I want to reduce after the order executed, how do I do that?

Hi Modestas, I have a question and maybe you will have suggestion on best (or better) approach. My form has repeater which is hidden until value in "Category" select field is picked. Basically, Select field and I need to select "Category" before I can fill any repeater items.

Now what I am looking for is to "lock" select field so that it can't be changed once Repeater has at least one itme added. Bigger problem is "locking" select input nad I can't just use "readOnly" or "disabled()" as it's required field. I could create another field (and hide it using css and setting scale to 0.01) which would take a value of Select field and act as a "proxy" but that would not be best or proper approach.

Would you have any suggestion maybe?

UPDATE: I have implemented it like this:

<?php
    Select::make('category_select_only')
    ->label(__('Category'))
    ->default(fn (callable $get) => $get('category'))
    ->options(static::optionsCategories())
    ->afterStateUpdated(function (?string $state, $set, $livewire) {
        $set('category', $state);
        // ray($livewire->data['orderingItems']); // check ordering items
    })
    ->afterStateHydrated(function ($state, callable $set, callable $get) {
        $category = $get('category');
        $set('category_select_only', $category);
    })
    ->disabled(fn (callable $get, $livewire) => (count($livewire->data['orderingItems']) != 0 && $get('category') !== null))
    ->live()
    ->required(),


    Hidden::make('category')
        ->default(fn (callable $get) => $get('category'))
        ->dehydrated(fn (callable $get) => $get('category') !== null),

Using Hidden field and liwevire to check if repeater has items. I don't check if repeater's items are null, that would not matter much.