03. Example Templates

Add to cart

The following are the extra fields that are required in the add to cart form, as detailed here: https://craftcommerce.com/docs/add-to-cart#line-item-options-and-notes

In the below example code the handle bundleId is used, this can be changed in the settings as detailed above.

The example shows entry.id being used for the bundleId. This ID essentially the element you would like as the bundle container, this can be any element e.g. entry, category, product etc. The bundleName will the the description of the line item.

  <input type="hidden" name="options[bundleId]" value="{{ entry.id|cartBundleIdEncrypt }}">
  <input type="hidden" name="options[bundleName]" value="{{ entry.title }}">

---

Add to cart with MultiAdd

In this add to cart example there is code that demonstrates how to use the CartBundle plugin with the MultiAdd plugin.

In the example the assumption has been made that there is a product variable that is an instance of a productModel that has multiple variants.

<form method="POST">
  <input type="hidden" name="action" value="multiAdd/multiAdd">
  <input type="hidden" name="redirect" value="/cart">
  {{ getCsrfInput() }}

  {% for variant in product.variants %}
    <input type="hidden" name="items[{{ loop.index }}][purchasableId]" value="{{ variant.id }}">
    <input type="hidden" name="items[{{ loop.index }}][qty]" value="1">
    <input type="hidden" name="items[{{ loop.index }}][options][bundleId]" value="{{ product.id|cartBundleIdEncrypt }}">
    <input type="hidden" name="items[{{ loop.index }}][options][bundleName]" value="{{ product.title }}">
  {% endfor %}

</form>

---

Cart Display

The cart is bundled up using the |cartBundle filter. This is solely a front end process for display purposes, it does not change what is purchased through Craft Commerce.

The filter will group all items together that have the same options and container element (bundle). It will not effect items that are added without the bundleId and bundleName options.

Example below will quickly dump out the data for you to see what is available

{# Setup the cart variable #}
{% set cart = craft.commerce.cart %}

{# Bundle up the items for use in display #}
{% set cartItems = cart.lineItems|cartBundle %}

{% if cartItems|length %}
  <ul>
    {% for item in cartItems %}
      <li>
        Item: {{ item.description }}<br />
        {# See if we are dealing with a bundled item or a regular item #}
        {% if item.options.bundle is defined %}
          {# Dump data of the bundle (the container element) #}
          <pre>
            {{ dump( item.options.bundle ) }}
          </pre>

          {# Loop through all the items that are bundled together #}
          {% if item.options.bundleItems is defined and item.options.bundleItems|length %}
            <ul>
              {% for bundleItem in item.options.bundleItems %}
                <li>
                  {# Dump out bundle data #}
                  Item: {{ bundleItem.purchasable.product.title }}
                  <pre>
                    {{ dump( bundleItem ) }}
                  </pre>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        {% endif %}

        {# Dump out price #}
        Price: {{ item.price|currency( cart.currency ) }}
      </li>
    {% endfor %}
  </ul>
{% endif %}

Updating Quantities

The Cart Bundle plugin has a specific action of updating line items if you need to update the quantity of the bundle. It mimics the updateLineItem from within commerce plugin.

Below is an example form to add in the item row from within your cart.

{% set cartLineItems = cart.lineItems|cartBundle %}
{% for item in cartLineItems %}

  ...

  <form method="POST">
    <input type="hidden" name="action" value="cartBundle/cart/updateLineItem">
    <input type="hidden" name="redirect" value="commerce/cart">
    <input type="hidden" name="lineItemId" value="{{ item.options.bundleLineItemId }}">
    {{ getCsrfInput() }}
    
    <input type="number" name="qty" value="{{ item.qty }}">
    <input type="submit" value="{{ 'Update Qty'|t }}"/>

  </form>
  
  ...
  
{% endfor %}

Removing Bundles from the Cart

This template is made with the assumption that you are looping through your items in the cart. It uses the multiAdd/updateCart action to nullify the quantities of the bundle items. On the roadmap there is the plan to just put in one function, but for now this should give you what is needed.

{% set cartLineItems = cart.lineItems|cartBundle %}
{% for item in cartLineItems %}

  ...

  <form method="POST">
      <input type="hidden" name="action" value="multiAdd/updateCart">
      <input type="hidden" name="redirect" value="your-cart-url">
      {{ getCsrfInput() }}

      {% if item.options|length and item.options.bundleItems is defined and item.options.bundleItems|length %}
        {% for bundleItem in item.options.bundleItems %}
          <input type="hidden" size="4" name="items[{{ bundleItem.id }}][qty]" value="0">
        {% endfor %}
      {% else %}
        <input type="hidden" size="4" name="items[{{ item.id }}][qty]" value="0">
      {% endif %}

      <button type="submit" name="button">Remove</button>
  </form>

  ...
  
{% endfor %}