Untitled

{% assign upsellProduct = all_products['upsell-test'] %}
    
<label for="upsell">
  <div class="upsell__checkbox">
    <input type="checkbox" id="upsell" class="Add-on" name="upsell" data-value="{{ upsellProduct.first_available_variant.id }}" value="{{ upsellProduct.first_available_variant.id }}">
      Check Box To Add <span class="p_title">{{ upsellProduct.title }}</span>
    <span class="price"> For <strong>{{ upsellProduct.price | money  }}</strong> (Normally {{ upsellProduct.compare_at_price | money }})</span>
  </div>
</label>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var addOns = document.querySelectorAll('.Add-on');
    var i = 0; 

    addOns.forEach(function (addOn) {
        addOn.addEventListener('change', function () {
          validate();
        });
    });

    async function validate() {
        try {
            var productId = 47769066930517; 

            if (document.getElementById("upsell").checked) {
                await addItemToCart(productId, 1);
            } else {
                await updateCartItemQuantity(productId, 0);
            }

            
            var changeEvent = new Event('change', { bubbles: true });
            document.dispatchEvent(changeEvent);

            updateCartBubble();
        } catch (error) {
            console.error("Error during item push:", error);
        }
    }

    async function addItemToCart(productId, quantity) {
        let data = {
            items: [{
                id: productId,
                quantity: quantity
            }]
        };

        const response = await fetch(window.Shopify.routes.root + "cart/add.js", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        });

        const responseData = await response.json();
        console.log("Success:", responseData);
    }

    async function updateCartItemQuantity(productId, newQuantity) {
        let data = {
            updates: {
                [productId]: newQuantity
            }
        };

        const response = await fetch(window.Shopify.routes.root + "cart/update.js", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        });

        const responseData = await response.json();
        console.log("Success:", responseData);
    }

    
    function updateCartBubble() {
      var xhr = new XMLHttpRequest();
      var url = "/cart.js";
      xhr.open("GET", url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var parsedState = JSON.parse(xhr.responseText);
          var htmlToAppend = '<div class="cart-count-bubble">' + parsedState.item_count + '</div>';
          $("#cart-icon-bubble").find('.cart-count-bubble').remove();
          $("#cart-icon-bubble").append(htmlToAppend);
        }
      };
      xhr.send();
    }
    
  
});


</script>



<style>
.upsell__bundle{
	margin-bottom: 25px;
}
.upsell__checkbox{
	position: relative;
	padding: 10px;
	border: 2px dashed;
	cursor: pointer;
	letter-spacing: -0.6px;
	line-height: 175%;
	color: #000;
	font-size: 16px;
}
.upsell__bundle input[type=checkbox]{
	cursor: pointer;
	height: 24px;
	opacity: 0;
	width: 24px;
}
.upsell__bundle label{
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}
.upsell__bundle label .p_title{
	color: #7aafb2;
	cursor: pointer;
}
.upsell__bundle label .price{
	display: block;
	font-size: 20px;
}
.p_title{
	font-weight: 600;
	color: #00cac8;
	font-size: 16px;
}
.price{
	font-size: 16px;
}
.price strong{
	color: #ee1000;
	font-weight: 600 !important;
	transform: translate(0px, 3px);
}
#upsell{
	width: 30px;
	height: 20px;
	transform: translate(-4px, 4px);
}
@media(max-width: 400px){
	.upsell__bundle label, .upsell__bundle label .price{
		font-size: 15px;
	}
}

</style>