Adding multiple products to the cart with a single button

Use the following code to implement a button for adding multiple products on a single page. In this example we are adding the first 4 products to the cart at the same time. Note the use of the plural parameters:

  • productIds
  • quantities
  • options
  • extras

Read more at the Product Page documentation.

{% set count = 0 %}
{{ open_form() }}
<p>Batch Add Form</p>
{% for product in products %}
    {% set count = count + 1 %}
    {% if count < 5 %}
        <h3><a href="{{ page_url }}">{{ product.name }}</a></h3>
        <a href="{{ page_url }}"><img src="{{ product.images.first.thumbnail(50, 50)|default('http://placehold.it/50x50') }}" width="50" height="50" alt="{{ product.images.first.description }}" title="{{ product.images.first.title }}"/></a>
        <input name="productIds[{{ product.sku }}]" value="{{ product.id }}" type="hidden" />
        <label for="quantities[{{ product.sku }}]" >Quantity</label>
        <input name="quantities[{{ product.sku }}]" value="1" type="text" />

        {% if product.options.count %}
          <div class="clearfix">
            {% for index, option in product.options %}
              <div class="option">
                <label class="title" for="{{ 'option-'~index }}">{{ option.name }}</label>
                <select id="{{ 'option-'~index }}" name="options[{{ product.sku }}][{{ option.id }}]" class="product-option">
                  {% for key, value in option.values %}
                    <option value='{{ key }}' {{ option_state(postedOptions[option.id], key) }}>{{ value }}</option>
                  {% endfor %}
                </select>
              </div>
            {% endfor %}
          </div>
        {% endif %}

        {% if product.extras.count %}
        <h5>Product Extras</h5>
          <div class="clearfix">
            {% for index, extra in product.extras %}
                <div class="extra">
                    <label class="title" for="{{ 'extra-'~index }}">{{ extra.name }} ({{ extra.price|currency }})</label>
                    {% if extra.enabled %}
                        <input type="checkbox" id="{{ 'extra-'~index }}" {{ checkbox_state(postedExtras[extra.id], extra.id) }} name="extras[{{ product.sku }}][{{ extra.id }}]">
                    {% else %}
                        <input type="checkbox" disabled="disabled">
                    {% endif %}
                </div>
            {% endfor %}
          </div>
        {% endif %}
    {% endif %}
{% endfor %}
<a href="#" data-ajax-handler="shop:onAddToCart">Add to Cart</a>
{{ close_form() }}