Do Not Allow "Related Products" to be Added to Cart Unless "Main Products" Have Been Added Initially

[SantiagoP]

Hi everyone,

I hope you're all doing well. I have a specific customization challenge that I'm grappling with and would greatly appreciate your expertise.

Here's the current scenario:

• Main products: Roses (Red, Fucsia, Pink, and Pale red)
• Related products: Chocolates and drinks
• Store URL: https://6a827c.myshopify.com/
• Theme used: Studio
• The Related Products can only be accessed in Main products pages

I am aiming to achieve the following functionality:

• If a Main product (e.g., Fucsia) has not been added to the cart, attempting to add a Related product (e.g., Chocolates) should trigger a message box stating, "Cannot add this to the cart because a Main product is not in the cart."

I've attempted to implement a solution using the following JavaScript code. I added this code in "main-product.liquid" (please note that this code is an example and is not functioning as intended):

<script>
document.addEventListener('DOMContentLoaded', function() {
  var addBtn = document.getElementById('ProductSubmitButton-template--19975790657872__main');
  var productHandle = 'your_product_handle';handle
  var rosesInCart = JSON.parse(localStorage.getItem('cart'))?.includes('Fucsia');

  addBtn.addEventListener('click', function(event) {
    var cartItems = JSON.parse(localStorage.getItem('cart')) || [];

    if (!rosesInCart) {
      event.preventDefault();
      alert("Add roses first.");
    } else {
      cartItems.push(productHandle);
      localStorage.setItem('cart', JSON.stringify(cartItems));
      alert("Product added to cart.");
    }
  });
});
</script>

I would appreciate your thoughts on this approach and any suggestions for a more efficient way to handle this scenario. Please note that this code is provided as an example, and it is not currently functioning as intended.

Your assistance is invaluable! Thank you in advance for your time and expertise.

[Guleria]

Suggestion: On click of related product atc fetch the cart with ajax and check if cart item contains  main PDP  specific variant id show a message.

[SantiagoP]

Thanks Guleria, can you please send me an example of how the code should looks like?

I tried this with ChatGPT but it's incomplete:

// Assume you have the specific variant ID for the Main Product PDP
var mainProductVariantID = '47673350881616'; // Update this with the actual ID

// Function to fetch the cart with AJAX
function fetchCart() {
  // Use AJAX to get the cart information
  // ...

  // Check if the main product variant is in the cart
  if (cartContainsMainProductVariant(cart, mainProductVariantID)) {
    alert("Cannot add this to the cart because a Main product is already in the cart.");
  } else {
    // Continue with logic to add related product to the cart
    // ...
  }
}

// Function to check if cart contains the main product variant
function cartContainsMainProductVariant(cart, mainProductVariantID) {
  // Check if the cart items include the main product variant ID
  return cart.some(item => item.variant_id === mainProductVariantID);
}

// Event listener for the related product Add to Cart button
document.getElementById('relatedProductAddToCartButton').addEventListener('click', function(event) {
  event.preventDefault();
  
  // Fetch the cart and perform checks
  fetchCart();
});

Thanks in advance.

[Guleria]

I think the example code you already have.

Can I ask what's the issue when you use this code ?
btw if you need a working solution a/to the theme you are using you can send me a DM to discuss further. 

[SantiagoP]

Thanks Guleria, as I said the code was genereted by ChatGPT so it's incomplete. For example:

1. How can I to get the actual ID?

// Assume you have the specific variant ID for the Main Product PDP
var mainProductVariantID = '47673350881616'; // Update this with the actual ID

 2. How can I get the cart information with AJAX?

// Function to fetch the cart with AJAX
function fetchCart() {
  // Use AJAX to get the cart information
  // ...

 3. How can I check if main product variant is in the cart?

// Check if the main product variant is in the cart
  if (cartContainsMainProductVariant(cart, mainProductVariantID)) {
    alert("Cannot add this to the cart because a Main product is not in the cart.");
  } else {
    // Continue with logic to add related product to the cart
    // ...
  }
}

That's the obstacules I see. Thanks in advance.