Работа с корзиной без перезагрузки TPL — различия между версиями
Строка 1: | Строка 1: | ||
Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта | Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта | ||
− | DEMODIZI (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы '''"__common.js"''' и '''"basket.js"''' из папки ''~/templates/demodizzy/js/'' в свою систему. За добавление товара в корзину отвечают методы ''' | + | DEMODIZI (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы '''"__common.js"''' и '''"basket.js"''' из папки ''~/templates/demodizzy/js/'' в свою систему. За добавление товара в корзину отвечают методы '''site.basket.add''' и '''basket.putElement''' из файла: '''"basket.js"''' |
+ | |||
+ | После того как мы перенесли файлы на сайт с TPL шаблонизатором необходимо отредактировать метод '''site.utils.js.init''' в файле '''"__common.js"'''. В этом методе подключается файл '''"busket.js"''' и поэтому необходимо изменить адрес этого файла в соответствии с тем куда Вы его перенесли. В нашем случае после редактирования метод будет выглядеть так: | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | site.utils.js.init([ | ||
+ | '/js/client/basket.js', | ||
+ | '/templates/demoold/js/basket.js', | ||
+ | ]); | ||
+ | </source> | ||
Для начала нужно подключить необходимые файл. В шаблоне дизайна сайта вам нужно подключить файл ''~/js/site/__common.js'' | Для начала нужно подключить необходимые файл. В шаблоне дизайна сайта вам нужно подключить файл ''~/js/site/__common.js'' | ||
Строка 17: | Строка 26: | ||
<a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a> | <a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a> | ||
</source> | </source> | ||
− | Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ~\tpls\emarket\basket.tpl добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу <div> блока $FORMS['order_block']. | + | Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ''~\tpls\emarket\basket.tpl'' добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу <div> блока |
+ | |||
+ | $FORMS['order_block']. | ||
Пример: | Пример: | ||
Строка 25: | Строка 36: | ||
</source> | </source> | ||
После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу. | После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу. | ||
+ | |||
+ | == Дополнительно == | ||
+ | Если у Вас на сайте кнопка корзины была изменена, то после добавления скрипта необходимо его отредактировать, что бы вместо корзины не появлялось сообщение только о количестве товара без возможности туда перейти. | ||
+ | За замену кнопки отвечает метод | ||
[[Категория:Модуль Интернет магазин]][[Категория:Верстка в TPL]] | [[Категория:Модуль Интернет магазин]][[Категория:Верстка в TPL]] |
Версия 07:20, 21 июня 2013
Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта DEMODIZI (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы "__common.js" и "basket.js" из папки ~/templates/demodizzy/js/ в свою систему. За добавление товара в корзину отвечают методы site.basket.add и basket.putElement из файла: "basket.js"
После того как мы перенесли файлы на сайт с TPL шаблонизатором необходимо отредактировать метод site.utils.js.init в файле "__common.js". В этом методе подключается файл "busket.js" и поэтому необходимо изменить адрес этого файла в соответствии с тем куда Вы его перенесли. В нашем случае после редактирования метод будет выглядеть так:
site.utils.js.init([
'/js/client/basket.js',
'/templates/demoold/js/basket.js',
]);
Для начала нужно подключить необходимые файл. В шаблоне дизайна сайта вам нужно подключить файл ~/js/site/__common.js
Пример:
<script type="text/javascript" src="/js/site/__common.js"></script>
После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара.
За данную ссылку отвечает следующий tpl шаблон: ~\tpls\catalog\preview.tpl
Скрипту работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
<a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a>
Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ~\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">
После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу.
Дополнительно
Если у Вас на сайте кнопка корзины была изменена, то после добавления скрипта необходимо его отредактировать, что бы вместо корзины не появлялось сообщение только о количестве товара без возможности туда перейти. За замену кнопки отвечает метод