Hi guys!
I hope you're all doing well. I have a customization query and would greatly appreciate your insights.
Here's the scenario I'm dealing with:
Main products: Roses (Red, Fucsia, Pink, and Pale red)
Related products: Chocolates and drinks
I want to achieve the following:
If a Main product (e.g., Fucsia) has not been added to the cart, attempting to add a Related product (e.g., Chocolates) to cart should display a message box saying, "Cannot add this to the cart because a Main product is not in the cart."
I've tried implementing a solution with the following JavaScript code:
<script>
document.addEventListener('DOMContentLoaded', function() {
var AddBtn = document.getElementById('ProductSubmitButton-template--19975790657872__main');
var rosesInCart = JSON.parse(localStorage.getItem('cart'))?.includes('Fucsia');
agregarBtn.addEventListener('click', function(event) {
var cartItems = JSON.parse(localStorage.getItem('cart')) || [];
if (!rosesInCart) {
event.preventDefault();
alert("Primero agrega Rosas al carrito antes de agregar otros productos.");
} else {
cartItems.push(productHandle);
localStorage.setItem('cart', JSON.stringify(cartItems));
alert("Producto agregado al carrito.");
}
});
});
</script>
I'd love to hear your thoughts on this approach and if there's a more efficient way to handle this scenario. Your help is much appreciated!
Thank you in advance.
