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

Актуально для версии 2.9

Для того, чтобы пользователь при выборе товара с опционными свойствами мог видеть окончательную цену, мы напишем небольшой скрипт. Скрипт будем использовать на примере demo шаблона "Интернет-магазин современный". Все изменения будем вносить только в один файл, который отвечает за вывод данных о товаре - \xsltTpls\modules\catalog\object-view.xsl

Находим на 18-20 строчках такой блок

<span umi:element-id="{page/@id}" umi:field-name="price">
<xsl:apply-templates select="document(concat('udata://emarket/price/', page/@id))" />
</span>

Добавляем идентификатор и записываем значение в переменную.
Получается примерно так:

<span id="price_id" umi:element-id="{page/@id}" umi:field-name="price">
	<xsl:apply-templates select="document(concat('udata://emarket/price/', page/@id))" />
</span>

<script type="text/javascript"> var original_price = parseFloat($('#price_id').text(), 10); </script>

Теперь добавляем само событие по клику на опционное свойство, а так же убираем свойство по умолчанию. Т.е. меняем блок на строках 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 );
" />

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