Ok last post, here is the final version of my code, where it ghosts the item and changes the link:
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
var elements = document.getElementsByClassName('grid-item');
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
if (ele.className.includes('tag-expire')) {
var classes = ele.className.split(' ');
for (var j = 0; j < classes.length; j++) {
if (classes[j].includes('tag-expire')) {
var expireDate = new Date(classes[j].substring(10));
if (expireDate <= Date.now()) {
ele.style.opacity = '0.2';
// get second child node, which is the <a></a>
var a = ele.childNodes[1];
// get rid of the href and add an onclick
a.removeAttribute('href');
a.setAttribute('onclick','alert("This product is no longer available.");');
}
}
}
}
}
});
</script>