Adding items to cart from related entry not working

Question

Folks:

I have a list of accessories related to a main product. After adding the main product to the cart, the user can then add accessories related to that product.

The code seems to check out. The price and purchasableId for the related product are coming through just fine. However, when you click the "Add to Cart" button for the related product, the page refreshes but nothing is added to the cart. Relevant code:

{% set cart = craft.commerce.cart %}
{% for relatedProduct in product.relatedAccessories %}
<img src="{{ relatedProduct.accessoryImage.first().url(accessoryThumb) }}" width="{{ asset.getWidth(accessoryThumb) }}" height="{{ asset.getHeight(accessoryThumb) }}" class="img-responsive" /> 
   <p>{{ relatedProduct.title }} - {{ relatedProduct.accessoryDescription }} - {% for variant in relatedProduct.variants %}{{ variant.salePrice|currency('CAD', true) }} - {{ variant.purchasableId }}{% endfor %}</p> 
 <form method="POST">
    <input type="hidden" name="action" value="commerce/cart/updateCart">
    <input type="hidden" name="redirect" value="commerce/cart">
    <input type="hidden" name="qty" value="1">
    {% for variant in relatedProduct.variants %}<input type="hidden" name="purchasableId" value="{{ variant.purchasableId }}">{% endfor %}
    <input class="btn  btn-d  btn-lg" type="submit" value="Add to cart">
</form>
{% endfor %}
{% endfor %}

The source code for the rendered page looks like this:

<img src="http://example.com/images_product/_125x100_crop_top-center_75/photo.jpg" width="125" height="100" class="img-responsive" /> 
   <p>Accessory description - $50</p> 
<form method="POST">
    <input type="hidden" name="action" value="commerce/cart/updateCart">
    <input type="hidden" name="redirect" value="commerce/cart">
    <input type="hidden" name="qty" value="1">
    <input type="hidden" name="purchasableId" value="65">
    <input class="btn  btn-d  btn-lg" type="submit" value="Add to cart">
</form>

As far as I can see, this should be working. But again, nothing is added to the cart.

Does anyone have any ideas?

Answer 1

Just quickly as I'm on my phone...The two main ways to debug this sort of thing in Commerce are:

1. Check what you are actually POSTing matches what you think you are posting (to check this I just use the browser dev tools)

2. Check the flash data (notice and error) for messages when the page reloads (or check the JSON response if ajaxing).

Usually you'll get a sensible message back, e.g. out of stock or similar.

I use this code to dump the flash data (I think only error and notice are used these days, the commerce flash dates back from before commerce was released but it can't hurt!):

{% if craft.config.devMode and (craft.session.hasFlash('commerce') or craft.session.hasFlash('notice') or craft.session.hasFlash('error')) %}

        {% set isErrors = true %}
        {% set commerceFlash = craft.session.getFlash('commerce')|join('|') %}
        {% set noticeFlash = craft.session.getFlash('notice')|join('|') %}
        {% set errorFlash = craft.session.getFlash('error')|join('|') %}

        Commerce: [{{  commerceFlash }}]
        Notice: [{{  noticeFlash }}]
        Error: [{{  errorFlash }}]

    {% endif %}