<p>You are going down the right path with <a href="https://github.com/engram-design/MultiAdd" rel="nofollow noreferrer">MultiAdd</a>.</p>

<p>I have an application that on a single product page, I am also selling additional products that are an add-on of the parent. They are separate products, but they exist together. As in, the parent product is the only place the additional products are sold. </p>

<p>When the administrator is creating the parent product, I give them the option (mainly checkboxes) "Include option B". When checked, the additional product will show.</p>

<p>This is kind-of how it works...</p>

<pre><code>&lt;form method="post" action="" accept-charset="utf-8"&gt;
    &lt;input type="hidden" name="action" value="multiAdd/multiAdd"&gt;
    &lt;input type="hidden" name="redirect" value="shop/cart"&gt;
    {{ getCsrfInput() }}


...

{# This is the primary/parent product. #}
&lt;select id="myVariant" name="items[1][purchasableId]" class="form-control required" required&gt;
    &lt;option value=""&gt;Select Option&lt;/option&gt;
   {% for purchasable in product.variants %}
       &lt;option {% if purchasable.stock &lt;= 0 and purchasable.unlimitedStock == false %}disabled {% endif %}
           value="{{ purchasable.purchasableId }}"
           data-position="{{ purchasable.myVariant }}"
           data-price="{% if purchasable.price == 0 %}Free{% else %}
          {{ purchasable.price|currency(cart.currency) }}{% endif %}"&gt;
              {{ purchasable.myVariant.label }} &amp;ndash; {% if purchasable.price == 0 %}Free{% else %}{{ purchasable.price|currency(cart.currency) }}{% endif %}                                                                       
        &lt;/option&gt;
    {% endfor %}                                                                
&lt;/select&gt;
&lt;input type="hidden" name="items[1][qty]" value="1"&gt;

...

{# This is the additional product. #}
{% if product.myOption|length %}
&lt;fieldset&gt;
    {% set options = product.myFirstOption %}
    {% if options|length %}
        &lt;legend&gt;Some Optional Thing&lt;/legend&gt;
        &lt;div class="form-group form-group--select"&gt;
            &lt;label for="option" class="select-label"&gt;Option&lt;/label&gt;
            &lt;select id="option" name="items[2][purchasableId]" class="form-control required"&gt;
                &lt;option value=""&gt;Select Option&lt;/option&gt;
                    {% for option in options %}
                        &lt;option value="{{ option.defaultVariant.purchasableId }}" data-price="{{ option.defaultVariant.price|currency(cart.currency) }}"&gt;
                            {{ option.title }} &amp;ndash; {% if option.defaultVariant.price == 0 %} Included with registration {% else %} {{ option.defaultVariant.price|currency(cart.currency) }}{% endif %}
                        &lt;/option&gt;
                   {% endfor %}
            &lt;/select&gt;
            &lt;input type="hidden" id="optionQty" name="items[2][qty]" value="0"&gt;
        &lt;/div&gt;
    {% endif %}
&lt;/fieldset&gt;
{% endif %}
</code></pre>

<p>What is important to note is this:</p>

<pre><code>&lt;input type="hidden" name="items[1][qty]" value="1"&gt;
...
&lt;input type="hidden" name="items[2][qty]" value="0"&gt;
</code></pre>

<p>That's how MultiAdd knows what to add to the cart.</p>

<p>Once I choose my options and click "buy" any option(s) are added to my cart until I go into my cart and remove them.</p>

<p>There is an example for ajax in on the MultiAdd page. Instead of a traditional post, you are sending the same information to a url via ajax.</p>

<p>Hope this helps!</p>

CC BY-SA 3.0
2017-05-15T03:22:46.923Z
The problem I'm having with using MultiAdd in this instance is that my options list is persistent through the process, so I need to be able to both add and remove products using the same checklist. The MultiAdd form only allows you to do one or the other with its two available form actions – add multiple products (via form action "multiAdd") or edit the existing products in your cart (via form action "updateCart").

So it works the first time if I select 3 of the 5 options and submit. And I can get the list to show that 3 of the 5 options are then in the cart. But from there, I can't edit.
Matt Everson
CC BY-SA 3.0
2017-04-14T16:28:49.830Z
2017-04-14T19:39:35.170Z
2017-04-14T19:39:35.170Z
Damon
<p>As part of my checkout process, I have a list of five optional, add-on services shown as checkbox inputs. The list resides on a standalone page and each service can either be included in the purchase or not (i.e. quantity 1 or 0).</p>

<p>I've considered using the Multi-Add plugin, but I would like any checked services to remain in the cart if the user goes "Back" instead of submitting.</p>

<p>How do I add these services to the cart with AJAX when clicked, and remove when unclicked? I'm very new to Commerce so any and all references, suggestions, and hand-holding here is appreciated.</p>

<plugin-craftcommerce>
Add product to cart using checkbox and AJAX
# Add product to cart using checkbox and AJAX

(Asked by: username_0 on 2017-04-14)

As part of my checkout process, I have a list of five optional, add-on services shown as checkbox inputs. The list resides on a standalone page and each service can either be included in the purchase or not (i.e. quantity 1 or 0).

I've considered using the Multi-Add plugin, but I would like any checked services to remain in the cart if the user goes "Back" instead of submitting.

How do I add these services to the cart with AJAX when clicked, and remove when unclicked? I'm very new to Commerce so any and all references, suggestions, and hand-holding here is appreciated.

**Tags:** plugin-craftcommerce

---

## 1 answers

### Answer by username_1 on 2017-04-14. Score: 1

You are going down the right path with MultiAdd.
I have an application that on a single product page, I am also selling additional products that are an add-on of the parent. They are separate products, but they exist together. As in, the parent product is the only place the additional products are sold. 
When the administrator is creating the parent product, I give them the option (mainly checkboxes) "Include option B". When checked, the additional product will show.
This is kind-of how it works...

    
    
    {{ getCsrfInput() }}


...

{# This is the primary/parent product. #}

    Select Option
   {% for purchasable in product.variants %}
       
              {{ purchasable.myVariant.label }} – {% if purchasable.price == 0 %}Free{% else %}{{ purchasable.price|currency(cart.currency) }}{% endif %}                                                                       
        
    {% endfor %}                                                                



...

{# This is the additional product. #}
{% if product.myOption|length %}

    {% set options = product.myFirstOption %}
    {% if options|length %}
        Some Optional Thing
        
            Option
            
                Select Option
                    {% for option in options %}
                        
                            {{ option.title }} – {% if option.defaultVariant.price == 0 %} Included with registration {% else %} {{ option.defaultVariant.price|currency(cart.currency) }}{% endif %}
                        
                   {% endfor %}
            
            
        
    {% endif %}

{% endif %}

What is important to note is this:

...


That's how MultiAdd knows what to add to the cart.
Once I choose my options and click "buy" any option(s) are added to my cart until I go into my cart and remove them.
There is an example for ajax in on the MultiAdd page. Instead of a traditional post, you are sending the same information to a url via ajax.
Hope this helps!

> **Comments:**
> **username_0**: The problem I'm having with using MultiAdd in this instance is that my options list is persistent through the process, so I need to be able to both add and remove products using the same checklist. The MultiAdd form only allows you to do one or the other with its two available form actions – add multiple products (via form action "multiAdd") or edit the existing products in your cart (via form action "updateCart").  So it works the first time if I select 3 of the 5 options and submit. And I can get the list to show that 3 of the 5 options are then in the cart. But from there, I can't edit.  

---

