ИНТЕРНЕТ-МАГАЗИН / Сообщение при добавлении товара в корзину

Заметка создана: 14 января 2025 г.

1. Код кнопки, которая добавляет товар в корзину:

<button type="button" class="btn" data-item-id="{@id}" onclick="return $.bootstrapAddIntoCart('/shop/cart/', $(this).data('item-id'), 1)" tabindex="0">
        <span>
          <i class="fa fa-shopping-bag"></i>
        </span>
        <span>В корзину</span>
</button>

2. Размещаем в макете код модального окна, которое будет показываться при добавлении товара в корзину:

<div class="modal fade" id="modalCart" tabindex="-1" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content">
          <div class="modal-header"><button class="close" type="button" data-dismiss="modal"></button>
             <h6 class="modal-title" id="myModalLabel">Товар добавлен в корзину</h6>
          </div>
          <div class="modal-body text-center">
                 <a  class="close-reveal-modal btn btn-secondary" data-dismiss="modal">Продолжить покупки</a>
                <a href="/shop/cart/" class="btn btn-primary" >Перейти в корзину</a> 
         </div>
     </div>
  </div>
</div>

3. В макете шаблона во вкладке Javascript дорабатываем скрипт. Находим блок:

// Функции без создания коллекции
$.extend({
...	
     bootstrapAddIntoCartCallback: function(data, status, jqXHR)
	{
		$.loadingScreen('hide');
		$(this).html(data);
	},
...

и добавляем код, который активизирует модальное окно с сообщением. Получится так:

// Функции без создания коллекции
$.extend({
...	
	bootstrapAddIntoCartCallback: function(data, status, jqXHR)
	{
		$.loadingScreen('hide');
		$(this).html(data);
		
		$("body").append(data.html);   // Перемещаем модальное окно по DOM в конец body
		$("#modalCart").modal("show"); // активируем модальное окно
	},
...