"Related products" add to cart button in sidebar not adding to cart (Exp:resso Store)

Question

On a product info/detail page, the sidebar is showing "related products" which are selected in the CP via Playa. I have them showing up properly but the Add to Cart button doesn't work right if the product has modifiers. When clicked, the page doesn't go to the return URL set in the return parameter of the {exp:store:product} tag pair. Instead, it goes to the same product URL but no content shows up. If the product does not have modifiers, it gets added to the cart correctly.

Here is the code for the related products that show up in the sidebar:

{if wine_related_wines}
          <h3>You May Also Enjoy</h3>
          {exp:playa:children 
            channel="shop_wines" 
            var_prefix="w"}

            {exp:store:product entry_id="{w:entry_id}" return="cart"}
              <div class="cta">
                <h5 class="wine-name-price">

                    <a href="/shop/wines/{w:url_title}">
                      <span>{w:wine_year} {w:wine_varietal}</span> 
                      {w:wine_vineyard}{w:title}{/w:wine_vineyard} 
                      {w:wine_title_suffix}
                      <span class="price">
                        {if "{w:wine_details:price}" == "$0.00"}

                          {modifiers}
                            {if modifier_type == 'var'}
                              {modifier_options limit="1"}
                                ${price_inc_mod_val}
                              {/modifier_options}
                            {/if}
                          {/modifiers}
                        {/if}
                        {if "{w:wine_details:price}" != "$0.00"}
                          {w:wine_details:price}
                        {/if}
                      </span> 
                    </a>
                </h5>

                <input type="hidden" name="item_qty" value="1">
                <input type="submit" name="submit" value="Add to Cart" class="button tiny">
              </div>
            {/exp:store:product}
          {/exp:playa:children} 
        {/if}

I've tried changing {price_inc_mod_val} to just {price_mod} but that doesn't help. I'm sure I'm missing something simple here.

Answer 1

First make sure that your sidebar is not nested in your main product form since that will cause issues, but I doubt that is the case since products without modifiers work fine.

From the looks of it you are not actually selecting the modifier in your conditional. So Store is not able to add the item to the cart properly.

Try adding

<input type="hidden" name="{modifier_input_name}" value="{option_id}">

into your conditional like so:

{if wine_related_wines}
  <h3>You May Also Enjoy</h3>
  {exp:playa:children 
    channel="shop_wines" 
    var_prefix="w"}

    {exp:store:product entry_id="{w:entry_id}" return="cart"}
      <div class="cta">
        <h5 class="wine-name-price">

            <a href="/shop/wines/{w:url_title}">
              <span>{w:wine_year} {w:wine_varietal}</span> 
              {w:wine_vineyard}{w:title}{/w:wine_vineyard} 
              {w:wine_title_suffix}
              <span class="price">
                {if price_val == 0}

                  {modifiers}
                    {if modifier_type == 'var'}
                      {modifier_options limit="1"}
                        <input type="hidden" name="{modifier_input_name}" value="{option_id}">
                        {price_inc_mod}
                      {/modifier_options}
                    {/if}
                  {/modifiers}
                {/if}
                {if price_val > 0}
                  {w:wine_details:price}
                {/if}
              </span> 
            </a>
        </h5>

        <input type="hidden" name="item_qty" value="1">
        <input type="submit" name="submit" value="Add to Cart" class="button tiny">
      </div>
    {/exp:store:product}
  {/exp:playa:children} 
{/if}

Also on a side note you would usually use the price_val in your conditionals so you don't have to worry about currency formatting and using "" or {} around your conditional content (I adjusted your price conditionals in my code above).

From the Store docs:

All price variables are pre-formatted according to your currency formatting settings. If you want the unformatted amount, simply append _val to the variable