Реализуем корзину в miniShop2

Начинаем 12 часть нашего курса создания интернет-магазина на MODx Revo. В данном уроке мы с вами реализуем корзину. Если прочитать документацию к miniShop2, то мы увидим, что корзина в данном компоненте два вида корзины:

  • Мини-корзина (за это отвечает сниппет msMiniCart).
  • Большая корзина (ее выводит сниппет msCart).

В нашем же случае видов корзины будет 3:

  • Корзина в шапке
  • Выпадающая корзина
  • Страница с корзиной

Начнем с большой, потому что так нам будет проще. Советую посмотреть дефолтный чанк корзины miniShop2 – tpl.msCart. Те, кто смотрел мой предыдущий курс, сразу найдут разницу – здесь мы впервые столкнемся с шаблонизатором Fenom (документация Fenom).

Для того, чтобы начать, нам необходимо интегрировать шаблон корзины (cart.html). Я надеюсь, вы помните, как мы это делали на прошлых уроках. Также необходимо создать ресурс “корзина” с данным шаблоном. У меня получилось вот так:

Рализация корзины в miniShop2

Дальше мы приступим к созданию чанка. В данном чанке у нас будет полностью все, что находится в элементе “section#cart-page”. Для того, чтобы посмотреть все доступные плейсхолдеры, нужно вызвать сниппет msCart с пустым параметром tpl:

<pre>[[!msCart?tpl=``]]</pre>

Рализация корзины в miniShop2

Теперь соединим дефолтный чанк с нашим и у нас получится следующее:

<div class="container" id="msCart">
  {if !count($products)}
  <div class="alert alert-info" role="alert">{'ms2_cart_is_empty' | lexicon}</div>
  {else}
  <div class="col-xs-12 col-md-9 items-holder no-margin">	
    {foreach $products as $product}
	<div class="row no-margin cart-item" id="{$product.key}">
	  <div class="col-xs-12 col-sm-2 no-margin">
		<a href="{$product.id | url}" class="thumb-holder">
		  {if $product.image?}
		  <img class="lazy" src="{$product.image}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
		  {else}
		  <img class="lazy" src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
		  srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
		  alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
		  {/if}
		</a>
	  </div>	  
	  <div class="col-xs-12 col-sm-5 ">
		<div class="title">
		  <a href="{$product.id | url}">{$product.pagetitle}</a>
		</div>
		<div class="brand">{$product['vendor.name']}</div>
		{if $product.options?}
		<div class="small">
		  {$product.options | join : '; '}
		</div>
		{/if}
	  </div>	  
	  <div class="col-xs-12 col-sm-3 no-margin count">
		<div class="quantity">
		  <div class="le-quantity">
			<form method="post" class="ms2_form form-inline" role="form">
			  <input type="hidden" name="key" value="{$product.key}"/>
			  <a class="minus" href="#reduce"></a>
			  <input type="number" name="count" class="counter" value="{$product.count}"/>
			  <a class="plus" href="#add"></a>
			  <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change">
				<i class="glyphicon glyphicon-refresh"></i>
			  </button>
			</form>
		  </div>
		</div>
	  </div>	  
	  <div class="col-xs-12 col-sm-2 no-margin">
		<div class="price">
		  {$product.price} руб.
		</div>
		<form method="post" class="ms2_form">
		  <input type="hidden" name="key" value="{$product.key}">
		  <button class="close-btn" type="submit" name="ms2_action" value="cart/remove">
		  </button>
		</form>
	  </div>
	</div>
	{/foreach}
  </div>
  <div class="col-xs-12 col-md-3 no-margin sidebar ">
	<div class="widget cart-summary">
	  <h1 class="border">Корзина</h1>
	  <div class="body">
		<ul id="total-price" class="tabled-data inverse-bold no-border">
		  <li>
			<label>Стоимость</label>
			<div class="value pull-right">
			  <span class="ms2_total_cost">{$total.cost}</span> руб.
			</div>
		  </li>
		</ul>
		<div class="buttons-holder">
		  <a class="le-button big" href="checkout.html" >Оформить заказ</a>
		  <a class="simple-link block" href="category-grid.html" >Продолжить покупки</a>
		</div>
	  </div>
	</div>
  </div>
  {/if}
</div>

Прочитать, как работает шаблонизатор и какие у него есть операторы и фишки вы можете в документации Fenom. В видео я поясню откуда я взял конкретные значения. Кроме того, мне пришлось поправить стили и скрипты шаблона. В целом, у нас сейчас все работает: изменяется количество товара в корзине и его можно удалить из корзины.

Теперь шаблон корзины у меня выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
    <head>
        [[$meta]]
    </head>

    <body>
        <div class="wrapper">
            [[$headerInner]]
            <section id="cart-page">
                [[!msCart?tpl=`cartTpl`]]
            </section>
            [[$footer]]
        </div>
        [[$scripts]]
    </body>
</html>

Неплохо не правда ли? Приступим к реализации маленькой корзины. Поступим тем же самым способом, как и с большой – будем сравнивать дефолтный чанк (tpl.msMiniCart) с нашим и будем вставлять необходимые классы и плейсхолдеры. Также я немного опередил события и добавил классы, для нашей выпадающей корзины (подробнее смотрите на видео). Не забывайте, что мини корзина у нас находится в двух чанках: header и headerInner. У меня чанк получился такой:

