Custom Coded Sticky Add To Cart Widget Not Working

[Project_ATLAS]

Hi there, I had a developer create a custom coded, sticky add to cart widget for my store, and it has worked quite well. However recently I republished one of the product pages through a page builder app, and now the widget is hidden on this page. I am no longer able to reach out to the person who originally built it, and I'm having a really hard time finding anyone who can figure it out.

If anyone is able to provide a solution it would be greatly appreciated.

I have included the code for the widget, and a link to a few pages from my store.

The cart has been specially designed to only appear when there are no other carts visible in the viewport, in case this behaviour throws you off at all.

Test Product Link:
https://magicbrushco.com/products/test-product
(When you scroll down, you will see the widget appear and act exactly as it should)

Broken Page:
https://magicbrushco.com/products/t2-starter-kit


Widget Code:

<script>
document.addEventListener('DOMContentLoaded', function() {
      window.onscroll = function() { scrollFunction() };
  

  function scrollFunction() {
    
var targetDiv0 = document.querySelector("product-form > form > div > button.product-form__submit");
var targetDiv1 = document.querySelector("#custom_temp_btn1");
var targetDiv2 = document.querySelector("#custom_temp_btn2");
var targetDiv3 = document.querySelector("#custom_temp_btn3");
var targetDiv4 = document.querySelector("#custom_temp_btn4");
var targetBundle = document.querySelector("#image_bundle_t2");
var newButtonAdded = document.querySelector("#custom_addtoCart_new99");
    
     
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

    
// Check if targetDiv0 exists before using getBoundingClientRect
var isVisible0 = targetDiv0 ? elementIsVisibleInViewport(targetDiv0) : false;

// Check if targetDiv1 exists before using getBoundingClientRect
var isVisible1 = targetDiv1 ? elementIsVisibleInViewport(targetDiv1) : false;

// Check if targetDiv2 exists before using getBoundingClientRect
var isVisible2 = targetDiv2 ? elementIsVisibleInViewport(targetDiv2) : false;

// Check if targetDiv3 exists before using getBoundingClientRect
var isVisible3 = targetDiv3 ? elementIsVisibleInViewport(targetDiv3) : false;

// Check if targetDiv4 exists before using getBoundingClientRect
var isVisible4 = targetDiv4 ? elementIsVisibleInViewport(targetDiv4) : false;

// Check if targetBundle exists before using getBoundingClientRect
var isVisible5 = targetBundle ? elementIsVisibleInViewport(targetBundle) : false;

// Check if newButtonAdded exists before using getBoundingClientRect
var isVisible6 = newButtonAdded ? elementIsVisibleInViewport(newButtonAdded) : false;

    var checkHeight2 = document.getElementById("tocheck_hei2"); 
    var checkHeight3 = document.getElementById("tocheck_hei3"); 
    if(checkHeight2){
         var computedStyle2 = window.getComputedStyle(checkHeight2);
    }
    if(checkHeight3){
      var computedStyle3 = window.getComputedStyle(checkHeight3);
    }

    var hiddenDiv = document.getElementById("custom_sticky_addtoCart");
    var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
    var windowHeight = window.innerHeight;
    var documentHeight = document.documentElement.scrollHeight;
    
if(targetDiv0){
   if (!(isVisible0) && (documentHeight - scrollPosition - windowHeight) > 10) {
      hiddenDiv.style.transform = "translateY(0)";
    } 
  else {
      hiddenDiv.style.transform = "translateY(100%)";
    }
}
 if(targetDiv1){
  if (!(isVisible5) && !(isVisible1) && (documentHeight - scrollPosition - windowHeight) > 10) {
      hiddenDiv.style.transform = "translateY(0)";
    } 
  else {
      hiddenDiv.style.transform = "translateY(100%)";
    }
}   
   
 if(targetDiv2){
   if (computedStyle2.display === "none") {
 if (!(isVisible6) && !(isVisible5) && !(isVisible2) && (documentHeight - scrollPosition - windowHeight) > 10) {
      hiddenDiv.style.transform = "translateY(0)";
    } 
  else {
      hiddenDiv.style.transform = "translateY(100%)";
    }

}
 
}   
 if(targetDiv3){
  if (!(isVisible3) && (documentHeight - scrollPosition - windowHeight) > 10) {
      hiddenDiv.style.transform = "translateY(0)";
    } 
  else {
      hiddenDiv.style.transform = "translateY(100%)";
    }
}       
 if(targetDiv4){
   if (computedStyle3.display === "none") {
  if (!(isVisible4) && (documentHeight - scrollPosition - windowHeight) > 10) {
      hiddenDiv.style.transform = "translateY(0)";
    } 
  else {
      hiddenDiv.style.transform = "translateY(100%)";
    }
   }
}         
      
    }

         });
</script>

My deepest gratitude goes out to anyone who can help, as this is having quite a big impact for me on mobile conversions, where this element is very critical.

[tim]

It's only a JS code, but there must also be a liquid code which outputs the custom_sticky_addtoCart element, somewhere at the bottom of the main product page section.

Since this section is not included on your custom template, there is not element for the JS code to show.

[Project_ATLAS]

Yes, you are right my friend. Somehow the template recreated itself, and emitted this extra code, but I managed to find it in the main-product.liquid file and readd it to the new template file. So it is all fixed now.