UMI.CMS. Добавление товара в корзину без перезагрузки страницы или Ajax добавление товара в корзину
Данная статься будет посвящена тому, как сделать добавление товара в корзину без перезагрузки страницы в системе управления UMI.CMS или по другому AJAX добавления товара в корзину.
Сразу хочу отметить, что разработчики UMI.CMS об этом уже полностью позаботились, а нам остается только настроить это под себя. Проще простого ничего нет. Единственное, возникает сложность, если вы используете tpl шаблонизатор, нет скриптов, которые отвечают за добавление товара на AJAX.
За то, что у вас нет файлов, вы не беспокоитесь, все прилаживаю к данной статье.
Итак поехали.
Вся статья будет делиться на три части
- Добавление товара в корзину
- Обновление информации в мини корзине
- Всплывающее уведомление о том, что товар добавлен в корзину UMI.CMS
Первым делом нужно скачать архив с файлами и залить скачанные файлы которые отвечает за работоспособность себе на сайт в папку. Если у вас старая версия UMI.CMS, то в папку /js/. Если же у вас новая версия, /template/название_шаблона/js/
В итоге у вас должен быть путь:
/js/basket/ или /template/название_шаблона/js/basket/
Теперь, если вы знакомились с уроком - UMI.CMS. Как сделать вывод всех товаров из разделов каталога, то вам нужно править catalog-all-products.tpl, если же это ваш шаблон, то вам просто нужно добавить в файл строчку:
<script type="text/javascript" src="/templates/bestinstrument/js/basket/__common.js"></script>
После того, как все готово, нужно поправить файл __common.js, в котором есть строка инициализирующая загрузку дополнительных файлов site.utils.js.init, в ней нужно поправить путь и добавить путь к вашему шаблону.
site.utils.js.init([
'/js/client/basket.js', // этот файл есть по умолчанию в сборках
'/templates/demoold/js/basket/basket.js', // заменить demoold на название вашего шаблона
'/templates/demoold/js/basket/forms.js', // заменить demoold на название вашего шаблона
'/templates/demoold/js/basket/message.js', // заменить demoold на название вашего шаблона
'/templates/demoold/js/basket/captcha.js' // заменить demoold на название вашего шаблона
]);
Идем далее...
Теперь нужно немного модернизировать макрос, которые выводит ссылку на добавление товара в корзину. Для этого открываем файл catalog-items.tpl, если вы пришли из этого урока, если нет то вам нужно править свой файл. Находите примерно вот такие строчки:
$FORMS['objects_block_line'] = <<<END
%catalog viewObject(%id%, 'preview')%
END;
В данном макросе происходит подключение шаблона, который генерирует вывод мини карточки товара UMI.CMS. Путь \templates\demoold\tpls\catalog\, открываете файл preview.tpl. Далее нужно найти секцию $FORMS['view_block'] = <<<END, и там подключением макроса:
%emarket basketAddLink(%id%)%
и заменить макрос на:
<a class="basket_list" id="add_basket_%id%" href="%pre_lang%/emarket/basket/put/item/%id%/">Добавить в корзину</a>
Здесь ключевыми моментами является идентификатор id="add_basket_%id%" и класс class="basket_list" они передают информацию, которую нужно добавить в корзину. На случай, если у пользователя не будет работать javascript, то для него будет спасительная строчка href="%pre_lang%/emarket/basket/put/item/%id%/"
Первая часть завершена, и если все сделано правильно, то товар добавляется в корзину без перезагрузки страницы.
Далее нужно сделать обновление информации в мини корзине, т.е. обновить добавленный в нее товар.
Для этого нужно открыть файл, который отвечает за вывод мини корзины. Так как я использую стандартную сборку UMI.CMS с шаблоном demoold, я открываю файл basket.tpl, который находится в папке \templates\demoold\tpls\emarket\. У вас это может быть совсем другой файл.
В файле basket.tpl (у вас может быть свой), находите секцию $FORMS['order_block'] = <<<END, эта секция генерирует вывод товаров лежащих в корзине пользователя. У меня она имеет следующее содержание:
$FORMS['order_block'] = <<<END</pre> <div class="block" id="rubricator"> <h2>У Вас в корзине</h2> <ul>%items%</ul> <strong> Всего товаров: %total-amount% Общая стоимость: %total-price% </strong> <a href="%pre_lang%/emarket/cart/">Перейти в корзину</a></div> <pre> END;
И теперь нужно привести корзину к единому содержанию. Что я имею ввиду. По умолчанию в данном js файле информация о товаре выводится в следующем виде: [кол-во] шт товаров на сумму [сумма] руб (5 шт товаров на сумму 794 руб). Поэтому шаблон должен содержать следующий вид:
$FORMS['order_block'] = <<<END</pre> <div class="block" id="rubricator"> <h2>У Вас в корзине</h2> %total-amount% шт товаров на сумму %total-price% <a href="%pre_lang%/emarket/cart/">Перейти в корзину</a></div> <pre> END;
Ключевым моментом в данном кусочке кода является class="basket_info_summary", сообщающий скрипку что и где обновить =). На странице данный код не должен более повторяться.
После того, как вы все сделали, то товар добавляется в корзину UMI.CMS на AJAX и информация обновляется в мини корзине.
Теперь осталось добавить вывод уведомление пользователю о том, что товар успешно добавлен.
Я не буду выдумывать ничего военного, просто сделаю вывод jQuery popUp с двумя ссылками «продолжить покупки» и «перейти в корзину». Нсли вы захотите, модифицировать данный скрипт можно различными способами, я допустим делал различного вида popUp-ы на страницах, различное отображение мини корзины, различные способы добавления товара в корзину и т.д. В общем все что хотите то и делайте, главное, чтобы у вас и у вашего заказчика было хорошее воображение 😉
Итак поехали.
Нужно открыть файл basket.js, вы его скачали на первом шаге, и найти следующий участок кода, строка 31:
if (detect_options.amount) {
var add_basket_button = jQuery('#add_basket_' + detect_options.id);
/*
* Добавление в корзину, при нажатие на <a class="basket_list b-content_category-item-zakaz" id="add_basket_%id%"></a>Заказать
*/
// здесь, если у вас класс привязан к тегу <a>
if (add_basket_button[0].tagName.toUpperCase() == 'A') {
add_basket_button.text(add_basket_button_text + ' (' + detect_options.amount + ')');
}
...
И чуть ниже строки:
add_basket_button.text(add_basket_button_text + ' (' + detect_options.amount + ')');
Добавляете строчку:
site.basket.popup(id);
В этой строке мы делаем обращение к функции popup. Пока этой функции нет файле, ее нужно добавить. Для этого опускаетесь в самый конец файла и добавляете функцию:
site.basket.popup= function(id) {
var winW = jQuery(window).width();
var winH = jQuery(window).height();
var objW = 462;
var objH = 157;
var left = (winW / 2) - (objW / 2);
var top = (winH / 2) - (objH / 2);
// Темная подложка
jQuery('<div id="b-success-added-mask" style="display: none;"></div>').css({
"width" : "100%",
"height" : winH,
"opacity" : 0.5,
"position" : "fixed",
"background" : "black",
"top" : 0,
"left": 0
}).appendTo("body").fadeIn();
// Окно с блоком
jQuery('\
<div id="b-success-added" class="b-success-added" style="display: none;"> \
<div class="clear"></div> \
<a href="javascript: void(0)" titlt="Купить еще" class="b-success-added__continue">← Купить еще</a> \
<a href="/emarket/cart/" title="Оформить заказ" class="b-success-added__order">Оформить заказ →</a> \
<div class="clear"></div> \
</div> \
').css({
"position" : "fixed",
"left" : left,
"top" : top,
"width": "400px",
"padding": "10px",
"border" : "1px solid #fff",
"text-align" : "center",
"font-size" : "20px",
"background" : "#CCCCCC"
}).appendTo("body").fadeIn();
// Удаление\скрытие блоков
jQuery('.b-success-added__continue').live("click", function (e) {
e.preventDefault();
jQuery("#b-success-added, #b-success-added-mask").fadeOut("fast", function() {
jQuery(this).remove()
});
})
};
Итак, после этих не слишком сложных махинаций реализована функция добавления товара в корзину UMI.CMS без перезагрузки страницы.
Источники вдохновения и ссылки на скачивание:
Оригинальная статья на wiki.umisoft.ru
Модифицированные файлы basket.js
Кстати я написал статью, о том, как добавить товар к сравнению без перезагрузки страницы