AJAX модальное обновление корзины при добавлении товаров

Question

Я создал базовый c магазин с несколькими перечисленными продуктами. Для каждого продукта есть значок корзины покупок, при нажатии на который продукт добавляется на карточку, не покидая страницы продуктов. Значок карточки покупок в заголовке обновляется с учетом количества продуктов в корзине пользователя. Однако, когда пользователь щелкает значок корзины покупок, модальное окно, отображающее продукты в корзине, не обновляется. Перед обновлением страницу необходимо обновить.

Как мне настроить ее так, чтобы, когда пользователь добавляет продукт, а затем щелкает, чтобы проверить свою корзину, он уже обновлялся новым продуктом.

ajaxify-cart.liquid

<script>

Shopify.AjaxifyCart = (function($) {
  
  // Some configuration options.
  // I have separated what you will never need to change from what
  // you might change.
  
  var _config = {
    howLongTillBtnReturnsToNormal: 20, // in milliseconds.
    cartCountSelector:             '.count',
    
    // What you will never need to change
    addToCartBtnSelector:          '[type="submit"]',
    addToCartFormSelector:         'form[action="/cart/add"]',
    shopifyAjaxAddURL:             '/cart/add.js',
    shopifyAjaxCartURL:            '/cart.js'
  };

  var _init = function() {   
    $(document).ready(function() { 
      $(_config.addToCartFormSelector).submit(function(e) {
        e.preventDefault();
        var $addToCartForm = $(this);
        var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
        $addToCartBtn.addClass('disabled').prop('disabled', true);
        // Add to cart.
        $.ajax({
          url: _config.shopifyAjaxAddURL,
          dataType: 'json',
          type: 'post',
          data: $addToCartForm.serialize(),
          success: function(itemData) {
            // Re-enable add to cart button.
            $addToCartBtn.addClass('inverted');
            window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
            }, _config.howLongTillBtnReturnsToNormal);
            // Update cart count.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden');
              }
            });
            //Update Cart Modal
            
          },
          error: function(XMLHttpRequest) {
            var response = eval('(' + XMLHttpRequest.responseText + ')');
            response = response.description;
            if (response.slice(0,4) === 'All ') {
              _showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
              $addToCartBtn.prop('disabled', false);;
              $addToCartBtn.prop('disabled',true);
            }
            else {
              _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
              $addToCartBtn.prop('disabled', false).removeClass('disabled');
            }
          }
        });
        return false;    
      });
    });
  };
  return {
    init: function(params) {
        // Configuration
        params = params || {};
        // Merging with defaults.
        $.extend(_config, params);
        // Action
        $(function() {
          _init();
        });
    },    
    getConfig: function() {
      return _config;
    }
  }
  
})(jQuery);

Shopify.AjaxifyCart.init( { cartCountSelector: '.count'} );

</script>

Например, на скриншоте ниже вы можете увидеть, что у меня что-то есть в корзине, но модальное окно корзины не обновлено для отображения Товаров в корзине:

I have been following the steps below to get the add to card button working on my product cards. https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-products-to/m-p/616440