Why is Shopify Theme Dynamic Subtotal Javascript is being blocked?

69 Views Asked by At

I'm having an issue with a dynamic subtotal on this page made on the shopify theme "Kalles" by the4 - it uses a custom Js function called $(document).on('variant:changed', function (evt) {}); to update the subtotal when another variant is choosen on the page.

Dynamic subtotal location

This function is being stopped by something but I can't workout what it is - all I can see in console is an error. Uncaught TypeError: Cannot read properties of undefined (reading 'min')

I have installed this on other sites with the same shopify theme and it works fine without issue eg

I currently have this script running on the site but as you can see the subtotal isn't working and keeps the first load variant price only as the script is being blocked.

$(document).on('variant:changed', function (evt) {
        const qty_input = $('.t4s-quantity-input'),
          pr_container = $('.t4s-product__info-container'),
          total_wrapper = $('.t4s-form__product .product-form__sub-total');
        const variant = evt.currentVariant;
        if (qty_input && total_wrapper && variant) {
          var price = variant.price;
          total_wrapper.attr('data-price', price);

          const total = T4SThemeSP.Currency.formatMoney(parseInt(qty_input.val()) * price);

          total_wrapper.find('.t4s-product-price').html(total);
        }
        if (pr_container) {
          if (!variant.available && variant.price == 0) {
            pr_container.addClass('t4s-product__info-out');
          } else {
            pr_container.removeClass('t4s-product__info-out');
          }
        }
      });

      function changeQty() {
        const qty_input = $('.t4s-quantity-input'),
          total_wrapper = $('.t4s-form__product .product-form__sub-total');
        if (qty_input && total_wrapper) {
          qty_input.on('change', function (e) {
            var price = total_wrapper[0].dataset.price;
            var currentqty = qty_input.val();
            const total = T4SThemeSP.Currency.formatMoney(parseInt(this.value) * price);
            total_wrapper.find('.t4s-product-price').html(total);
            $('.t4s-sticky-atc__price').html(total);
          });
        }
      }
      changeQty();

I've tried predefining min & max without any luck - also I have brought it into a clean instance of shopify and it works fine. Which leads me to believe that the script is being blocked by one of the applications.

Would it be best to script something from scratch to not rely on the theme or did someone know why the script would be producing an error?

I have left comments in the html to make it easy to find on the site ""

0

There are 0 best solutions below