Динамическое обновление цены при выборе опционных свойств в TPL

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 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>


Теперь когда заходим на страницу товара видим как меняется его цена в зависимости от выбора опционных свойств.