How to let the user add many products to the cart with its own specifications and insert the full order

Wappler General How To
#1

Capture
Capture.PNG1338Ă—431 10.3 KB

I have tried this way but i faced issues inserting in the Database

#2

Well - it is possible to do - with a repeater :slight_smile:

So the basic logic is like this:

  1. you setup a global variable (add the Variable component) and give it initially value 1
  2. you use the value of this variable to make a repeater children around the row of fields you want to repeat
  3. Your “add” button just set the variable its value +1 which we result in automatically repeating more columns
  4. The delete should be only available on the last row and will do precisely the opposite - set the variable value -1
  5. Make sure you give the repeater a unique key element - like $index which is just the order - so elements retain their position and values

The whole form will be then submitted as multi record form - so on the server side you can just loop through all the records and do with each one what ever you want.

Hope it is a bit clear - it is a bit complex procedure but once you get it - it will all make sense :slight_smile:

2 Likes
Clone Button
#3

The issue is when the row repeated it will repeat the column only and it will look what is supposed to look.

here is a look

Capture
Capture.PNG1552Ă—403 14.2 KB

Does it effect if i put it inside a form ?

repeat
repeat.PNG1705Ă—466 46.4 KB

#4

You should create a table for all the fields. And then repeat the whole table row.

Add dmx-show on the delete button - to show only on last row

#5

I faced issues when i tried to insert.

inputs do not show as a record. it shows as a single inputs.

#6

As your fields are repeated in a record - you should named them specially like this:

dmx-bind:name="record[{{$index}}][car_id]"

where car_id is just the field name.

When you import the form in the server action - you will get a nice structure of the input fields under the record. So you can repeat through the record and do something with it.

#7

It worked well.

And the right solution for the repeat area make the column 12 size ( col-12 )

Capture
Capture.PNG1691Ă—442 38 KB

1 Like
#8

So all ok now? This will make a nice tutorial

#9

Yes. All worked will.

However, it would be better if we can show the inserted items on a list below.
I tried but until now i didn’t get any solution

#10

Got it. You will require to add when success load server connect.

1 Like
#11

would be nice to see some Animated GIF… how it works