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

Всем привет, уважаемые коллеги. Прошу Вас помочь решить небольшую задачу. Бьюсь над ней уже трое суток. Так как я не особо шарю в javascript, не получается решить задачу с отображением товаров во всплывающей мини-корзине на мобильной версии сайта. именно на мобильной. Получается следующая штука:
1. Есть чанк с наименованием [[HeaderDesktop]], как понятно из названия — это код шапки для десктопной версии сайта и в нем есть строки:

<div class="col-auto minicart-holder">
         [[!msMiniCart?&tpl=`miniCart`]]
</div>

Чанк [[miniCart]] содержит код мини-корзины обновляемой по ajax-запросу, причем в дестопной версии все работает (ниже приложу ссылку на сайт для проверки)

Код чанка [[miniCart]]:

<div  class="minicart minicart-js {$total_count > 0 ? ' full' : ''}" id="msMiniCart">
  <div class="empty">
    <a href="javascript:void(0);" class="minicart-link">
      <i class="icon icon-handbag"></i> 
      <span class="minicart-qty ms2_total_count">{$total_count}</span>
      <span class="minicart-title">корзина покупок</span>
      <span class="minicart-total">{'ms2_minicart_is_empty' | lexicon}</span>
    </a>
  </div>
  <div class="not_empty">
    <a href="#" class="minicart-link">
      <i class="icon icon-handbag"></i> 
      <span class="minicart-qty ms2_total_count">{$total_count}</span> 
      <span class="minicart-title">корзина покупок</span> 
      <span class="minicart-total"><span class="ms2_total_cost">{$total_cost}</span> ₽</span>
    </a>
    <div class="minicart-drop">
      <div class="container">
        <div class="minicart-drop-close">ЗАКРЫТЬ</div>
        <div class="minicart-drop-content">
          <h3>Недавно добавленные товары:</h3>
          <span class="ajax-data"></span>
          <div class="minicart-drop-total">
            <div class="float-right">
              <span class="minicart-drop-summa"><span>Сумма заказа:</span> <b><span class="ms2_total_cost">{$total_cost}</span> ₽</b></span>
              <div class="minicart-drop-btns-wrap">
                <a href="#" onclick="location.href='[[~1232]]';" class="btn" title="[[#1232.longtitle]]">
                  <i class="icon-check-box"></i>
                  <span>оформить заказ</span>
                </a> 
                <a href="#" onclick="location.href='[[~1231]]';" class="btn btn--alt" title="[[#1231.longtitle]]">
                  <i class="icon-handbag"></i>
                  <span>Перейти к корзине</span>
                </a>
              </div>
            </div>
            <div class="float-left">
              <a href="#" onclick="location.href='[[~1231]]';" class="btn btn--alt" title="[[#1231.longtitle]]">
                <i class="icon-handbag"></i>
                <span>Перейти к корзине</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>       
</div>

2. Для мобильной версии сайта есть чанк [[HeaderMobile]], который содержит следующий код:

<div class="hdr-mobile show-mobile">
  <div class="hdr-content">
    <div class="container">
      <div class="menu-toggle"><a href="#" class="mobilemenu-toggle"><i class="icon icon-menu"></i></a></div>
      <div class="logo-holder"><a href="index.html" class="logo"><img src="/assets/template/Goodwin/images/logo.png" srcset="/assets/template/Goodwin/images/logo-retina.png 2x" alt=""></a></div>
      <div class="hdr-mobile-right">
        <div class="hdr-topline-right links-holder"></div>
        <div class="minicart-holder"></div>
      </div>
    </div>
  </div>
</div>

Обратите внимание на блок

<div class="minicart-holder"></div>

, вот в него просто подтягивается содержимое из чанка для десктопной версии. И получается, что при нажатии на корзинку в мобильной версии выезжает боковое меню, но там нет товаров, а если кликнуть в свободном месте этого меню, то они появляются. Задача заключается в том, чтобы сделать так, чтобы при клике на корзинку в мобильной версии, выезжало это боковое меню сразу с развернутыми, добавленными товарами, а не пустым. Это ж не логично.
Прошу Вас, дорогие друзья, помогите мне разобраться! Если нужно, предоставлю доступ.

И еще, вот скрипт, который занимается ajax-запросом:

<script>
  $(document).on('click', '#msMiniCart', function(e) {
	e.preventDefault();
	$.ajax({  
	  type: "POST",  
	  url: '[[~1234]]', 
	  data: {parent: '[[*id]]'},
	  success:  function(data) { 
		if (data){
		  $('span.ajax-data').html(data);
		}else{
		  miniShop2.Message.error('Что-то пошло не так, попробуйте позже!');
		}
	  } 
	}); 
  });
</script>

Ссылка на сайт: fourgyo.ru. либо сразу в какой-нибудь каталог fourgyo.ru/zhenshhinam/

$(window).resize(function(){
    if ($('#msMiniCart').length > 0) {
        if($(window).width() < 992){
            $('.hdr-mobile .minicart-holder').append($('#msMiniCart'));
        }
        else {
            $('.col-auto.minicart-holder').append($('#msMiniCart'));
        }
    }
});

$(document).ready(function(){
	if ($('#msMiniCart').length > 0) {
		if($(window).width() < 992){
			$('.hdr-mobile .minicart-holder').append($('#msMiniCart'));
		}
		else {
			$('.col-auto.minicart-holder').append($('#msMiniCart'));
		}
	}
});

<script>
  (function(){
    //Сохраняем ссылку на стандартный метод jQuery
    var originalAddClassMethod = jQuery.fn.addClass;
    //Переопределяем
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply(this, arguments);
        //Инициализируем событие смены класса
        $(this).trigger('cssClassChanged');
        return result;
    }
})();

$(function(){
    $(".full").bind('cssClassChanged', function(){ 
        e.preventDefault();
	$.ajax({  
	  type: "POST",  
	  url: '[[~1234]]', 
	  data: {parent: '[[*id]]'},
	  success:  function(data) { 
		if (data){
		  $('span.ajax-data').html(data);
		}else{
		  miniShop2.Message.error('Что-то пошло не так, попробуйте позже!');
		}
	  } 
	}); 
    });
});
</script>
Всем спасибо!