Expresso Store modifier select in checkout

Question

I would like to add the option the change the product modifiers from inside the checkout. I've done some tried some things already but don't seem to be able to manage this. At the moment I'm using an embed function to display the modifiers select per product in my checkout which is working. Though the update seems to ignore this select.

My current code is like this:

{exp:store:checkout form_class="form-horizontal" return="{segment_1}/order_ok/ORDER_HASH/"}
   {items}
     {exp:channel:entries entry_id="{entry_id}" site="sales"  status="not closed"}
       <tr>
         <td>{title}</td>
         <td>
           {modifiers}
             {embed="us/_product-modifiers" entry_id="{entry_id}" key="{key}" option_id="{option_id}" modifier_id="{modifier_input_name}"}
           {/modifiers}
         </td>
         <td>
            <div class="input-group">
               <input type="text" name="items[{key}][item_qty]" value="{item_qty}" class="form-control qty" placeholder="1">
            </div>
       </tr>
     {/exp:channel:entries}
   {/items}
{/exp:store:checkout}

The embed I'm using:

{exp:store:product entry_id="{embed:entry_id}" disable_form="yes" disable_javascript="yes"}

  {modifiers}
    {if modifier_type == 'var' OR modifier_type == 'var_single_sku'}
        <select name="items[{embed:key}][{embed:modifier_id}]">
            {modifier_options}
                <option value="{option_id}" {if "{embed:option_id}" == "{option_id}"}selected="selected"{/if}>
                    {option_name}
                </option>
            {/modifier_options}
        </select>
    {/if}
  {/modifiers}

{/exp:store:product}

I'm not entirely sure if it's even possible without modifying the store code itself as there isn't really anything about it in the documentation from what I can see. Has someone encountered the same problem already or might know a solution to this problem?

Answer 1

Looks like the answer you need is in one of the 2 answers given here mate : Store module: How to update product modifier from the cart page?

Answer 2

As Adrian mentioned in the previously mentioned link this is not a normal behavior for Store as it see items with different modifiers/skus as separate line items in the cart.

The underlying issue you are running into here is that Store treats any products with different modifiers as separate line items in your cart (for example if you add a Red Shirt and Blue Shirt to your cart, it would not make sense to merge them into a single line item on the invoice). That is why when you try to update the "modifier", it adds a new line item to the cart.

So in Store v2 you are still really faced with the same two options:

1.)

Write an extension with a custom form action URL, which edits the cart directly in the database (this is easier than it sounds, you can use our cart library to recalculate everything once you change the modifiers)

This is what Brian did when he tapped into the store_cart_update_start hook in Store v1. You could create the same functionality in Store v2 by using one of the order_update hooks

OR

2.)

Remove the existing product and add a new product. This would require some javascript to make two sequential form submissions seem like a single step to the customer, because the checkout form and product form have different action URLs.

If you are not comfortable with php this would be your best best, you could open a modal that allows the customer to add a new product to the cart with the correct modifiers and then deletes the product with the different modifiers from the cart.