Add a product to the cart automatically if another "specific" product is added?

[roarschouten]

Hi, first of all, great work! I love to use your cart library in my Shopify projects!

In the javascript examples, you have an example with "Add a product to the cart automatically if the total price is $100 or higher"
For a client of mine, I like to use this concept but when a specific product is added instead of the $100,-.

I hope you can advise on what the best practice is for this specific function.

Thank you in advance. 🙏🏽

[EvgeniyMukhamedjanov]

Hey, thank you for using Liquid Ajax Cart!
Can you give me more details on requirements?
Should the additional product be removed after the specific product is removed as well?
Any other limitations?

[roarschouten]

Thank you for your quick answer!

They sell protein and want to separate the "scoop" from the main product because they use organic scoops and want people to pay a little extra. So the idea is when a product with a specific ID or a product from a specific collection is added to the cart, the scoop product needs to be added automatically. It may be nice to have the removal as well, but there are no further limitations.

[EvgeniyMukhamedjanov]

Hey!
In the code below I assume that you use product forms for "add to cart" functionality and they work via Liquid Ajax Cart. (If another script is responsible for adding a product to cart my code will not work).
Also I assume that you need to add only one scoop per cart, no matter how many protein packages are added.
To diffirentiate a protein product from other products I suggest you to add a property for all the protein product forms:

{% form 'product', product %}
  <!-- ... -->
  <input type="hidden" name="properties[_protein]" value="Yes">
  <!-- ... -->
{% endform %}

The script below will wait for a product with the _protein === Yes property

import { subscribeToCartAjaxRequests, cartRequestAdd, getCartState } from '{{ 'liquid-ajax-cart.js' | asset_url }}';

const proteinPropertyName = "_protein";
const proteinPropertyValue = "Yes";
const scoopVariant = 40934235668668;

subscribeToCartAjaxRequests(( requestState ) => {
  if ( requestState.requestType === 'add' ) {
    
    let isProtein = false;

    /* Looking for the _protein property each time when a product gets added ot cart */
    if ( requestState.requestBody instanceof FormData || requestState.requestBody instanceof URLSearchParams ) {
      if ( requestState.requestBody.has(`properties[${ proteinPropertyName }]`) ) {
        if (proteinPropertyValue === requestState.requestBody.get(`properties[${ proteinPropertyName }]`).toString()) {
          isProtein = true;
        }
      }
    } else if ('items' in requestState.requestBody) {
      for (let i = 0; i < requestState.requestBody.items.length; i++) {
        if (requestState.requestBody.items[i].properties?.[proteinPropertyName] === proteinPropertyValue) {
          isProtein = true;
          break;
        }
      }
    } else {
      isProtein = requestState.requestBody.properties?.[proteinPropertyName] === proteinPropertyValue ? true : false;
    }
    
    let isScoopAdded = false;
    /* Looking for the scoop in the current cart */
    const cartState = getCartState();
    for (let i = 0; i < cartState.cart.items.length; i++) {
      if (cartState.cart.items[i].variant_id === scoopVariant) {
        isScoopAdded = true;
        break;
      }
    }

    if (isProtein && !isScoopAdded) {
      cartRequestAdd({
        id: scoopVariant,
        quantity: 1
      });
    }
  }
});

[roarschouten]

You are amazing, this works perfectly!

[roarschouten]

Is there anything I can do for you in return? Please, let me know.

[EvgeniyMukhamedjanov]

:-) Just stars. Github stars.