Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-15T03:22:46.923Z
Answers.Text: 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.
Answers.UserDisplayName: Matt Everson
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-14T16:28:49.830Z
Answers.LastActivityDate: 2017-04-14T19:39:35.170Z
Answers.LastEditDate: 2017-04-14T19:39:35.170Z
Answers.UserDisplayName: Damon
Body: <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>
  
Tags: <plugin-craftcommerce>
Title: Add product to cart using checkbox and AJAX
ThreadText: # 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](https://github.com/engram-design/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...
  
  ```
  <form method="post" action="" accept-charset="utf-8">
      <input type="hidden" name="action" value="multiAdd/multiAdd">
      <input type="hidden" name="redirect" value="shop/cart">
      {{ getCsrfInput() }}
  
  ...
  
  {# This is the primary/parent product. #}
  <select id="myVariant" name="items[1][purchasableId]" class="form-control required" required>
      <option value="">Select Option</option>
     {% for purchasable in product.variants %}
         <option {% if purchasable.stock <= 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 %}">
                {{ purchasable.myVariant.label }} &ndash; {% if purchasable.price == 0 %}Free{% else %}{{ purchasable.price|currency(cart.currency) }}{% endif %}                                                                       
          </option>
      {% endfor %}                                                                
  </select>
  <input type="hidden" name="items[1][qty]" value="1">
  
  ...
  
  {# This is the additional product. #}
  {% if product.myOption|length %}
  <fieldset>
      {% set options = product.myFirstOption %}
      {% if options|length %}
          <legend>Some Optional Thing</legend>
          <div class="form-group form-group--select">
              <label for="option" class="select-label">Option</label>
              <select id="option" name="items[2][purchasableId]" class="form-control required">
                  <option value="">Select Option</option>
                      {% for option in options %}
                          <option value="{{ option.defaultVariant.purchasableId }}" data-price="{{ option.defaultVariant.price|currency(cart.currency) }}">
                              {{ option.title }} &ndash; {% if option.defaultVariant.price == 0 %} Included with registration {% else %} {{ option.defaultVariant.price|currency(cart.currency) }}{% endif %}
                          </option>
                     {% endfor %}
              </select>
              <input type="hidden" id="optionQty" name="items[2][qty]" value="0">
          </div>
      {% endif %}
  </fieldset>
  {% endif %}
  
  ```
  
  What is important to note is this:
  
  ```
  <input type="hidden" name="items[1][qty]" value="1">
  ...
  <input type="hidden" name="items[2][qty]" value="0">
  
  ```
  
  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.  
  
  ---
  
  