This solution does require working with code and Liquid files, and if this is something you would not be comfortable with, I would advise you to reach out to one of Shopify Experts, or contact me by mail. As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme.
I have one product that has a companion. Currently, it is a two step process. If you add this special event to your cart. You must add this 2nd product to your cart as well. This is the only time I would need this to work. One specific time. If you add event A you must add item B…
I am pretty deep into code but I still consider myself a novice. I usually edit code parameters, but not sure what everything needs or how it works.
{% for item in cart.items %}
{% if item.product.id == “29056231440487” %}
jQuery.post(‘/cart/update.js’,
{
quantity:1,
id: 6619002634270
});
This is what I came up with but still not working. Am I adding the wrong IDs? First picture goes to the top, 2nd pic is reference to product I want added.
Hmm, well part of the problem is that you’re comparing the product id to a string I believe. I couldn’t get that evaluation to be true until I took the product id out of the quotes. However, I still couldn’t get it to execute my javascript. So instead of using liquid, I did everything in javascript and got this working:
<script>
//get the cart
let cart = $.getJSON('/cart.js');
// wait for the response
cart.done(function(){
//when you have the response, get the JSON and set items to cart.items
cart = cart.responseJSON;
let items = cart.items;
// make a boolean to make sure that the item you want to add isnt already in the cart (to keep the JS from firing again on page reload)
let item_in_cart_already = false;
//check the cart items and set boolean to true if the item is in the cart
for(var i = 0; i < items.length; i++){
if (items[i].product_id == 1999834054743){
item_in_cart_already = true;
}
}
//then loop through cart items again and if the item isnt in the cart, and the corresponding product is found
//add it to the cart with the same quantity as the other product.
if(!item_in_cart_already){
for(var i = 0; i < items.length; i++){
if (items[i].product_id == 1999834087511){
let variant_quantity = items[i].quantity;
Shopify.addItem(19754659905623, variant_quantity);
}
}
setTimeout(function(){
location.reload();
},1000)
}
})
</script>
This is assuming you have the Shopify.addItem function in your store. You probably do already, but if you need it, here it is:
That’s what I came up with anyway. The only issue I saw is that if they update the quantity of their product on the cart page it will not update the quantity of the additional product.
Yeah it’s in cart.liquid, there was a mistake in the code I noticed later though. If any item was in the cart it was still reloading the page every second because I had the setTimeout set in the wrong place. Here’s an updated version with variables for the product to compare against and the product to add’s product id and variant_id – to make it a little less confusing.
<script>
//get the cart
let cart = $.getJSON('/cart.js');
// wait for the response
cart.done(function(){
//when you have the response, get the JSON and set items to cart.items
cart = cart.responseJSON;
let items = cart.items;
// make a boolean to make sure that the item you want to add isnt already in the cart (to keep the JS from firing again on page reload)
let item_in_cart_already = false;
// product we are checking to see is in the cart
let item_in_cart_prod_id = 1999834087511;
// the product we want to add's product id
let item_to_add_prod_id = 1999834054743;
// the product we want to add's variant id
let item_to_add_variant_id = 19754659905623;
//check the cart items and set boolean to true if the item is in the cart
for(var i = 0; i < items.length; i++){
if (items[i].product_id == item_to_add_prod_id){
item_in_cart_already = true;
}
}
//then loop through cart items again and if the item isnt in the cart, and the corresponding product is found
//add it to the cart with the same quantity as the other product.
if(!item_in_cart_already){
for(var i = 0; i < items.length; i++){
if (items[i].product_id == item_in_cart_prod_id){
let variant_quantity = items[i].quantity;
Shopify.addItem(item_to_add_variant_id, variant_quantity);
setTimeout(function(){
location.reload();
},1000)
}
}
}
})
</script>
I tried added your code to the Cart.liquid page and I did not succeed. I removed the variant piece for the added item (product B) because there is no variant and I’m not sure if that’s why it isn’t working.
There is always a variant, even if you havent set any variants there’s a default variant. You can echo out the variant id in product.liquid to figure out what it is with:
Great news. I was able to find my default Variant IDs (as you instructed). I correct your code in my cart.liquid file using the correct Product IDs, and Variant ID.
After saving the file and testing, it did not auto-add Product B once I added Product A.
Couldn’t tell you. I’d have to look at the code and debug it, I wrote this a while ago. You can message me your store URL and I can request access and take a look. Let me know what product you want to add automatically, and what item should be in the cart for it to happen.
