Answers.Body: <p>From the multiAdd perspective, it only cares that each item you're adding to the cart has some qty - if <code>0</code> it will ignore it, if anything positive, it will add that many to the cart, i.e. you only need to see things up such that for each product the minimum info required (for each product that's part of this multiadd process) is:</p>
  
  <p><code>items[someKey][qty]</code></p>
  
  <p><code>items[someKey][purchasableId]</code></p>
  
  <p>....where of course <code>someKey</code> is the same value for both those inputs.</p>
  
  <p>In terms of how you achieve what you want, that's more of an html form/JS question.  The most obvious approach would be to use some simple JS to listen on the submit event.  If at <code>submit</code> the checkbox is unchecked, you just poke a 0 into the <code>val</code> for that input.  If it is checked, you take the main product's <code>qty</code> valuie and poke that into the input.</p>
  
  <p>To debug this, make sure you check your POST values after the JS is run to check you're submitting what you think you are...in the end what needs to be submitted is super simple as per the above - the only tricky part is the JS to hook it up really.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-20T23:09:01.960Z
Answers.LastActivityDate: 2017-02-20T23:09:01.960Z
Answers.UserDisplayName: Jeremy Daalder
Answers.Body: <p>I can solve one of the issues by assigning the quantity to the checkbox instead of the purchasableId (checked = 1, unchecked = 0). The purchasableId can be assigned to hidden input. That fixes one bug.</p>
  
  <pre><code>&lt;form method="POST" id="addToCart"&gt;
  &lt;input type="hidden" name="action" value="multiAdd/multiAdd"&gt;
  &lt;input type="hidden" name="redirect" value="shop/cart"&gt;
  {{ getCsrfInput() }}
  
  {# Code For Related Product #}
  {% if relatedProduct | length %}
      &lt;div class="related-product"&gt;
          {% for product in relatedProduct %}
              {% set variant = product.defaultVariant %}
              &lt;input type="hidden" name="items[addon][purchasableId]" value="{{ variant.id }}"&gt;
              &lt;label&gt;
                  &lt;input type="checkbox" name="items[addon][qty]" value="1" checked="checked" class="addon-checkbox"&gt;
                  {{ variant.title }}
                  &lt;span class="price-color"&gt;+{{ variant.salePrice | commerceCurrency(cart.currency) }}&lt;/span&gt;
                  {% if variant.onSale %} &lt;strike&gt;{{ variant.price | commerceCurrency(cart.currency) }}&lt;/strike&gt;{% endif %}
              &lt;/label&gt;
              &lt;input type="hidden" name="items[addon][qty]" value="1"&gt;
          {% endfor %}
      &lt;/div&gt;
  {% endif %}
  
  {# Code For Product #}
  &lt;input type="hidden" name="items[product][purchasableId]" value="{{ purchasable.id }}"&gt;
  &lt;select id="quantity-standard" name="items[product][qty]" class="quantity"&gt;
      {% for i in 1..50 %}
          &lt;option value="{{ i }}"{% if loop.first %} selected{% endif %}&gt;{{ i }}&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  &lt;input type="submit" class="buy-now" value="{{ "Add to cart"|t }}"&gt;
  </code></pre>
  
  <p>And as Jeremy identified, Javascript is the way forward to assign a quantity that matches another field. I did that with jQuery:</p>
  
  <pre><code>$('input.buy-now').click(function() {
      if ($('.addon-checkbox').is(':checked')) {
          var qty = $('.quantity').val();
          $('.addon-checkbox').val(qty);
      } else {
          $('.addon-checkbox').val(0);
      }
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-21T15:19:50.850Z
Answers.LastActivityDate: 2017-02-21T17:56:30.570Z
Answers.LastEditDate: 2017-02-21T17:56:30.570Z
Answers.UserDisplayName: Will Law
Body: <p>Using the <a href="https://github.com/engram-design/MultiAdd" rel="nofollow noreferrer">MultiAdd</a> plugin, I'm trying to add a related product using a simple checkbox. It's an add on to the existing product.</p>
  
  <p>Here's a screenshot of what it looks like on the page…
  <a href="https://i.sstatic.net/MM4s8.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MM4s8.png" alt="variant of product + related product"></a></p>
  
  <p>I want the related product to:</p>
  
  <ol>
  <li>be added when the checkbox is ticked and vice versa when not ticked</li>
  <li>have the same quantity as the parent product</li>
  </ol>
  
  <p>Here's is the relevant code inside my variant loop:</p>
  
  <pre><code>&lt;form method="POST" id="addToCart"&gt;
  &lt;input type="hidden" name="action" value="multiAdd/multiAdd"&gt;
  &lt;input type="hidden" name="redirect" value="shop/cart"&gt;
  {{ getCsrfInput() }}
  
  {# Code For Related Product #}
  {% if relatedProduct | length %}
      &lt;div class="related-product"&gt;
          {% for product in relatedProduct %}
              {% set variant = product.defaultVariant %}
              &lt;label&gt;
                  &lt;input type="checkbox" name="items[addon][purchasableId]" value="{{ variant.id }}" checked="checked"&gt;
                  {{ variant.title }}
                  &lt;span class="price-color"&gt;+{{ variant.salePrice | commerceCurrency(cart.currency) }}&lt;/span&gt;
                  {% if variant.onSale %} &lt;strike&gt;{{ variant.price | commerceCurrency(cart.currency) }}&lt;/strike&gt;{% endif %}
              &lt;/label&gt;
              &lt;input type="hidden" name="items[addon][qty]" value="1"&gt;
          {% endfor %}
      &lt;/div&gt;
  {% endif %}
  
  {# Code For Product #}
  &lt;input type="hidden" name="items[product][purchasableId]" value="{{ purchasable.id }}"&gt;
  &lt;select id="quantity-standard" name="items[product][qty]" class="quantity"&gt;
      {% for i in 1..50 %}
          &lt;option value="{{ i }}"{% if loop.first %} selected{% endif %}&gt;{{ i }}&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  &lt;input type="submit" class="buy-now" value="{{ "Add to cart"|t }}"&gt;
  </code></pre>
  
  <p></p>
  
  <p>The challenges I'm facing are…</p>
  
  <ul>
  <li>I don't know how to set the related product's quantity to zero when the checkbox isn't checked</li>
  <li>I don't know how to set the related product's quantity to match the parent product when the related product is checked</li>
  </ul>
  
  <p>Any help would be appreciated!</p>
  
Tags: <plugin-craftcommerce>
Title: MultiAdd - Add a related product by checkbox
ThreadText: # MultiAdd - Add a related product by checkbox
  
  (Asked by: username_0 on 2017-02-20)
  
  Using the [MultiAdd](https://github.com/engram-design/MultiAdd) plugin, I'm trying to add a related product using a simple checkbox. It's an add on to the existing product.
  
  Here's a screenshot of what it looks like on the page…
  [![variant of product + related product](https://i.sstatic.net/MM4s8.png)](https://i.sstatic.net/MM4s8.png)
  
  I want the related product to:
  
  1. be added when the checkbox is ticked and vice versa when not ticked
  2. have the same quantity as the parent product
  
  Here's is the relevant code inside my variant loop:
  
  ```
  <form method="POST" id="addToCart">
  <input type="hidden" name="action" value="multiAdd/multiAdd">
  <input type="hidden" name="redirect" value="shop/cart">
  {{ getCsrfInput() }}
  
  {# Code For Related Product #}
  {% if relatedProduct | length %}
      <div class="related-product">
          {% for product in relatedProduct %}
              {% set variant = product.defaultVariant %}
              <label>
                  <input type="checkbox" name="items[addon][purchasableId]" value="{{ variant.id }}" checked="checked">
                  {{ variant.title }}
                  <span class="price-color">+{{ variant.salePrice | commerceCurrency(cart.currency) }}</span>
                  {% if variant.onSale %} <strike>{{ variant.price | commerceCurrency(cart.currency) }}</strike>{% endif %}
              </label>
              <input type="hidden" name="items[addon][qty]" value="1">
          {% endfor %}
      </div>
  {% endif %}
  
  {# Code For Product #}
  <input type="hidden" name="items[product][purchasableId]" value="{{ purchasable.id }}">
  <select id="quantity-standard" name="items[product][qty]" class="quantity">
      {% for i in 1..50 %}
          <option value="{{ i }}"{% if loop.first %} selected{% endif %}>{{ i }}</option>
      {% endfor %}
  </select>
  <input type="submit" class="buy-now" value="{{ "Add to cart"|t }}">
  
  ```
  
  The challenges I'm facing are…
  
  * I don't know how to set the related product's quantity to zero when the checkbox isn't checked
  * I don't know how to set the related product's quantity to match the parent product when the related product is checked
  
  Any help would be appreciated!
  
  **Tags:** plugin-craftcommerce
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2017-02-20. Score: 1 | Accepted answer
  
  From the multiAdd perspective, it only cares that each item you're adding to the cart has some qty - if `0` it username_0 ignore it, if anything positive, it username_0 add that many to the cart, i.e. you only need to see things up such that for each product the minimum info required (for each product that's part of this multiadd process) is:
  
  `items[someKey][qty]`
  
  `items[someKey][purchasableId]`
  
  ....where of course `someKey` is the same value for both those inputs.
  
  In terms of how you achieve what you want, that's more of an html form/JS question. The most obvious approach would be to use some simple JS to listen on the submit event. If at `submit` the checkbox is unchecked, you just poke a 0 into the `val` for that input. If it is checked, you take the main product's `qty` valuie and poke that into the input.
  
  To debug this, make sure you check your POST values after the JS is run to check you're submitting what you think you are...in the end what needs to be submitted is super simple as per the above - the only tricky part is the JS to hook it up really.
  
  
  ---
  
  ### Answer by username_0 on 2017-02-21. Score: 1
  
  I can solve one of the issues by assigning the quantity to the checkbox instead of the purchasableId (checked = 1, unchecked = 0). The purchasableId can be assigned to hidden input. That fixes one bug.
  
  ```
  <form method="POST" id="addToCart">
  <input type="hidden" name="action" value="multiAdd/multiAdd">
  <input type="hidden" name="redirect" value="shop/cart">
  {{ getCsrfInput() }}
  
  {# Code For Related Product #}
  {% if relatedProduct | length %}
      <div class="related-product">
          {% for product in relatedProduct %}
              {% set variant = product.defaultVariant %}
              <input type="hidden" name="items[addon][purchasableId]" value="{{ variant.id }}">
              <label>
                  <input type="checkbox" name="items[addon][qty]" value="1" checked="checked" class="addon-checkbox">
                  {{ variant.title }}
                  <span class="price-color">+{{ variant.salePrice | commerceCurrency(cart.currency) }}</span>
                  {% if variant.onSale %} <strike>{{ variant.price | commerceCurrency(cart.currency) }}</strike>{% endif %}
              </label>
              <input type="hidden" name="items[addon][qty]" value="1">
          {% endfor %}
      </div>
  {% endif %}
  
  {# Code For Product #}
  <input type="hidden" name="items[product][purchasableId]" value="{{ purchasable.id }}">
  <select id="quantity-standard" name="items[product][qty]" class="quantity">
      {% for i in 1..50 %}
          <option value="{{ i }}"{% if loop.first %} selected{% endif %}>{{ i }}</option>
      {% endfor %}
  </select>
  <input type="submit" class="buy-now" value="{{ "Add to cart"|t }}">
  
  ```
  
  And as username_1 identified, Javascript is the way forward to assign a quantity that matches another field. I did that with jQuery:
  
  ```
  $('input.buy-now').click(function() {
      if ($('.addon-checkbox').is(':checked')) {
          var qty = $('.quantity').val();
          $('.addon-checkbox').val(qty);
      } else {
          $('.addon-checkbox').val(0);
      }
  });
  
  ```
  
  
  ---
  
  