Filament•12mo ago

Please Help! Is it possible to show the images based on the selected option in create form?

Hello all, In my orders form I want to give select field and when user select the customer_name, I want to display all related item_image for the selected customer below with 3 more fields which are barcode & item price as placeholder & quantity as input field for each item_image. I'm trying to achieve this with Viewfield with no succes as I never use this viewfield. Please help me to achieve this.

5 Replies

leoPascalOP•12mo ago

Is there anyone who can help, please.

Alex Six•12mo ago

Does this get you pointed in the right direction? By following these steps, you can use the selected option of a Select field to populate other fields into the form. https://filamentphp.com/docs/3.x/forms/advanced#dynamic-fields-based-on-a-select-option

Advanced forms - Form Builder - Filament

leoPascalOP•12mo ago

Thank you @Alex Six for your prompt response. It seems like the suggested solution will work, except for one crucial aspect – handling images. I specifically need to display images within the form. Allow me a moment to elaborate on my requirements. I have approximately 1000 item images associated with around 5 customers, each with different prices based on the customer. For instance: item-1 = $1 for Customer-A item-2 = $2 for Customer-A item-1 = $1.5 for Customer-B item-2 = $1.75 for Customer-B item-1 = $1.8 for Customer-C item-2 = $2.25 for Customer-C ... and so forth On the orders page, I aim to initially load a select field with all customers. Upon selecting an option, I want the corresponding item images to be displayed in a separate card for each item with 3 placeholders for supplier_barcode, item_cost, item_total (item_cost * item_quantity) and an input field for item_quantity. Finally, at the bottom of the page, I need to display the total amount, similar to a cart. I appreciate your assistance.

Alex Six•12mo ago

Short of using something like the Curator plugin for media uploads, if you wanted to, you could likely create a custom field for displaying images in a read-only format in a form.

leoPascalOP•12mo ago

Thank you for your reply, @Alex Six . I'm trying to do like this

  class Counter extends Component
{
    public $orderDtls = [];

    public function addNewItem()
    {
        $this->orderDtls[] = [
            'item_quantity' => 0,
            'item_cost' => 0,
            'item_total' => 0,
        ];
    }

    public function updated($key)
    {
        foreach ($this->orderDtls as $index => $item) {
            $this->orderDtls[$index]['item_total'] = $item['item_quantity'] * $item['item_cost'];
        }
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

  class Counter extends Component
{
    public $orderDtls = [];

    public function addNewItem()
    {
        $this->orderDtls[] = [
            'item_quantity' => 0,
            'item_cost' => 0,
            'item_total' => 0,
        ];
    }

    public function updated($key)
    {
        foreach ($this->orderDtls as $index => $item) {
            $this->orderDtls[$index]['item_total'] = $item['item_quantity'] * $item['item_cost'];
        }
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

the blade view like this

  <div>
   @foreach($orderDtls as $key => $item)
    <div>
     <label for="item_quantity">Item Quantity:</label>
       <input name="item_quantity"   wire:model.lazy="orderDtls.{{ $key }}.item_quantity" type="number" min="0" class="text-gray-700 text-sm border-b border-gray-400 focus:outline-none">
 <label for="item_cost">Item Cost:</label>
  <p class="text-gray-700 text-sm">{{ $linked->item_cost }}</p>
 <h1>Total: {{ $item['item_total'] }}</h1>
</div>
@endforeach
<button wire:click="addNewItem">Add Item</button>
</div>

  <div>
   @foreach($orderDtls as $key => $item)
    <div>
     <label for="item_quantity">Item Quantity:</label>
       <input name="item_quantity"   wire:model.lazy="orderDtls.{{ $key }}.item_quantity" type="number" min="0" class="text-gray-700 text-sm border-b border-gray-400 focus:outline-none">
 <label for="item_cost">Item Cost:</label>
  <p class="text-gray-700 text-sm">{{ $linked->item_cost }}</p>
 <h1>Total: {{ $item['item_total'] }}</h1>
</div>
@endforeach
<button wire:click="addNewItem">Add Item</button>
</div>

here all the item_images are getting displayed. the functionality what I need is like I want to display the item_quantity, item_cost & item_total when the item_quantity got updated I want the item_total to be updated automatically for each item. PLEASE HELP ME ACHIEVE THIS!

Gaming

Programming

Please Help! Is it possible to show the images based on the selected option in create form?