Venture theme: Product Customizer (Pro) compatibility script -- this is the un-minified version of the script used in the cart install https://gist.github.com/bekarice/243a35fbab62ff546632

venture-theme-ajax-compatibility-pro.js

<script>
  (function() {
      function asyncLoad() {

        QtySelector.prototype.updateItemQuantity = function (line, quantity) {
          var refreshPage = false;
          var $row = $('[data-product-customizer-pricing-ref][data-product-customizer-pricing-qty][data-line="' + line + '"]');
          if ($row.length > 0) {
            var pricingRef = $row.data('product-customizer-pricing-ref');
            var pricingItemQuantity = $row.data('product-customizer-pricing-qty');
            var $pricingItemRow = $row.siblings('[data-product-customizer-pricing-ref=' + pricingRef + ']');
            if ($pricingItemRow.length > 0) {
              $.ajax({
                method: 'POST',
                url: '/cart/change.js',
                data: 'quantity=' + (quantity * pricingItemQuantity) + '&line=' + $pricingItemRow.data('line'),
                async: false
              });
            }
          }
          if ($('form[action="/cart"]').find('[data-product-customizer-pricing-ref]').length > 0 && !$('form[action="/cart"]').prop('data-doing-submit')) {
            refreshPage = true;
          }

          var params = {
            type: 'POST',
            url: '/cart/change.js',
            data: 'quantity=' + quantity + '&line=' + line,
            dataType: 'json',
            success: $.proxy(function(cart) {
              if (refreshPage) {
                location.reload();
              } else {
                this.updateCartItemCallback(cart);
              }
            }, this)
          };

          $.ajax(params);
        };
      }
      window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
    })();
</script>

The venture cart uses an ajax quantity updater, with the cart contents refreshed via a mustache.js template

Our approach is to detect on quantity change whether there is a pricing item in the cart, and if so, to perform a full page reload. This simplifies our approach as we don't have to replicate our helper liquid logic in the javascript/mustache.js template. The drawback
is that we lose the nicer AJAX cart update, and the "checkout" form submission becomes more complicated and potentially more unreliable.

The issue with the "checkout" form submission comes up when the customer inputs a new quantity for a line item, and clicks "checkout". Both the quantity input change event and the form submission event begin firing at once. We catch the form submission and mark the form as "doing-submit" via a javascript data attribute, and use that in our compatibility javascript to avoid doing the full-page refresh (which would stop the progression to "checkout"). The drawback to this is that the raw items (hidden properties and line items) can flash briefly in the cart as the mustache.js template renders, before the "checkout" form submission brings you to the checkout page. It also relies on the events firing/executing in the correct order so we can mark the form as being submitted, and then avoid the full page reload.

Another detail that could be improved, is if we used the more complicated Shopify JS API "update" endpoint which would allow us to update both the customized item and the pricing item in one (faster?) request, as opposed to doing the two "change" requests.