Динамическое обновление цены при выборе опционных свойств в TPL — различия между версиями
Alexei (обсуждение | вклад) (Новая страница: «'''Актуально для версии 2.9.5''' Для того, чтобы пользователь при выборе товара с опционными с…») |
Alexei (обсуждение | вклад) |
||
Строка 29: | Строка 29: | ||
Теперь добавляем само событие по клику на опционное свойство, для этого в файле templates/demoold/tpls/data/catalog_options.tpl | Теперь добавляем само событие по клику на опционное свойство, для этого в файле templates/demoold/tpls/data/catalog_options.tpl | ||
− | Т.е. меняем блок на строках | + | Т.е. меняем блок на строках 34-39: |
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | <input type="radio" name="options[ | + | <li> |
− | + | <label> | |
− | + | <input type="radio" name="options[%field_name%]" value="%object-id%" /> | |
− | + | %object-name% %emarket applyPriceCurrency(%float%, 'short')% | |
− | + | </label> | |
− | + | </li> | |
− | |||
</source> | </source> | ||
На блок такого вида: | На блок такого вида: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | <input type="radio" name="options[ | + | <li> |
− | var value1 = | + | <label> |
− | $('# | + | <input type="radio" name="options[%field_name%]" value="%object-id%" onClick=" |
− | + | var value1 = %float%; | |
+ | var arr = ($('#price_original').text()).split(' '); | ||
+ | var ext = arr[arr.length-1]; | ||
+ | $('#price_original').html(value1 + original_price + ' ' + ext);"/> | ||
+ | %object-name% %emarket applyPriceCurrency(%float%, 'short')% | ||
+ | </label> | ||
+ | </li> | ||
</source> | </source> | ||
− | Теперь когда заходим на страницу товара видим как меняется его цена от выбора опционных свойств. | + | Теперь когда заходим на страницу товара видим как меняется его цена в зависимости от выбора опционных свойств. |
[[Категория:Верстка в TPL]] | [[Категория:Верстка в TPL]] | ||
[[Категория:Модуль Каталог]] | [[Категория:Модуль Каталог]] | ||
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] | [[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] |
Текущая версия на 11:51, 31 марта 2014
Актуально для версии 2.9.5
Для того, чтобы пользователь при выборе товара с опционными свойствами мог видеть окончательную цену, мы напишем небольшой скрипт. Скрипт будем использовать на примере demo шаблона "Классический интернет магазин". Необходимо внести изменения в два файла, первый файл - это templates/demoold/tpls/catalog/default.tpl
Находим на 86-90 строчках такой блок
<p itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" align="right">
%emarket basketAddLink(%id%)% |
(<b>Цена: <span itemprop="price">%emarket price('%id%', 'short')%</span></b>)
<link itemprop="itemCondition" href="http://schema.org/NewCondition" />
</p>
Добавляем идентификатор и записываем значение в переменную.
Получается примерно так:
<p itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" align="right">
%emarket basketAddLink(%id%)% |
(<b>Цена: <span id="price_original" itemprop="price">%emarket price('%id%', 'short')%</span></b>)
<script type="text/javascript"> var original_price = parseFloat($('#price_original').text(), 10); </script>
<link itemprop="itemCondition" href="http://schema.org/NewCondition" />
</p>
Теперь добавляем само событие по клику на опционное свойство, для этого в файле templates/demoold/tpls/data/catalog_options.tpl
Т.е. меняем блок на строках 34-39:
<li>
<label>
<input type="radio" name="options[%field_name%]" value="%object-id%" />
%object-name% %emarket applyPriceCurrency(%float%, 'short')%
</label>
</li>
На блок такого вида:
<li>
<label>
<input type="radio" name="options[%field_name%]" value="%object-id%" onClick="
var value1 = %float%;
var arr = ($('#price_original').text()).split(' ');
var ext = arr[arr.length-1];
$('#price_original').html(value1 + original_price + ' ' + ext);"/>
%object-name% %emarket applyPriceCurrency(%float%, 'short')%
</label>
</li>
Теперь когда заходим на страницу товара видим как меняется его цена в зависимости от выбора опционных свойств.