Мой скрипт работает только при перезагрузке страницы при выборе варианта

Question

Я создал скрипт jquery, который запускает модальное отображение, когда продукт распродан. Скрипт работает нормально, но только когда страница перезагружается после выбора проданного продукта (очевидно, также при первой загрузке продукта, который продан).

Так что, похоже, изменение вариантов влияет на сценарий. Есть ли способ перезагрузить страницу продукта, если выбран новый проданный вариант? Я пробовал этот метод, но он не будет работать: https://community.shopify.com/c/Shopify-Design/Need-a-page-refresh-everytime-a-variant-changes-to-get-the/td-p/581219

Используемый мной скрипт:

var modalproduct = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "close",
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    },
    beforeClose: function() {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
        return false; // nothing happens
    }
});

// set content
modalproduct.setContent('dummy text');

    var btn2 = document.querySelector('.js-product');

    btn2.addEventListener('click', function(){
        modalproduct.open();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://tingle.robinparisi.com/tingle/tingle.js"></script>
<link href="https://tingle.robinparisi.com/tingle/tingle.css" rel="stylesheet"/>
<a class="js-product" style="cursor: pointer;">{{- 'product.form.sold_out' | t -}}</a>

Спасибо за помощь