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

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

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

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

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

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

<source lang="html4strict">
<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>
</source>


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

На блок такого вида:
<source lang="html4strict">
<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 );
" />
</source>


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

[[Категория:Верстка в XSLT]]
[[Категория:Модуль Каталог]]
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]