Add on Product in Cart for Shopify Themes

Add on Product in Cart for Shopify Themes

{% if linklists.add-on-product.links.size > 0 and linklists.add-on-product.links.first.type == 'product_link' %}

  <div id="add-on-product" style="clear: left; margin: 30px 0" class="clearfix rte">
    <p>
      <input type="hidden" name="attributes[add-on-product]" value="" />
      <input id="add-on-product" type="checkbox" name="attributes[add-on-product]" value="yes" {% if cart.attributes.add-on-product %} checked="checked"{% endif %} style="float: none" />
      <label for="add-on-product" style="display:inline; padding-left: 5px; float: none;">
      For {{ linklists.add-on-product.links.first.object.price | money }} 
      please add {% for link in linklists.add-on-product.links %}
      <a href="{{ link.url }}">{{ link.title }}</a>
	{% endfor %}
        to the order.
      </label>
    </p>
  </div>

{% assign id = linklists.add-on-product.links.first.object.variants.first.id %}

{% assign add_on_in_cart = 0 %}
{% for item in cart.items %}
  {% if item.id == id %}
    {% assign add_on_in_cart = item.quantity %}
  {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

Shopify.Cart = Shopify.Cart || {};

Shopify.Cart.AddOnProduct = {};

Shopify.Cart.AddOnProduct.set = function() {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 
    data: { updates: { {{ id }}: 1 }, attributes: { 'add-on-product': true } }, 
    dataType: 'json',
    success: function() { location.href = '/cart'; }
  });
}

Shopify.Cart.AddOnProduct.remove = function() {
  jQuery.ajax({
    type: 'POST',
    url: '/cart/update.js', 
    data: { updates: { {{ id }}: 0 }, attributes: { 'add-on-product': '' } }, 
    dataType: 'json',
    success: function() { location.href = '/cart'; }
  });
}


{% if cart.items.size == 1 and add_on_in_cart > 0 %}

// If we have more than one add-on-product item in the cart.
{% elsif add_on_in_cart > 1 %}
jQuery(function() {
  Shopify.Cart.AddOnProduct.set();
});
// If we have a add-on-product item in the cart but our add-on-product cart attribute has not been set.
{% elsif add_on_in_cart > 0 and cart.attributes.add-on-product == blank  %}
jQuery(function() {
  Shopify.Cart.AddOnProduct.set();
});
// If we have no add-on-product item in the cart but our add-on-product cart attribute has been set.
{% elsif add_on_in_cart == 0 and cart.attributes.add-on-product != blank  %}
jQuery(function() {
  Shopify.Cart.AddOnProduct.set();
});
{% endif %}

// When the add-on-product checkbox is checked or unchecked.
jQuery(function() {
  jQuery('[name="attributes\[add-on-product\]"]').change(function() {
    if (jQuery(this).is(':checked')) {
      Shopify.Cart.AddOnProduct.set();    
    }
    else {
      Shopify.Cart.AddOnProduct.remove();
    }
  });
});
 
</script>
{% endif %}