Как сделать кнопку «очистить корзину» в 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(){, и скрипт заработает как нужно.
Для того, чтобы выразить экспертное мнение, нужно авторизироваться