reliable ADDED-TO-CART Pop-over

I was highly unsatisfied with the inbuilt pop-up, or pop-over as it is called, which was supposed to indicate when items were added to cart. It was inconsistent, did not appear on individual product pages at all, was difficult to style, and had no other functionality. I completely disabled it and replaced it with a bar. The bar alerts you in red when the item was not added to cart, is easy to style, upon click takes you to the cart, is extremely consistent, and looks real good. Please note, however, that instead of monitoring cart product quantity, the pop-over appears when the button is clicked, not when the item is actually added to the cart. This makes it snappy, but has its drawbacks.

HTML:

<div id="popoverContainer">
	<div id="custom-popover">
		<p id="popover-message"></p>
	</div>
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
let hideTimeout;
var popover = document.getElementById('custom-popover');
var popoverMessage = document.getElementById('popover-message');
 // Add click event listeners to the elements
popover.addEventListener('click', function() {
window.location.href = '/cart';
});
popoverMessage.addEventListener('click', function() {
window.location.href = '/cart';
});
//show and hide popover
function showPopover(message) {
popoverMessage.textContent = message;
popover.classList.add('show');
popover.style.pointerEvents = 'auto';
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
popover.classList.remove('show');
popover.style.pointerEvents = 'none';
}, 3000);
}
function checkSelectOptions(productItem) {
var selects = productItem.querySelectorAll('select');
for (var i = 0; i < selects.length; i++) {
if (selects[i].selectedIndex === 0) {
return 'Please Select ' + selects[i].options[0].textContent;
	}
}
return null;
}
function listenForAddToCart() {
var buttons = document.querySelectorAll('.sqs-add-to-cart-button');
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
let productItem = event.target.closest('.ProductItem') || event.target.closest('.grid-item');
let productName = productItem?.querySelector('.ProductItem-details-title')?.textContent || productItem?.querySelector('.grid-title')?.textContent;
if (productItem) {
let selectMessage = checkSelectOptions(productItem);
if (selectMessage) {
popoverMessage.style.color = " #ea4b1a";
showPopover(selectMessage);
popover.focus();
return;
	}
}
if (productName) {
popoverMessage.style.color = "#ffc700";
showPopover(productName + ' Acquired!');
			}
		});
	});
}
listenForAddToCart();
document.addEventListener('click', function(event) {
if (event.target.closest('.sqs-add-to-cart-button')) {
listenForAddToCart();
		}
	});
});

CSS:

//disable stock pop-overs
.template-cart-item-added-popover {
  display: none;
}
.sqs-widgets-confirmation-content {
  display: none;
}
.sqs-widgets-confirmation-overlay {
  display: none;
}
//custom pop-over
#popoverContainer {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  max-width: 2200px;
  padding-left: 3vw;
  padding-right: 3vw;
  pointer-events: none;
}
#custom-popover {
  display: block;
  opacity: 0;
  position: fixed;
  transition: all 0.5s ease;
  color: #ffc700;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  padding: 25;
  border: 0;
  width: 100%;
  max-width: 2200px;
  z-index: 999999;
  align-items: center;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2.5px;
  pointer-events: none;
  cursor: pointer;
}
.popover-message {
  padding-left: 35px;
  padding-right: 35px;
  margin: auto;
  width: 80%;
  pointer-events: none;
  cursor: pointer;
}
#custom-popover.show {
  opacity: 1;
}