Exp:resso Store form created by products tag - I just want to submit a single SKU

Question

In continuation of my thread here, I'm still interested in setting up a products form where all the SKUs are laid out, and a visitor simply clicks a button beside the SKU to add exactly one of that product, in that SKU variation, to the cart.

James Muspratt posted a slick solution here in which the modifier options are laid out as stylized radio buttons, which use jQuery to manipulate the modifier drop downs (hidden with CSS). That's almost what I need, but rather than a row of radio button choices connected to the individual modifier drop downs, I need the options combined as an SKU option in one button. The submit button, ideally, would then just submit that SKU to the cart.

I think that it would somehow be possible to do, but I'm having trouble following the generated block of code beginning with "" , and I do not understand what the Products form is actually submitting (particularly in the hidden field '_params').

I don't have any issue pulling the SKUs for a product out of the Store tables with MySQL. I just have an issue with submitting it.

For example, I can use the following MySQL to pull the t-shirt SKU variation that is male cut, black, and size small. I can produce a button that is enabled or disabled depending if stock is available. For some reason, however, the code doesn't actually submit the SKU to the cart:

{exp:channel_entries entry_id="953"} <!-- simplified channel_entry tag -->
{exp:query sql="SELECT sku, entry_id, stock_level FROM exp_store_stock WHERE entry_id = '{entry_id}' AND sku LIKE '%_m_sm_black%'"}
<!-- this works because the SKU format contains consistent code for the item -->

{exp:store:product entry_id="{entry_id}"}
    <input type="hidden" id="item_qty" name="item_qty" value="1" />
<input type="hidden" name="item_sku" value="{sku}">
    <button type="submit" name="submit" {if stock_level < 1}disabled="disabled" class="disabled"{/if}>S</button>
    <br/>{stock_level}
{/exp:store:product}

{/exp:query}
{/exp:channel_entries}

Anyway, I feel like I'm missing hidden variables of some kind, or completely misunderstanding what fields and data need to be submitted to the cart (in the normal drop-down modifier option entry procedure) in order to add a cart item this way.

Does the SKU get figured out (based on the product ID and the modifier selections) between the event of hitting the "add to cart" button and returning the page? I guess that another way of saying what I want to do is submit a fixed quantity and an SKU of an item directly to the cart. I hope this is not totally beyond the capability of Store.

If you made it this far, once again, thanks for turning this question about Store's product submission forms over in your mind.

—Rob

Answer 1

You're on the right track.

To clarify the _params hidden field, it is just an encrypted record of any parameters you used in the tag. It's not used much in the add to cart form, but for example in the checkout tag, if you specify required fields we need to encrypt these, otherwise the customer could simply edit the hidden field and make them not required. Just submit the _params hidden field intact and you won't have any problems.

Does the SKU get figured out (based on the product ID and the modifier selections) between the event of hitting the "add to cart" button and returning the page?

Exactly. In the add to cart form, you submit the modifiers, and the SKU is figured out automatically. You don't specify a SKU directly. This is because some products have modifiers which aren't related to the SKU (e.g. "gift wrapping" yes/no), and also because if a product has more than one modifier, submitting the SKU would require javascript to figure out the matching SKU rather than just submitting the drop-downs and letting Store do the hard work.

Therefore, instead of this:

<input type="hidden" name="item_sku" value="{sku}">

You need something like this:

<input type="hidden" name="modifiers_16" value="38">
<input type="hidden" name="modifiers_17" value="43">

The name field refers to the product_mod_id, and the value field refers to the product_opt_id related to that SKU.

So assuming you wanted to keep your existing SKU loop, something like this will probably work to output the correct modifiers (completely untested, but hopefully it puts you on the right track):

{exp:store:product entry_id="{entry_id}"}
    <input type="hidden" id="item_qty" name="item_qty" value="1" />
    {exp:query sql="SELECT * FROM exp_store_stock_options WHERE sku = '{sku}'}
        <input type="hidden" name="modifiers_{product_mod_id}" value="{product_opt_id}">
    {/exp:query}
{/exp:store:product}