Работа с корзиной без перезагрузки TPL — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 14: Строка 14:
  
 
Пример:
 
Пример:
<source lang="javascript">  
+
<source lang="html">  
 
<script type="text/javascript" src="/js/site/__common.js"></script>
 
<script type="text/javascript" src="/js/site/__common.js"></script>
 
</source>  
 
</source>  
Строка 23: Строка 23:
  
 
Скрипту работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
 
Скрипту работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
<source lang="javascript">  
+
<source lang="html">  
 
<a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a>
 
<a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a>
 
</source>  
 
</source>  
Строка 31: Строка 31:
  
 
Пример:
 
Пример:
<source lang="javascript">  
+
<source lang="html">  
 
$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">

Версия 07:21, 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">

После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу.

Дополнительно

Если у Вас на сайте кнопка корзины была изменена, то после добавления скрипта необходимо его отредактировать, что бы вместо корзины не появлялось сообщение только о количестве товара без возможности туда перейти. За замену кнопки отвечает метод