<a class="dropdown-toggle {$total_count > 0 ? 'full' : ''}" data-toggle="dropdown" href="[[~10]]" id="msMiniCart">
  <div class="empty">
	<div class="basket-item-count">
	  <span class="count ms2_total_count">0</span>
	  <img src="assets/images/icon-cart.png" alt="" />
	</div>	
	<div class="total-price-basket">
	  <span class="lbl">Корзина:</span>
	  <span class="total-price">
		<span class="value ms2_total_cost">0</span><i class="fa fa-ruble"></i>
	  </span>
	</div>
  </div>
  <div class="not_empty">
	<div class="basket-item-count">
	  <span class="count ms2_total_count">{$total_count}</span>
	  <img src="assets/images/icon-cart.png" alt="" />
	</div>	
	<div class="total-price-basket">
	  <span class="lbl">Корзина:</span>
	  <span class="total-price">
		<span class="value ms2_total_cost">{$total_cost}</span><i class="fa fa-ruble"></i>
	  </span>
	</div>
  </div>
</a>

Теперь вызываем нашу мини корзину в двух чанках шапки нашу корзину:

[[!msMiniCart?tpl=`miniCartTpl`]]

Теперь у нас есть мини корзина! Поздравляю!

И в данной части будет глава, которую достаточно много человек у меня просили в прошлом курсе – выпадающая корзина. Реализовывать будем с помощью технологии AJAX. Для начала нам нужно сделать чанк подобный большой корзине. У меня он получился следующий:

{if !count($products)}
<div class="alert alert-info" role="alert">{'ms2_cart_is_empty' | lexicon}</div>
{else}
{foreach $products as $product}
<li>
  <div class="basket-item">
	<div class="row">
	  <div class="col-xs-4 col-sm-4 no-margin text-center">
		<div class="thumb">
		  <a href="{$product.id | url}" class="thumb-holder">
			{if $product.image?}
			<img class="lazy" src="{$product.image}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
			{else}
			<img class="lazy" src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
			srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
			alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
			{/if}
		  </a>
		</div>
	  </div>
	  <div class="col-xs-8 col-sm-8 no-margin">
		<div class="title">{$product.pagetitle}</div>
		<div class="price">{$product.price} <i class="fa fa-ruble"></i></div>
	  </div>
	</div>
	<form method="post" class="ms2_form">
	  <input type="hidden" name="key" value="{$product.key}">
	  <button class="close-btn" type="submit" name="ms2_action" value="cart/remove">
	  </button>
	</form>
  </div>
</li>
{/foreach}
<li class="checkout">
  <div class="basket-item">
	<div class="row">
	  <div class="col-xs-12 col-sm-6">
		<a href="[[~10]]" class="le-button inverse">Корзина</a>
	  </div>
	  <div class="col-xs-12 col-sm-6">
		<a href="checkout.html" class="le-button">Оформить заказ</a>
	  </div>
	</div>
  </div>
</li>	
{/if}

Заметили, что он получается подобный крупной корзине? Теперь на нужно создать несколько ресурсов, к которым мы будем обращаться по ajax. Обычно для таких ресурсов я создаю контейнер “технические ресурсы”/”ajax” и создаем ресурс с пустым шаблоном, отключаем текстовый редактор на вкладке настройки.

Рализация корзины в miniShop2

В содержимом ресурса вызываем уже знакомы сниппет:

[[!msCart?tpl=`toggleCartTpl` &sortdir=`DESC`]]

Только мы сменили сортировку, последние добавленные товары будут первыми. И нам осталось написать скрипт JS, который мы разместим в чанке “scripts”:

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

Ура! У нас работает всплывающая корзина! Делается все очень просто, не правда ли? На этом мы закончили реализацию наших корзин. Осталось дело за малым – настроить стили, а то они немного подслетели. До следующих уроков!

Реализуем корзину в miniShop2

0 Число голосов: 10
3
5
1
10

