Работа с корзиной без перезагрузки TPL — различия между версиями
Romario (обсуждение | вклад) (Новая страница: «Корзина без перезагрузки в TPL шаблонизаторе. Самый простой и удобный способ реализовать …») |
Alexei (обсуждение | вклад) |
||
| (не показано 19 промежуточных версий 3 участников) | |||
| Строка 1: | Строка 1: | ||
| − | + | '''Проверенно на версии системы 2.9 редакция 21905''' | |
| + | Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта Demodizzy (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы '''"__common.js"''' и '''"basket.js"''' из папки ''~/templates/demodizzy/js/'' в свою систему. За добавление товара в корзину отвечают методы '''site.basket.add''' и '''basket.putElement''' из файла: '''"basket.js"''' | ||
| − | + | После того как мы перенесли файлы на сайт с TPL шаблонизатором, необходимо отредактировать метод '''site.utils.js.init''' в файле '''"__common.js"'''. В этом методе подключается файл '''"basket.js"''' и поэтому необходимо изменить адрес этого файла в соответствии с тем куда Вы его перенесли. В нашем случае после редактирования метод будет выглядеть так: | |
| − | + | <source lang="javascript"> | |
| + | site.utils.js.init([ | ||
| + | '/js/client/basket.js', | ||
| + | '/templates/demoold/js/basket.js', | ||
| + | ]); | ||
| + | </source> | ||
| + | |||
| + | Далее нужно подключить необходимые файлы. В шаблоне дизайна сайта вам нужно подключить файл '''"__common.js"''' | ||
Пример: | Пример: | ||
| − | + | <source lang="html4strict"> | |
| − | <source lang="javascript"> | + | <script type="text/javascript" src="/js/jquery/jquery.js"></script> |
| − | <script type="text/javascript" src="/js | + | <script type="text/javascript" src="/templates/demoold/js/__common.js"></script> |
</source> | </source> | ||
После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара. | После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара. | ||
| − | + | Данная ссылка описана в tpl шаблоне: ''~\tpls\emarket\default.tpl'' в блоке '''$FORMS['basket_add_link']'''. | |
| − | + | Скрипт работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт): | |
| + | <source lang="html4strict"> | ||
| + | $FORMS['basket_add_link'] = <<<END | ||
| + | <a href="#" id="add_basket_%id%" class="basket_list">Положить в корзину</a> | ||
| + | END; | ||
| + | </source> | ||
| + | Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ''~\tpls\emarket\basket.tpl'' добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу <div> блока | ||
| − | + | $FORMS['order_block']. | |
| − | |||
| − | |||
Пример: | Пример: | ||
| − | + | <source lang="html4strict"> | |
$FORMS['order_block'] = <<<END | $FORMS['order_block'] = <<<END | ||
<div id="rubricator" class="block basket basket_info_summary"> | <div id="rubricator" class="block basket basket_info_summary"> | ||
| + | </source> | ||
| + | После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу. | ||
| + | |||
| − | + | [[Категория:Модуль Интернет магазин]][[Категория:Верстка в TPL]] | |
Текущая версия на 13:33, 12 ноября 2015
Проверенно на версии системы 2.9 редакция 21905
Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта Demodizzy (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы "__common.js" и "basket.js" из папки ~/templates/demodizzy/js/ в свою систему. За добавление товара в корзину отвечают методы site.basket.add и basket.putElement из файла: "basket.js"
После того как мы перенесли файлы на сайт с TPL шаблонизатором, необходимо отредактировать метод site.utils.js.init в файле "__common.js". В этом методе подключается файл "basket.js" и поэтому необходимо изменить адрес этого файла в соответствии с тем куда Вы его перенесли. В нашем случае после редактирования метод будет выглядеть так:
site.utils.js.init([
'/js/client/basket.js',
'/templates/demoold/js/basket.js',
]);
Далее нужно подключить необходимые файлы. В шаблоне дизайна сайта вам нужно подключить файл "__common.js"
Пример:
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/templates/demoold/js/__common.js"></script>
После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара.
Данная ссылка описана в tpl шаблоне: ~\tpls\emarket\default.tpl в блоке $FORMS['basket_add_link'].
Скрипт работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
$FORMS['basket_add_link'] = <<<END
<a href="#" id="add_basket_%id%" class="basket_list">Положить в корзину</a>
END;
Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ~\tpls\emarket\basket.tpl добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу
$FORMS['order_block'].
Пример:
$FORMS['order_block'] = <<<END
<div id="rubricator" class="block basket basket_info_summary">
После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу.
