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

Материал из Umicms
Перейти к:навигация, поиск
 
(не показано 6 промежуточных версий 1 участника)
Строка 1: Строка 1:
−
Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в UMI.CMS скрипты из тестового демосайта
+
'''Проверенно на версии системы 2.9 редакция 21905'''
−
DEMODIZI (шаблон современный). Для этого вам нужно установить локальную версию с данным шаблоном и скопировать файлы '''"__common.js"''' и '''"basket.js"''' из папки ''~/templates/demodizzy/js/'' в свою систему. За добавление товара в корзину отвечают методы '''site.basket.add''' и '''basket.putElement''' из файла: '''"basket.js"'''
 
  
−
После того как мы перенесли файлы на сайт с TPL шаблонизатором необходимо отредактировать метод '''site.utils.js.init''' в файле '''"__common.js"'''. В этом методе подключается файл '''"busket.js"''' и поэтому необходимо изменить адрес этого файла в соответствии с тем куда Вы его перенесли. В нашем случае после редактирования метод будет выглядеть так:
+
Самый простой и удобный способ реализовать данную задачу заключается в том, что нужно использовать уже имеющиеся в 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">
 
<source lang="javascript">
Строка 11: Строка 12:
 
</source>
 
</source>
  
−
Для начала нужно подключить необходимые файл. В шаблоне дизайна сайта вам нужно подключить файл ''~/js/site/__common.js''  
+
Далее нужно подключить необходимые файлы. В шаблоне дизайна сайта вам нужно подключить файл '''"__common.js"'''
  
 
Пример:
 
Пример:
−
<source lang="javascript">  
+
<source lang="html4strict">
−
<script type="text/javascript" src="/js/site/__common.js"></script>
+
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
 +
<script type="text/javascript" src="/templates/demoold/js/__common.js"></script>
 
</source>  
 
</source>  
  
 
После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара.
 
После того как фал подключен в шаблонах дизайна — нужно соответствующим образом модифицировать ссылку каталога на добавление товара.
  
−
За данную ссылку отвечает следующий tpl шаблон: ''~\tpls\catalog\preview.tpl''
+
Данная ссылка описана в tpl шаблоне: ''~\tpls\emarket\default.tpl'' в блоке '''$FORMS['basket_add_link']'''.
  
−
Скрипту работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
+
Скрипт работает таким образом, что ищет необходимый элемент по ID и классу ссылки. По этому ссылка на добавление товара должна иметь следующий вид (если не модифицировать сам скрипт):
−
<source lang="javascript">  
+
<source lang="html4strict">  
−
<a id="add_basket_%id%" class="basket_list"> Добавить в корзину </a>
+
$FORMS['basket_add_link'] = <<<END
 +
<a href="#" id="add_basket_%id%" class="basket_list">Положить в корзину</a>
 +
END;
 
</source>  
 
</source>  
 
Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ''~\tpls\emarket\basket.tpl'' добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу <div> блока  
 
Теперь необходимо соответствующим образом изменить шаблон корзины. Для этого нам нужно в файле ''~\tpls\emarket\basket.tpl'' добавить необходимые скрипту теги. А именно нужно присвоить значение класса class="block basket basket_info_summary" тегу <div> блока  
Строка 31: Строка 35:
  
 
Пример:
 
Пример:
−
<source lang="javascript">  
+
<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">
Строка 37: Строка 41:
 
После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу.
 
После этого добавление в корзину будет выполнятся с помощью скрипта, и не будет больше перезагружать страницу.
  
−
== Дополнительно ==
 
−
Если у Вас на сайте кнопка корзины была изменена, то после добавления скрипта необходимо его отредактировать, что бы вместо корзины не появлялось сообщение только о количестве товара без возможности туда перейти.
 
−
За замену кнопки отвечает метод
 
  
 
[[Категория:Модуль Интернет магазин]][[Категория:Верстка в TPL]]
 
[[Категория:Модуль Интернет магазин]][[Категория:Верстка в 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">

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

Источник — «https://wiki.umisoft.ru/index.php?title=Работа_с_корзиной_без_перезагрузки_TPL&oldid=7984»