Комментарии ()

  1. Muxa 20 апреля 2017, 13:47 # 0
    Подскажите, как в в пустой корзине (при ее очистке пользователем) сделать редирект на определенную страницу, вместо сообщения «ваша корзина пуста»?
    1. Петропавловский Артем 20 апреля 2017, 14:02 # 0
      Смотрите, у miniShop2 есть события, на которые вы можете поставить свой обработчик. В вашем случае будет примерно такой:
      miniShop2.Callbacks.add('Cart.clean.success', 'restrict_cart', function() {
          location.href('ссылка для переадресации');
          return false;
      });
    2. Сергей 24 апреля 2017, 21:29 # 0
      как только дело к корзине подходит и у меня проблемы начинаются.Ничего, кто объясняет не пойму.Может мне лично как-то помножите?У вас видео со статьями не соответствует. И minichop2 теперь в снипетах находится.
      1. Сергей 24 апреля 2017, 23:40 # 0
        Можете мне по поэтапно объяснить.Я только учусь.Первое: какой чанк создать и что в него поместить?Второе: что входит в дефолтный чанк?Третье: какие чанки соединить?Мне просто не кому обратиться?Заранее благодарен!
        1. Петропавловский Артем 25 апреля 2017, 08:35 # 0
          Возможны платные консультации в скайпе.
          1. Сергей 25 апреля 2017, 10:41 # 0
            я не против оплаты. если цена разумна.сколько стоит консультация?
            1. Петропавловский Артем 25 апреля 2017, 11:06 # 0
              Ответил на почту.
              1. Денис 19 октября 2017, 12:55 # 0
                Здравствуйте! Скажите пожалуйста, можете скинуть на почту стоимость консультации. Спасибо!
                1. Юрий 30 ноября 2017, 06:02 # 0
                  и мне
                  1. Василий 06 июня 2019, 17:26 # 0
                    и мне
            2. Роман 27 апреля 2017, 12:52 # 0
              Артем, добрый день! А как можно очистить мини корзинку по клику? Буду очень благодарен =)
              1. Николай 08 июня 2017, 15:43 # 0
                <form method="post">
                            <button class="btn btn-default" type="submit" name="ms2_action" value="cart/clean">
                                <i class="glyphicon glyphicon-remove"></i> {'ms2_cart_clean' | lexicon}
                            </button>
                        </form>
              2. Александр Булатов 01 июня 2017, 11:42(Комментарий был изменён) # 0
                Артём, добрый день!А у меня почему то пишет в консоли Хрома такую ошибку Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. И при этом показывает белый экран через 5 секунд.
                1. Николай 13 июня 2017, 18:06 # 0
                  Подскажите, пожалуйста, по реализации кнопок ± в корзине
                  1. Петропавловский Артем 13 июня 2017, 18:20 # 0
                    У меня за это отвечает такой код:
                    // Quantity Spinner
                            $('.le-quantity a').click(function(e){
                                e.preventDefault();
                    			var elem = $(this).parent().parent().find('input.counter');
                    			var currentQty= elem.val();
                    
                                if( $(this).hasClass('minus') && currentQty>0){
                                    elem.val(parseInt(currentQty, 10) - 1);
                    				elem.trigger("change");
                                }else{
                                    if( $(this).hasClass('plus')){
                                        elem.val(parseInt(currentQty, 10) + 1);
                    					elem.trigger("change");
                                    }
                                }
                            });
                    Проверьте соответствие в файле assets/js/scripts.js примерно 316 строка
                    1. Николай 15 июня 2017, 11:43 # 0
                      Спасибо, путем некоторых правок починил
                  2. Александр 25 июля 2017, 11:56 # 0
                    $('.basket .ajax-data').html(data);
                    не совсем понятно куда пишется содержимое ответа, селекторы .basket .ajax-data нигде не встречаются.
                    1. Серёня 02 сентября 2017, 19:43 # 0
                      Автор немного лукавит, приводя неполный код, но в видео все есть!!))см 3:34
                    2. Вадим 28 июля 2017, 16:05 # 0
                      Добрый день! У меня на сайте после нажатия кнопки «купить», до обновления страницы, пишет (при клике на корзину), что корзина пуста. Как исправить, подскажите, пожалуйста. Сайт — http://shop.remonter.by/
                      1. Aleksey 09 сентября 2017, 15:25 # 0
                        Артем спасибо за уроки! Делал все по урокам все получилось, только вот выпадающая корзина не выпадает) Все проверил не работает scripts, а вот как его правильно настроить не знаю. Было бы хорошо если Вы более подробно рассказали, что от куда и куда берется). Думаю не только мне одному будет интересно.
                        1. Петропавловский Артем 09 сентября 2017, 18:32 # 0
                          Там должна быть связка JS — PHP посмотрите внимательней видео.
                          1. Aleksey 10 сентября 2017, 16:58 # 0
                            Понял в чем была причина! Мой файл jquery.js содержал ошибки, поэтому не работала выпадающая корзина. Спасибо Вам Артем ОГРОМНОЕ за наводку и за Ваши уроки!
                        2. Владимир 09 сентября 2017, 18:29 # 0
                          Артем, как можно к вам обратиться за платной технической помощью?
                          1. Петропавловский Артем 09 сентября 2017, 18:32 # 0
                            Да, конечно. Скайп — mot9i_ami или почта avp@dart.agency
                            1. Владимир 09 сентября 2017, 18:45 # 0
                              Отправил запрос в skype.
                          2. Алексей 04 октября 2017, 18:40 # 0
                            Здравствуйте Артем! Подскажите, как сделать так чтоб мини корзина выпадала не по клику а по наведению мыши. Спасибо!
                            1. Антон 25 января 2018, 09:23 # 0
                              Здравствуйте тоже интересует этот вопрос!
                              1. Петропавловский Артем 25 января 2018, 09:38 # 0
                                Нужно изменить скрипт обработчика на такой:
                                $(document).on('mouseover', '#msMiniCart', function(e) {
                                	e.preventDefault();
                                	$.ajax({  
                                	  type: "POST",  
                                	  url: '[[~13]]', 
                                	  data: {parent: '[[*id]]'},
                                	  success:  function(data) { 
                                		if (data){
                                		  $('.basket .ajax-data').html(data);
                                		}else{
                                		  miniShop2.Message.error('Что-то пошло не так, попробуйте позже!');
                                		}
                                	  } 
                                	}); 
                                  });
                                Я тут поменял событие click на mouseover в первой строке. Также нужно добавить стили:
                                a#msMiniCart.dropdown-toggle:hover + ul.dropdown-menu {
                                    display: block;
                                  }
                                И должно выпадать при наведении мыши. Не забудьте после изменений почистить кеш (CTRL + F5).
                                1. Алексей 27 января 2018, 18:07(Комментарий был изменён) # 0
                                  удален
                                  1. Егор 08 мая 2018, 12:49 # 0
                                    Здравствуйте, сделал все как вы описали, корзина выпадает при наведении, но нажать на кнопку оформить заказ или перейти в корзину не получается, так как она пропадает если курсор уходит от кнопки. Подскажите как исправить данную проблему? Спасибо
                              2. Денис 29 января 2018, 17:54 # 0
                                Подскажите что я делаю не так. Вместо куска кода toggleCartTpl вываливается вся страница по ajax, ну и как следствие белый экран. Может кто сталкивался с этим?Скрипт:
                                $(function(){
                                    $("#msMiniCart").on("click", function(e){
                                	    e.preventDefault();
                                    	$.ajax({  
                                    	  type: "POST",  
                                    	  url: '[[~67]]', 
                                    	  data: {parent: '[[*id]]'},
                                    	  success:  function(data) { 
                                    		if (data){
                                    		  $('#msMiniCart .ajax-data').html(data);
                                    		}else{
                                    		  miniShop2.Message.error('Что-то пошло не так, попробуйте позже!');
                                    		}
                                    	  } 
                                    	}); 
                                    });
                                });
                                
                                1. Александр 27 апреля 2018, 12:27 # 0
                                  В чанке toggleCartTpl нужно добавить id для удаления товаров из миникорзины
                                  1. Александр 27 апреля 2018, 12:30(Комментарий был изменён) # 0
                                    В чанке toggleCartTpl нужно добавить id продукта для возможности удаления из миникорзины (удаляет из корзины, а в миникорзине товар отображается) В li добавить id="{$product.key}"
                                    1. Роман 14 мая 2018, 18:59 # 0
                                      Спасибо за уроки!Все излазил так и не понял.При нажатии на корзину появляется пустой блок(видно что пытается вызвать, но он не заполненный), потом идет переход на корзину и страница пустая, пока не обновишь.Ну да ладно, ajax не нужен, сделал, чтоб на страницу корзины переходило. Еще раз спасибо за уроки!!!
                                      1. Яшный 01 августа 2018, 21:42 # 0
                                        А как вы сделали при нажатии открытие коорзины? Как убрали выпадающую и сделали переход на другое урл?
                                      2. den812 13 июня 2018, 19:08(Комментарий был изменён) # 0
                                        Правильный кусок JS
                                        //den812++
                                        			var elem= $(this).parent().parent().find('input.counter');
                                        			var currentQty= elem.val();
                                        
                                                    //var currentQty= $(this).parent().parent().find('input.counter').val();
                                        
                                        
                                                    if( $(this).hasClass('minus') && currentQty>0){
                                                        //$(this).parent().parent().find('input').val(parseInt(currentQty, 10) - 1);
                                        				elem.val(parseInt(currentQty, 10) - 1);
                                        				elem.trigger("change");
                                                    }else{
                                                        if( $(this).hasClass('plus')){
                                                            //$(this).parent().parent().find('input').val(parseInt(currentQty, 10) + 1);
                                        					elem.val(parseInt(currentQty, 10) + 1);
                                        					elem.trigger("change");
                                                        }
                                                    }
                                        			//den812--
                                        1. Дмитрий 12 июля 2018, 13:02 # 0
                                          У меня при нажатии на корзину она только начинает открываться тут же переход причем не меняется адрес в адресной строке и пытается загрузить страницу пустую в чем проблема? Когда я создавал ресурс мини корзины у вас на видео при нажатии на просмотр пишет корзина пуста у меня ничего не пишет. Все файлы проверял вроде всё правильно.
                                          1. Яшный 01 августа 2018, 21:41 # 0
                                            Решили проблему?
                                          2. Никита 25 июля 2018, 22:54 # 0
                                            А подскажите, как сделать, чтобы при изменении счетчика товара в самой корзине по AJAX выводился не только $total.cost, но и общая цена за каждый отдельный товар ( что-то типа {$product.price * $product.count} ). Произведение кол-ва товаров и цены за 1 товар работает, но только с перезагрузкой страницы, а надо по AJAX. Заранее спасибо :)
                                            1. Яшный 01 августа 2018, 21:28 # 0
                                              Подскажите, когда реализовую выпадающую корзину, ждет сайт секунду и идет загрузка белой страницы. Не имею пнятя как исправить!!! Все делаю как на видео, а ничего не выходит
                                              1. Андрей Перевезенцев 02 августа 2018, 14:36 # 0
                                                Аналогичный вопрос, корзина на AJAX не работает.
                                                1. Андрей Перевезенцев 02 августа 2018, 15:51 # 0
                                                  разобрался, все работает!Проверяйте работоспособность в разных браузерах.У меня в гугл хром был белый экран при наведении на мини корзину, в опере все работает отлично.
                                              2. РОМАН 28 ноября 2018, 02:44 # 0
                                                Приветствую! Спасибо за статью, корзина получилась рабочая! Не получается доработать ее… хочу добавить обновление выпадающей корзины при удалении из нее товара, но кнопка удаления перестает работать, при внесении ее класса в копию скрипта ajax. Помогите с решением проблемы!
                                                1. РОМАН 28 ноября 2018, 23:01(Комментарий был изменён) # 0
                                                  Решил сам: Добавить в блоку {foreach $products as $product} id="{$product.key}" А В скрипт вместо click, hover
                                                2. Александр 24 августа 2019, 17:06 # 0
                                                  Обнаружил ошибку в вашем тестовом сайте http://ecom2.dart.agency/ В сплывающей корзине не удаляются товары при клике на крестик. Как это исправить?
                                                  1. Максим 25 августа 2019, 14:53 # 0
                                                    Выше отвечали уже: В чанке toggleCartTpl нужно добавить id продукта для возможности удаления из миникорзины (удаляет из корзины, а в миникорзине товар отображается) В li добавить id="{$product.key}"
                                                    1. Евгений 22 сентября 2019, 14:02(Комментарий был изменён) # 0
                                                      Здравствуйте. извиняюсь, если не совсем по теме. не могу пока найти ответа, хотя ищу уже давно и много где, может здесь :) нам надо на странице корзины (в чанке cartOuter) добавить условие наличия в корзине товаров с определёнными родителями. Феном наверно. т.е. если есть, то мы показываем доп.блок, если нет, блок не показываем. если делаю так:
                                                      {if $product.parent == 17 || $product.parent == 18 || $product.parent == 19 || $product.parent == 20 || $product.parent == 23 || $product.parent == 249 || $product.id == 311 || $product.id == 312 || $product.id == 313}
                                                      то применяется это только к последнему добавленному товару. если добавляю:
                                                      {foreach $products as $product}
                                                      то естественно доп.блоков появляется столько, сколько товаров с нужными родителями есть в корзине, нам же нужно, чтобы этот блок был один хоть для одного товара, хоть для многих. может кто-то подсказать ответ на этот (казалось бы простой) вопрос?
                                                      1. Filimonov 15 октября 2019, 10:56 # 0
                                                        В опере ajax корзина срабатывает, а в chrom перекидывает на пустую страницу. Кто решил проблему?
                                                        1. Filimonov 15 октября 2019, 13:23 # 0
                                                          Решение: Просто выйти из админки, так как frontendmanager добавляет лишний код если ты залогинен. Ответ есть на Youtube
                                                        2. Filimonov 15 октября 2019, 13:30 # 0
                                                          Так же есть проблема с подгрузкой картинки в ajax корзине, от того что снипел lazyload добавляет к src свой data-src — лечится удалением класса «lazy» у миниатюр картинки.
                                                          1. Juniorbuka 05 июля 2020, 18:31(Комментарий был изменён) # 0
                                                            Спасибо за уроки!!!
                                                            1. Егор 01 сентября 2020, 01:07(Комментарий был изменён) # 0
                                                              капец, идея хорошая но пипец запутанная
                                                              1. Григорий 06 ноября 2020, 19:29(Комментарий был изменён) # 0
                                                                Спасибо за уроки!)Нашел ошибку: Теперь на нужно создать несколько ресурсов, к которым мы будем обращаться по ajax.
                                                                1. Сергей 17 декабря 2020, 16:52 # 0
                                                                  Добрый день. У меня проблема, что при клике на миникорзину, вместо подгрузки списка товаров в ajax-data, у меня очищается текущая страница.Не могу понять в чем дело.
                                                                  1. Сергей 17 декабря 2020, 17:51 # 0
                                                                    В тоже время если открыть ресурс с моей мини корзиной, то она открывается, товары в ней отображаются
                                                                    1. Сергей 17 декабря 2020, 17:53 # 0
                                                                      Перечитал комментарии, ответ уже был. Проблем в frontendmanager.Нужно выйти из админки и тогда мини корзина подгружается правильно.
                                                                  2. Роман 19 марта 2021, 23:38 # 0
                                                                    На bootstrap 5 не работает одни ошибки.Не работает не товар не чего (
                                                                    1. Петропавловский Артем 20 марта 2021, 07:47 # 0
                                                                      Дело не в Bootstrap 5. Вы некорректно настроили селекторы. Посмотрите исходный чанк, также советую посмотреть файл assets/components/minishop2/js/web/default.js, где вы сможете понять какие селекторы используются скриптом. Я могу, конечно, написать как корректно настроить, но, думаю, вам полезнее будет разобраться самому.
                                                                    2. Татьяна 22 марта 2021, 20:36 # 0
                                                                      Хотелось бы уточнить, может вы подскажете в чем дело.Выпадающая миникорзина работает, вроде все норм, но, когда обновляешь страницу (с товаром в корзине) — она обнуляет цифры + товара нет. Хотя на странице обычной корзины товар есть. Может подскажете с чем это мб связано?PS/ Выход из frontend-а не помогает, не с этим связано.Заранее, спасибо.
                                                                      1. Петропавловский Артем 23 марта 2021, 08:26 # 0
                                                                        Вызов снипета должен быть НЕкешированый
                                                                        1. Татьяна 23 марта 2021, 09:48 # 0
                                                                          к сожалению не помогает. т.е. товары в корзине, они лежат и при клике на корзину все появляется. но если обновить страницу или перейти на 2ую стр каталога, то на мини корзине появляются 0-0 хотя товары в корзине и их можно посмотреть.
                                                                          1. Петропавловский Артем 23 марта 2021, 09:52 # 0
                                                                            Код реализации скиньте (вызов снипета, чанк миникорзины). Мне кажется вы с селекторами напутали.
                                                                      2. Татьяна 23 марта 2021, 10:08 # 0
                                                                        вы знаете, все по вашему уроку делала, ничего не меняла (кроме названий чанков), думала «пока разберусь, а потом посмотрим».код миникорзины
                                                                        <a class="dropdown-toggle {$total_count > 0 ? 'full' : ''}" data-toggle="dropdown" href="[[~40]]" id="msMiniCart">
                                                                          <div class="empty">
                                                                        	<div class="basket-item-count">
                                                                        	  <span class="count ms2_total_count">0</span>
                                                                        	  <img src="assets/images/icon-cart.png" alt="" />
                                                                        	</div>	
                                                                        	<div class="total-price-basket">
                                                                        	  <span class="lbl">Корзина:</span>
                                                                        	  <span class="total-price">
                                                                        		<span class="value ms2_total_cost">0</span><i class="fa fa-ruble"></i>
                                                                        	  </span>
                                                                        	</div>
                                                                          </div>
                                                                          <div class="not_empty">
                                                                        	<div class="basket-item-count">
                                                                        	  <span class="count ms2_total_count">{$total_count}</span>
                                                                        	  <img src="assets/images/icon-cart.png" alt="" />
                                                                        	</div>	
                                                                        	<div class="total-price-basket">
                                                                        	  <span class="lbl">Корзина:</span>
                                                                        	  <span class="total-price">
                                                                        		<span class="value ms2_total_cost">{$total_cost}</span><i class="fa fa-ruble"></i>
                                                                        	  </span>
                                                                        	</div>
                                                                          </div>
                                                                        </a>
                                                                        
                                                                        <ul class="ajax-data">
                                                                        
                                                                        </ul>
                                                                        вызов сниппета тоже такой же
                                                                        [[!msCart? &tpl=`MYmsToggleMiniCart`]]
                                                                        js только немного поменяла, так как у меня контейнера с классом basket нет, то его только удалила:
                                                                        $(document).on('click', '#msMiniCart', function(e) {
                                                                        	e.preventDefault();
                                                                        	$.ajax({  
                                                                        	  type: "POST",  
                                                                        	  url: '[[~42]]', 
                                                                        	  success:  function(data) { 
                                                                        		if (data){
                                                                        		  $('.ajax-data').html(data);
                                                                        		}else{
                                                                        		  miniShop2.Message.error('Что-то пошло не так, попробуйте позже!');
                                                                        		}
                                                                        	  } 
                                                                        	}); 
                                                                          });
                                                                        1. Татьяна 23 марта 2021, 10:12 # 0
                                                                          такое чувство что оно куки чистит при обновлении страницы или перерходе на 2ую стр каталога. потому что только нули появляются, а товар в корзине лежит, его можно открыть. единственно не понимаю почему они обнуляются, думала может с браузером что не так, ан нет, все то же.
                                                                          1. Петропавловский Артем 23 марта 2021, 10:16 # 0
                                                                            Снипет разве не msMiniCart должен быть? Вы msCart вызываете
                                                                            1. Татьяна 23 марта 2021, 10:18 # 0
                                                                              да, все верно, все починилось)) куда спасибо на печеньки вам скинуть?)
                                                                              1. Петропавловский Артем 23 марта 2021, 10:21 # 0
                                                                                Здесь можете https://sobe.ru/na/artiom_petropavlovsky. А так внимание наше все, бывает, что в коде вместо английской буквы «с» русскую напишешь и голову ломаешь, что не так.
                                                                        2. Татьяна 23 марта 2021, 10:25 # 0
                                                                          да-да, сколько раз было такое при учебе))а у вас случайно вебмани нет? а то вам привет будет из Беларуси, я просто не смогу пополнить кошелек по ссылке.
                                                                          1. Петропавловский Артем 23 марта 2021, 10:40 # 0
                                                                            R493549799224 — webmoney
                                                                            1. Татьяна 23 марта 2021, 11:46 # 0
                                                                              Спасибо вам за уроки и за помощь!
                                                                          2. Ольга 18 июля 2021, 23:24 # 0
                                                                            При ajax у меня не срабатывают input count стандартный в корзине. Не подскажите, почему?
                                                                            <form method="post" class="ms2_form" role="form">
                                                                                                            <input type="hidden" name="key" value="{$product.key}"/>
                                                                                                                    <input type="number" name="count" value="{$product.count}" class="form-control"/>
                                                                                                              </form>
                                                                            
                                                                            1. Александр 14 декабря 2021, 00:17 # 0
                                                                              Добрый день.Возможно ли сделать в индикаторе миникорзины не количество товаров, а количество позиций. Допустим пользователь заказал:Труба диам. 30 мм — 100 мТруба диам. 50 мм — 200 мТруба диам. 76мм — 300мТо в стандартном виде в индикаторе будет висеть 600. А каким образом и ли можно поменять на 3 (кол-во позиций)?Спасибо
                                                                              1. Петропавловский Артем 14 декабря 2021, 12:28 # 0
                                                                                Вы можете переопределить метод cart->status() с помощью своего класса. Там достаточно будет дописать две строки здесь:
                                                                                        $status = array(
                                                                                            'total_pos' => 0,
                                                                                            'total_count' => 0,
                                                                                            'total_cost' => 0,
                                                                                            'total_weight' => 0,
                                                                                        );
                                                                                        foreach ($this->cart as $item) {
                                                                                            if (empty($item['ctx']) || $item['ctx'] == $this->ctx) { 
                                                                                                $status['total_pos'] += 1;
                                                                                                $status['total_count'] += $item['count'];
                                                                                                $status['total_cost'] += $item['price'] * $item['count'];
                                                                                                $status['total_weight'] += $item['weight'] * $item['count'];
                                                                                            }
                                                                                        }    	
                                                                                
                                                                                И тогда вы сможете использовать [[+total_pos]] в своем чанке. Если вам не понятно как это работает, то вы можете взять платную консультацию в skype — я расскажу.
                                                                                1. Александр 14 декабря 2021, 13:15 # 0
                                                                                  Благодарю!В целом работает.Код выглядит так
                                                                                  $status = array(
                                                                                              'total_pos' => 0, //add pos count
                                                                                              'total_count' => 0,
                                                                                              'total_cost' => 0,
                                                                                              'total_weight' => 0,
                                                                                          );
                                                                                          foreach ($this->cart as $item) {
                                                                                              if (empty($item['ctx']) || $item['ctx'] == $this->ctx) {
                                                                                                  $status['total_pos'] += 1; //add pos count
                                                                                                  $status['total_count'] += $item['count'];
                                                                                                  $status['total_cost'] += $item['price'] * $item['count'];
                                                                                                  $status['total_weight'] += $item['weight'] * $item['count'];
                                                                                              }
                                                                                          }
                                                                                  
                                                                                  Миникорзина
                                                                                  <a href="[[~4659]]">
                                                                                      <div id="msMiniCart" class="{$total_pos > 0 ? 'full' : ''}">
                                                                                          <div class="miniCart__basket">
                                                                                              <div class="miniCart__basket-circle empty">
                                                                                                  <span>0</span>
                                                                                              </div>
                                                                                              <div class="miniCart__basket-circle not_empty">
                                                                                                  <!--<span class="ms2_total_count">{*$total_count*}</span>-->
                                                                                                  <span class="ms2_total_count">{$total_pos}</span>
                                                                                              </div>
                                                                                          </div>
                                                                                          
                                                                                      </div>
                                                                                  </a>
                                                                                  
                                                                                  Но происходит всё так: при добавлении допустим 10 метров трубы в значке появляется число 10. По клику на корзину, когда переходим на страницу при загрузке её уже получается 1
                                                                                  1. Петропавловский Артем 14 декабря 2021, 13:42(Комментарий был изменён) # 0
                                                                                    Вам еще нужно изменить default.js у miniShop2. Примерно в строке 295 (метод miniShop2.Cart.status) прописать так:
                                                                                    $(miniShop2.Cart.totalPos).text(status['total_pos']);
                                                                                    
                                                                                    И не забыть про селектор (строка 236 метод miniShop2.Cart.setup):
                                                                                    miniShop2.Cart.totalPos = '.ms2_total_pos';
                                                                                    
                                                                                    Ну и в чанке класс поменяйте) Файл лучше создать новый и в системных настройках (ms2_frontend_js) его переопределить, иначе после обновы перезапишется
                                                                                    1. Александр 14 декабря 2021, 13:45 # 0
                                                                                      Решил изменением файла assets/components/minishop2/js/web/default.js
                                                                                      setup: function () {
                                                                                                  miniShop2.Cart.cart = '#msCart';
                                                                                                  miniShop2.Cart.miniCart = '#msMiniCart';
                                                                                                  miniShop2.Cart.miniCartNotEmptyClass = 'full';
                                                                                                  miniShop2.Cart.countInput = 'input[name=count]';
                                                                                                  miniShop2.Cart.totalWeight = '.ms2_total_weight';
                                                                                                  miniShop2.Cart.totalCount = '.ms2_total_count';
                                                                                                  miniShop2.Cart.totalCost = '.ms2_total_cost';
                                                                                                  miniShop2.Cart.totalPos = '.ms2_total_pos'; // add pos count
                                                                                              },
                                                                                      
                                                                                      status: function (status) {
                                                                                                  if (status['total_count'] < 1) {
                                                                                                      location.reload();
                                                                                                  }
                                                                                                  else {
                                                                                                      //var $cart = $(miniShop2.Cart.cart);
                                                                                                      var $miniCart = $(miniShop2.Cart.miniCart);
                                                                                                      if (status['total_count'] > 0 && !$miniCart.hasClass(miniShop2.Cart.miniCartNotEmptyClass)) {
                                                                                                          $miniCart.addClass(miniShop2.Cart.miniCartNotEmptyClass);
                                                                                                      }
                                                                                                      $(miniShop2.Cart.totalWeight).text(miniShop2.Utils.formatWeight(status['total_weight']));
                                                                                                      $(miniShop2.Cart.totalCount).text(status['total_count']);
                                                                                                      $(miniShop2.Cart.totalPos).text(status['total_pos']); // add pos count
                                                                                                      $(miniShop2.Cart.totalCost).text(miniShop2.Utils.formatPrice(status['total_cost']));
                                                                                                      if ($(miniShop2.Order.orderCost, miniShop2.Order.order).length) {
                                                                                                          miniShop2.Order.getcost();
                                                                                                      }
                                                                                                  }
                                                                                              },
                                                                                      
                                                                                      И чанк миникорзины
                                                                                      <a href="[[~4659]]">
                                                                                          <div id="msMiniCart" class="{$total_pos > 0 ? 'full' : ''}">
                                                                                              <div class="miniCart__basket">
                                                                                                  <div class="miniCart__basket-circle empty">
                                                                                                      <span>0</span>
                                                                                                  </div>
                                                                                                  <div class="miniCart__basket-circle not_empty">
                                                                                                      <!--<span class="ms2_total_count">{*$total_count*}</span>-->
                                                                                                      <span class="ms2_total_pos">{$total_pos}</span>
                                                                                                  </div>
                                                                                              </div>
                                                                                          </div>
                                                                                      </a>
                                                                                      
                                                                                      Вдруг кому пригодится. Ещё раз благодарю
                                                                                      1. Петропавловский Артем 14 декабря 2021, 13:54 # 0
                                                                                        Файл лучше создать новый и в системных настройках (ms2_frontend_js) его переопределить, иначе после обновы перезапишется
                                                                                2. Kirill 11 января 2022, 09:21 # 0
                                                                                  Добрый день!А как реализовать минимальное количество товара к примеру я продаю оптом и у менять есть товар который продается минимум 500 шт. и другой минимум 1000 шт. Как возможно это реализовать?
                                                                                  1. Олег 28 января 2022, 13:19 # 0
                                                                                    Кто-нибудь разобрался как сделать, чтобы в {$product.cost} выводилась цена с учетом изменения количества единиц товара?
                                                                                    1. Петропавловский Артем 28 января 2022, 13:48 # 0
                                                                                      Я выше показывал пример. В этой ветке.
                                                                                      1. Олег 28 января 2022, 14:22(Комментарий был изменён) # 0
                                                                                        Вы меня неправильно поняли или я не корректно выразился. Кастомные плюс и минус не изменяют {$product.cost} в большой корзине. Выше кто-то уже спрашивал про это. Решил внесением изменений в ваш скрипт. Хотелось бы узнать ваше мнение, не сломаю ли я где-нибудь этим логику корзины?
                                                                                        $('.basket__item-count a').click(function(e){
                                                                                            e.preventDefault();
                                                                                            var elem = $(this).parent().parent().find('input.counter');
                                                                                            var currentQty= elem.val();
                                                                                            
                                                                                            var productCost = $(this).parent().parent().parent().find(".basket__item-cost .ms2_cost");
                                                                                            var productPrice = $(this).parent().parent().parent().find(".basket__item-price span").text();
                                                                                            productPrice = +productPrice;
                                                                                        
                                                                                            if( $(this).hasClass('minus') && currentQty>0){
                                                                                                elem.val(parseInt(currentQty, 10) - 1);
                                                                                                elem.trigger("change");
                                                                                                productCost.html(productPrice * currentQty - productPrice);
                                                                                                
                                                                                            }else{
                                                                                                if( $(this).hasClass('plus')){
                                                                                                    elem.val(parseInt(currentQty, 10) + 1);
                                                                                        	          elem.trigger("change");
                                                                                        	          productCost.html(productPrice * currentQty + productPrice);
                                                                                                }
                                                                                            }
                                                                                        });
                                                                                        
                                                                                        1. Петропавловский Артем 28 января 2022, 14:30 # 0
                                                                                          Я вас верно понял. В данном случае вы сможете менять количество товара и стоимость общая будет меняться. Но стоит вам обновить страницу, то общая стоимость будет равна цене товара. Поэтому я вас отослал на верхнюю ветку. А этим кодом вы не сломаете корзину. Единственное, от себя я бы посоветовал не использовать метод parent(), а использовать к примеру метод closest(). Тогда код будет следующий:
                                                                                          $('.basket__item-count a').click(function(e){
                                                                                              e.preventDefault();
                                                                                              var elem = $(this).closest('.basket__item-count').find('input.counter');
                                                                                              var currentQty= elem.val();
                                                                                              
                                                                                              var productCost = $(this).closest('.basket__item').find(".basket__item-cost .ms2_cost");
                                                                                              var productPrice = $(this).closest('.basket__item').find(".basket__item-price span").text();
                                                                                              productPrice = +productPrice;
                                                                                          
                                                                                              if( $(this).hasClass('minus') && currentQty>0){
                                                                                                  elem.val(parseInt(currentQty, 10) - 1);
                                                                                                  elem.trigger("change");
                                                                                                  productCost.html(productPrice * currentQty - productPrice);
                                                                                                  
                                                                                              }else{
                                                                                                  if( $(this).hasClass('plus')){
                                                                                                      elem.val(parseInt(currentQty, 10) + 1);
                                                                                          	          elem.trigger("change");
                                                                                          	          productCost.html(productPrice * currentQty + productPrice);
                                                                                                  }
                                                                                              }
                                                                                          });
                                                                                          Так вы избавитесь от вложенности и код переиспользовать будет проще.
                                                                                          1. Олег 28 января 2022, 14:41 # 0
                                                                                            Спасибо за помощь!
                                                                                            1. Сергей 15 августа 2024, 09:59 # 0
                                                                                              Пытаюсь адаптировать этот скрипт для использования в каталоге товаров.При изменении количества у меня пропадает цена, т.е. заменяется на пустоту.Как понимаю, скрипт не может получить цену конкретного товара.Подскажи как это поправить?
                                                                                      2. David 19 апреля 2022, 09:54(Комментарий был изменён) # 0
                                                                                        Здраствуйте! Подскажите пожалуйста, как вывести Созданную мною Опцию в Корзину? Ключ: material
                                                                                        1. Евгений 26 октября 2022, 21:36 # 0
                                                                                          Там в скрипте ошибкав статье так:$('.basket .ajax-data').html(data);а надо так$('.basket.ajax-data').html(data);

                                                                                          Наши клиенты

                                                                                          Многие компании уже доверяют нам. Будьте в их числе!

                                                                                          Хотите реализовать проект?

                                                                                          Контакты

                                                                                          Напишите нам - мы расскажем вам много интересного!


                                                                                          Пермь, шоссе Космонавтов 252, офис 218