Динамическое обновление цены при выборе опционных свойств в TPL
Актуально для версии 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>
Теперь когда заходим на страницу товара видим как меняется его цена в зависимости от выбора опционных свойств.