Динамическое обновление цены при выборе опционных свойств в 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 Т.е. меняем блок на строках 151-157:

<input type="radio" name="options[{../../@name}]" value="{object/@id}">
	<xsl:if test="position() = 1">
		<xsl:attribute name="checked">
			<xsl:text>checked</xsl:text>
		</xsl:attribute>
	</xsl:if>
</input>

На блок такого вида:

<input type="radio" name="options[{../../@name}]" value="{object/@id}" onClick="
	var value1 = parseFloat($(this).parent().parent().children('td:last-child').html());
	$('#price_id').html( value1 + original_price );
" />

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