Expresso Store: Reorder button for previous orders

Question

I'd like to add a "Reorder" button to the previous orders (store:orders) in Store so when a user clicks the button that same item, quantity and modifiers will be placed in to their shopping cart. I've cobbled together the following but it loads slowly, the modifiers don't work as the {modifier_input_name} tag doesn't exist in the {items} tag and it only seems to process the first four of the {exp:store:product} tags. Is there a better way to do this?

Order history template:

{exp:store:orders member_id='CURRENT_USER' order_by='order_date' sort='desc'}
{items} {title}
{embed="includes/order_history_reorder" entry_id="{entry_id}" hidden_fields="<input type='hidden' name='item_qty' value='{item_qty}' class='item_quantity' />{modifiers}<input name='UNKNOWN' value='{modifier_value}' type='hidden'>{/modifiers}" }
{/items}
{/exp:store:orders}

includes/order_history_reorder template:

{exp:store:product entry_id="{embed:entry_id}" disable_javascript="yes"}
{embed:hidden_fields}
<input type="submit" name="submit" class="submit-button" value="{lv_reorder_text}" />
{/exp:store:product}

Answer 1

I haven't tested this but off the top of my head I would recommend using the Product Form tag to allow you to add all of the items to the cart without the need for embeds. If you have issues change the hidden fields to text fields to see what they are being populated with.

{exp:store:product_form return="store/checkout"}
    {exp:store:orders member_id='CURRENT_USER' order_by='order_date' sort='desc'}
    <h1>{order_id} -- order_date format="%m.%d.%Y"}</h1>

        {items}
            {exp:store:product entry_id="{entry_id}" disable_form="yes"  disable_javascript="yes"}
                {title} 
                <input type="hidden" name="items[{item:count}][entry_id]" value="{entry_id}" />
                <input type="hidden" name="items[{item:count}][item_qty]" size="3" value="1" />
                {modifiers}
                    <input type="hidden" name="items[{item:count}][{modifier_input_name}]" value="{modifier_value}">
                {/modifiers}
        {/items}
    {/exp:store:orders}
    <p>
        <input type="submit" name="submit" value="Repeat this order" />
    </p>
{/exp:store:product_form}

Ideally DevDemon would add variable prefixing to all of the Store tags so you could make sure that you don't have conflicts with variable names.

Answer 2

This form won't work if there are no modifiers: Store: Can't find product (entry ID: 32, modifiers []) when you submit cart.

Here is a working example:

{exp:store:product_form return="cart/index"}
    {exp:store:orders order_hash="{segment_3}"}
    <section>
        <h1>Order History</h1>
        <div class="order_status">
            <h2>Order Status: <span>{order_status}</span>
        </div>
        <div class="order_totals">
            <dl>
                <dt>Order Placed:</dt>
                <dd>{order_date format="%j %M %Y"}</dd>
                <dt>Sub Total:</dt>
                <dd>{order_total}</dd>
                <dt>Shipping:</dt>
                <dd></dd>
                <dt>Account Credit Used:</dt>
                <dd></dd>
                <dt>Promo Code Used:</dt>
                <dd></dd>
            </dl>
        </div>
        <div class="order_person">
            <dl>
                <dt>Delivered To:</dt>
                <dd>
                    {shipping_name}<br/>
                    {shipping_address1}<br/>
                    {shipping_address2}<br/>
                    {shipping_city} {shipping_postcode}<br/>
                    {shipping_state_name}<br/>
                    {shipping_country_name}<br/>
                    {shipping_phone}<br/>
                </dd>
            </dl>

        </div>
    </section>
    <section class="order_details">
        <h2>Order Details: Products Ordered</h2>
        <div class="order_headings">
            <div>&nbsp;</div>
            <div class="qty_head">Qty</div>
            <div class="price_head">Price</div>
            <div class="total_head">Total</div>
            <div class="reorder">Reorder</div>
        </div>
        {items}
        {exp:channel:entries channel="products" entry_id="{entry_id}" dynamic="no"}
        {exp:store:product disable_form="yes" entry_id="{entry_id}"}
        <div class="item">
            <div class="item_information">
                <img src="http://placehold.it/350x150">
                <h4><a href="{path='store_example/product'}/{url_title}">{title}</a></h4>
                <p><small><b><a href="/shop/{categories show_group='1' limit='1'}{category_url_title}{/categories}/{url_title}#reviews" class="button--action">Review this product</a></b> </small></p>
                <ul class="categories">
                {categories show_group='2'}
                    <li class="list__item">{category_name}</li>
                {/categories}
                </ul>
            </div>
            <div class="item_qty">{item_qty}</div>
            <div class="item_price">{price}</div>
            <div class="item_subtotal">{item_subtotal}</div>
            <div class="item_reorder">
            {!-- ===/ for redordering these items /=== --}
                <input type="hidden" name="items[{item:count}][entry_id]" value="{entry_id}" />
                <input type="text" name="items[{item:count}][item_qty]" size="3" value="1" />
            </div>
        </div>
        {exp:store:product}
        {/exp:channel:entries}
        {/items}
    </section>
    {/exp:store:orders}
    <div class="item_reorder">
        <input type="submit" name="submit" value="Repeat this order" />
    </div>
    {/exp:store:product_form}