Add Companion / Multiple products to basket when specific product added to basket

MOCPH
New Member
1 0 2

Hi All,

I was searching high and low for a solution to this, and thought I would share the solution i found.

My problem being that I have certain product that is basically a bundle of multiple products. I knew that bundle apps exist. But they only control the stock levels within Shopify. I needed each bundled product to appear as a product line so that each individual SKU would be passed down the line to our warehouse for packing and fulfilling the order correctly. 

I managed to find a thread from Caroline Schnapp - which was absolutely fantastic and I can not thank her enough;

https://github.com/carolineschnapp/add-product-to-cart-automatically

 

Carolines code adds a specific ''extra'' product to the basket once a product any other product added to the basket.

I changed the code a little so that the specific ''extra'' product is only added to the basket if a specific product is also added to the basket.

{% comment %}

First Make a new Snippet and add the following code.

In the shopify product page for the product that should be present in the cart for the ''extra'' product to be added. add a tag.

Replace the 'product-tag' text below with the tag of your main product.

Replace the 'product-handle' text below with the handle of your extra product.

{% endcomment %}



{% for item in cart.items %} 

{% if item.product.type == "Product-Tag" %}





{% assign product = all_products['Product-handle'] %}





  {% assign variant_id = product.variants.first.id %}



  <script>

  (function($) {



    var cartItems = {{ cart.items | json }},

        qtyInTheCart = 0,

        cartUpdates = {};



    for (var i=0; i<cartItems.length; i++) {

      if ( cartItems[i].id === {{ variant_id }} ) {

        qtyInTheCart = cartItems[i].quantity;

        break;

      }

    }



    if ( ( cartItems.length === 1 ) && ( qtyInTheCart > 0 ) ) {

      cartUpdates = { {{ variant_id }}: 0 }

    }

    else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart !== 1 ) ) {

      cartUpdates = { {{ variant_id }}: 1 }

    }

    else {

      return;

    }



    var params = {

      type: 'POST',

      url: '/cart/update.js',

      data: { updates: cartUpdates },

      dataType: 'json',

      success: function(stuff) { 

        window.location.href = '/cart';

      }

    };



    $.ajax(params);



  })(jQuery);

  </script>





{% endif %}

{% endfor %}



___

 

 

Add this to bottom of cart.liquid

 

{% include 'Snippet-Name' %}

 

Jake_of_TRADES
Tourist
3 0 3

I signed in to my account so I could reply and say THANK YOU! I have been searching all day for a solution to this!

aneeshmoh
New Member
1 0 0

Will this code enable multiple specific products and multiple extra products. I mean to say if 4 no of specific products added to cart them 4 numbers of extra products also will be added automatically?

Highly appreciate your response.

0 Likes
aricfool
New Member
1 0 0

I am also looking for this solution.

0 Likes
James_Herndon
New Member
2 0 0

This was so incredibly helpful!

I had to modify it to add another product based on an item's properties, ie a customization, similar to how you can add product options ala this great tutorial:

https://www.envision.io/blogs/ecommerce-pulse/95036801-how-to-create-customizable-products-in-shopif...

 

In this way you could set up a dropdown or radio box that when checked etc means another product from your shop will be automatically added to your cart, probably great for upsells, (however it's not how I'm using it)

So I wanted to share my modification that adds a product based on a certain property choice, yours will require tweaking of course to match your options.
Hope this helps!

 

{% comment %}

First Make a new Snippet and add the following code.
Replace the 'product-tag' text below with the tag of your main product.
Replace the 'product-handle' text below with the handle of your extra product.

Copy+paste the below code at the very bottom of your cart.liquid, be sure to change the name to whatever you named your snippet
{% include 'your_snippets_name' %}

{% endcomment %}


{% for item in cart.items %} 

{% for p in item.properties %}

{% unless p.last == blank %}

{% if p.last contains "This is where you would add some text from your custom option, include the quotes since you are searching within a string" %}

{% assign product = all_products['product-handle'] %}

{% assign variant_id = product.variants.first.id %}

  <script>

  (function($) {

    var cartItems = {{ cart.items | json }},

        qtyInTheCart = 0,

        cartUpdates = {};

    for (var i=0; i<cartItems.length; i++) {

      if ( cartItems[i].id === {{ variant_id }} ) {

        qtyInTheCart = cartItems[i].quantity;

        break;

      }

    }

    if ( ( cartItems.length === 1 ) && ( qtyInTheCart > 0 ) ) {

      cartUpdates = { {{ variant_id }}: 0 }

    }

    else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart !== 1 ) ) {

      cartUpdates = { {{ variant_id }}: 1 }
    }

    else {

      return;

    }

    var params = {

      type: 'POST',

      url: '/cart/update.js',

      data: { updates: cartUpdates },

      dataType: 'json',

      success: function(stuff) { 

        window.location.href = '/cart';
      }
    };

    $.ajax(params);


  })(jQuery);

  </script>


{% endif %}

{% endunless %} 

{% endfor %}

{% endfor %}

 

 

0 Likes
Mino7
Excursionist
14 0 0

 @James_Herndon  Where is the "product-tag" text in your code ? 

 

0 Likes
Mino7
Excursionist
14 0 0



Thank you for the code @MOCPH   

And what if I want to change the price of that product added on checckout, do you know how am I going to proceed ? 

thanks!

0 Likes
Huda-HN
Tourist
19 0 1

@James_Herndon 

Thanks a lot 

can you help me , if I want to add rule

like if the products trim different collection ... product  A should be added to cart

 

0 Likes
Jeff-Billykite
New Member
8 0 0

Hi, I too am trying to automatically add an item to the cart when a particular item is added, I followed your directives but with no success, I would be very grateful for any assistance. Ps I'm a very novice coder 

This is the handle of the product to be added as an extra segway-ninebot-g30-max-fast-charger-5a

Screenshot 2021-07-27 at 11.48.34 AM.jpg

I also added this tag to the main product Charger Offer

Screenshot 2021-07-27 at 11.48.44 AM.jpg

I created a new snippet add-charger-to-cart in the Snippets folder and copy-paste the code with my product edits (i originally named this cart-add-on but decided to re name it in case there was some kind of conflict)

Screenshot 2021-07-27 at 11.49.17 AM.jpg

I then added {% include 'add-charger-to-cart' %} at the very bottom of our cart.liquid snippet:

Screenshot 2021-07-27 at 11.50.32 AM.jpg

after no success and more investigating I disabled the AJAX page load

Screenshot 2021-07-27 at 12.11.31 PM.jpg

But still when I add the main product to the cart that has the specified tag added my extra product does not automatically add to the cart

 

Please advise 

0 Likes