[ jQuery + liquid ] Multiple Companion Products

New Member
2 0 0

I'm trying to create/modify some code to allow me to add 3 companion products to the cart when a specific product is added, and I've hit a bit of a roadblock.

I want to have a product that consists of 4 shipments of fun, mystery goods! I want it to be a single product (as opposed to a bundle) because I would like it to show up on my site as a product in it's own right, but I want to make it simpler for us to track and ship (hence four products, so the orders can be partially fulfilled). 

I started with this doc, which contains this bit of code, meant to add a "free gift" to the cart page. 

Note: I'm new to coding and haven't used jQuery before, so if you have time to explain a fundamental that I'm missing, I'm all ears! I'm sure I'm making some (read: many) rookie mistakes here. Thanks in advance for your patience!

So, I made 4 products: The main product (called Magical Mystery Box) and 3 other products called Shipment 2, Shipment 3, and Shipment 4. MMB acts as shipment 1. I made my link list (magical-mystery-box-shipment) with links to Shipment 2, Shipment 3, and Shipment 4. My snippet is called mystery-shipments.liquid, and is included in my cart template.

I added a forloop and conditional statement to ensure that the script only runs if the Magical Mystery Box is in the cart, and I know this is brute force and ignorance, but I'm currently running the script 3 times, so all three companion products are added to the cart.

Here's the snippet:   
 
    {% assign linklist = linklists['magical-mystery-box-shipment'] %}    
        {% if linklist.links.size > 0 %}
            {% for item in cart.items %}
                {% if item.product.handle == "magical-mystery-box" %}
    <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>

    <script>
    if (typeof Shopify === 'undefined') var Shopify = {};
    Shopify.cart = {{ cart | json }};
    Shopify.toAdd = {{ linklist.links[1].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>

    <script>
    if (typeof Shopify === 'undefined') var Shopify = {};
    Shopify.cart = {{ cart | json }};
    Shopify.toAdd = {{ linklist.links[2].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 %}
            {% endfor %}
        {% endif %}

Right now, this only adds one of each companion-product, even if 6 "Magical Mystery Boxes" are added to the cart. I would like the quantity of each companion product to match the Magical Mystery Box.    
Ideally, I would also like the companion products to be removed from the cart if no MMBs are present. (I also have some formatting wishes, and would *really* love if these products could be hidden and still allow purchasing, but I'm starting with the functionality parts.)

Help?

Please let me know if you need any additional information, and thanks for looking at this with me!

0 Likes
New Member
1 0 0

Thanks for sharing the code. 

 

Were you able to solve your query about adding additional "free gifts"  to the cart with every product added? 

 

Thanks in advance

0 Likes