The key purpose of this module is to simplify the process of creating a product, by bringing the creation of a product and it's display together. The challenge is that a given node display can reference several products, this allows you to easily have one display for several variants of a product(s).
It shows the product creation form by default, this is the primary use case for this widget. The other use case, a referenced product is demoted in terms of importance. Using
<hr> we "organize" the form into a part that is solely about the product. Then we display the different actions "Add another product" and "Reference a product" on the bottom of this part, with a gray background color (similar to Rules).
Add another product
Clicking add another product, the current product saves and you are shown a new product form. The previously entered product is now saved, and shown in a table on top. This all happens in a collapse/fade animation :'). Additionally the form transforms into a drag and drop form, which is connected to the table.
Add another product (multiple ones exists)
This shows the interaction when there are multiple products. The way that the "edit" link works, is that it opens up the form in the table. This is similar to how formatter settings work in the field ui.
Table of products
When you edit the product, and there are products and you did not click "Add another product".
Pattern already exists
We are not totally hacking core! :) The pattern partly exists for formatter settings in the Field UI