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

Всем привет, уважаемые коллеги. Прошу Вас помочь решить небольшую задачу. Бьюсь над ней уже трое суток. Так как я не особо шарю в 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/
Алексей Носкович
31 мая 2022, 13:21
modx.pro
179
0

Комментарии: 5

Ivan
31 мая 2022, 17:19
0
Вообще странноватая логика вашей корзины.

Вам бы просто установить компонент и вызвать что нужно. Там и +- вроде работают.
    Артур
    31 мая 2022, 21:24
    0
    Должен сказать, что в FireFox вообще не работает.
      Александр Мельник
      31 мая 2022, 22:13
      +1
      Задача заключается в том, чтобы сделать так, чтобы при клике на корзинку в мобильной версии, выезжало это боковое меню сразу с развернутыми, добавленными товарами, а не пустым. Это ж не логично.
      но зачем вы тогда используете подгрузку содержимого корзины по клику?
      Я вижу несколько вариантов решения.
      1) на странице не должно быть отдельно блоков для мобильного и отдельно для десктопа. [[HeaderDesktop]], [[HeaderMobile]] это плохая практика. Внешний вид должен адаптироваться под разные устройства за счет каскадных стилей и медиа запросов, а не за счет скрытия блоков для десктопа и отображения блоков для мобильных. В таком случае и корзина у вас всегда будет существовать на странице, потому что шапка остается всегда одной и той же.
      2) Я вижу что у вас используется скорее всего какой то готовый шаблон интернет магазина, взятый с бескрайних просторов интернета, а значит переверстывать никто не будет. Тогда действительно придется иметь два разных чанка для шапки, в каждом полноценно вызывать [[!msMiniCart?&tpl=`miniCart`]], а не подгружать по клику, НО решать какой из чанков показать вам нужно еще на уровне обработки запроса на сервере. Помоему для modx даже была какой-то сниппет типа MobileDetect или как то так, который позволяет определить с какого устройства пришел запрос.
        Роман
        01 июня 2022, 11:13
        0
        Тут во-первых лучше обновить jQuery, так как она старая стоит. По поводу корзины, можно в одном месте вызвать корзину, в другое вставлять. Накидал примерную суть:
        $(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'));
        		}
        	}
        });
        Но лучше сделать как сказал Александр Мельник.
          Алексей Носкович
          03 июня 2022, 00:04
          0
          Уважаемые коллеги, да Вы правы, шаблон взят с themeforest.net. И по сути логику его работы переписывать бы не хотелось. Мне тоже не понятен этот подход из двух блоков, но да и черт с ним. И подгрузка товаров в мобильной версии по клику в области этой корзины — не моя прихоть, это как раз та загвоздка с которой я борюсь. Я даже пытался просто сделать невидимый блок, обрамляющий иконку корзины и навесить на него событие, но почему-то она как-будто ниже всех слоев оказывается и вытащить ее выше у меня не получается, хотя если вывесить событие на соседний элемент, например на иконку аккаунта, то все работает. Вот в этом то и затык. А шаблон — дык выбирает заказчик… его дивизию…
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            5