Add a companion product to cart page

companion-product

{% comment %}
  To add a companion product to the cart automatically if a primary product is in cart:
  1. Create a new link list under your Navigation tab.
  2. In that link list, make the first link point to companion product.
  3. Copy your link list handle where indicated at line 8:
{% endcomment %}

{% assign linklist = linklists['put-your-link-list-handle-here'] %}

{% comment %}
  You're done. Include this code in cart.liquid at the top or bottom.
{% endcomment %}

{% if linklist.links.size > 0 %}

  <script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>')</script>
  
  <script>
  if (typeof Shopify === 'undefined') var Shopify = {};
  Shopify.cart = {{ cart | json }};
  Shopify.toAdd = {{ linklist.links.first.object.variants.first.id }};
  var pleaseAdd = false;
  Shopify.idsInCart = [];
  for (var i=0; i<Shopify.cart.items.length; i++) {
    Shopify.idsInCart.push(Shopify.cart.items[i].id);
    if (Shopify.cart.items[i].id !== Shopify.toAdd) {
      pleaseAdd = true;
    }
  }
  if (pleaseAdd && (jQuery.inArray(Shopify.toAdd, Shopify.idsInCart) === -1)) {
    var params = {
      type: 'POST',
      url: '/cart/add.js',
      data: 'quantity=1&id=' + Shopify.toAdd,
      dataType: 'json',
      success: function(line_item) { 
        window.location.href = '/cart';
      }
    };
    jQuery.ajax(params);
  }
  </script>
  
{% endif %}

Could this be used to add more than one companion product at a time?

I'd also like to customize it so Product A automatically adds Product Ax to cart and Product B automatically adds Product Bx to the cart, instead of only one free item per cart.

Is it possible to add a companion on specific product category ?

I have the same question at JessycaFrederick above. I'd like to add a unique product for each product added to the cart. Is there a solution?

For anyone interested I customized this script to be used for adding a product only when a cart total is reached. For example, add a product from the linklist only when the order total is 100. If the order total becomes less than 100, remove the product:
https://gist.github.com/cpres/0449e279a9f0edbd4d6c

To everyone who asked above: yes, those are all possible.

@cam - you can turn the Shopify.toAdd variable into an array of variant ids, then loop thru that array to add to cart one product at a time. Caveat: cart ajax POST requests must be synchronous.

UNTESTED snippet for creating the array:

Shopify.toAdd = [ {{ linklist.links | map: 'object.variants.first.id' | join: ',' }} ];

How would I use the companion-product to apply a percent fee to all my products?

No - because product price isn't malleable via front end - variant price is set in the admin.

Anyway to adjust the code above to add a "processing and handling" fee of $19.95 to the cart when they add a product?
And maybe also have a small image thumb to represent what the fee covers there as well?

Thanks for any help!

This is awesome - so close to what I need, but as far as I can tell, this only works if you know which product is going to have companion products - currently, this must be hard-coded into the script. It would be advantageous to have the script check which product has been added and then match it up to a linklist.

So, how can this be modified to have the linklist variable populated from what is being added to the cart?

The shop I am building now has almost 700 products, half of these products have a companion product, so when product A1 is added, it needs to add Product A2. So too with product Z1, I need it to add Z2, and so on.

I also need this to work in reverse - add X2 to the cart, and X1 is added as well.

We will create the ~350 linklists to match the product pairings, but I'm at a loss as to how the modify the script to have it match the products to their companion linklists.

Any assistance would be greatly appreciated.

This is great and so close to what I am needing. Is there anyway you can only allow a quantity of 1 to be included. I have this working, so if someone spends 100.0 or more it automatically goes into their cart. However, they can add as many as they want in the quantity section so we are needing to remove that. Any help would be appreciated.

this wasn't working for me on Safari for iPhone. Works now that I made this link:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

https instead of http

Nice solution. But what if you add multiple quantities of the parent product? Your solution is only adding 1 instance of the companion product no matter how many quantities of parent product are in cart.

Thank you for this!! Trying to find a different solution to add a gift to the shopping cart when they buy a specific product (without having to pay $25 a month for the app) and so glad I found this! So far, it's the closest I've been able to get.

I was able to implement it, and even edit it with @cpres addition to at least control the minimum price, but running into a big problem. Any idea how to remove the option for someone to add to the quantity of the gift?