Как сделать кнопку «очистить корзину» в shop-script

Сегодня поистине знаменательный момент для моего сайта: начинается цикл статей, посвященных фреймворку webasyst, ну а если точнее приложению shop script. В первой статье рассмотрим достаточно простую задачу: как можно реализовать кнопку «очистить корзину». Функция крайне простая, но почему-то разработчики Webasyst не желают включать её в стандартные темы дизайна. Что ж, проблем здесь точно не предвидится ( разве что курс рубля упадет еще и сильнее, и вам неожиданно перекроют доступ в интернет).

Итак, приступаем:

Переходим в папку wa-data/public/shop/themes/название вашей темы. Здесь нам потребуются два файла: cart.html и cart.js

Далее в файле cart.html добавляем элемент <div class="remove-all">Очистить корзину</div> в любое место шаблона, внутри тега <form>. Собственно расположение кнопки и её стилизация зависят от Вашего вкуса.

В файле cart.js добавляем следующий блок кода:

$(".remove-all").click(function(){
 $('.cart div.row').each(function(){ //проходимся по все элементам, которые содержат селектор row
  var id = $(this).data('id'); // получаем идентификатор элемента корзины
  $.post('delete/', {html: 1, id: id}, function (response) { // отправляем запрос на удаление из корзины нужного продукта
  if (response.data.count == 0) { //после удаления всех продуктов из корзины перезагружаем страницу
   location.reload();
  }
  }, "json");
 });
});

На этом все. Опять-таки, в зависимости от вашего вкуса можно, к примеру, вставлять иконку загрузки, при выполнении запросов. И еще один нюанс: не забывайте, что если у Вас собственный дизайн, то нужный идентификатор может присутствовать в элементе с другим селектором( не row), в этом случае останется лишь подправить $('.cart div.row').each(function(){, и скрипт заработает как нужно.