Динамическое обновление цены при выборе опционных свойств в TPL — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «'''Актуально для версии 2.9.5''' Для того, чтобы пользователь при выборе товара с опционными с…»)
 
 
Строка 29: Строка 29:
  
 
Теперь добавляем само событие по клику на опционное свойство, для этого в файле templates/demoold/tpls/data/catalog_options.tpl  
 
Теперь добавляем само событие по клику на опционное свойство, для этого в файле templates/demoold/tpls/data/catalog_options.tpl  
−
Т.е. меняем блок на строках 151-157:
+
Т.е. меняем блок на строках 34-39:
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<input type="radio" name="options[{../../@name}]" value="{object/@id}">
+
<li>
−
<xsl:if test="position() = 1">
+
    <label>
−
<xsl:attribute name="checked">
+
        <input type="radio" name="options[%field_name%]" value="%object-id%" />
−
<xsl:text>checked</xsl:text>
+
%object-name% %emarket applyPriceCurrency(%float%, 'short')%
−
</xsl:attribute>
+
    </label>
−
</xsl:if>
+
</li>
−
</input>
 
 
</source>
 
</source>
  
 
На блок такого вида:
 
На блок такого вида:
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<input type="radio" name="options[{../../@name}]" value="{object/@id}" onClick="
+
<li>
−
var value1 = parseFloat($(this).parent().parent().children('td:last-child').html());
+
    <label>
−
$('#price_id').html( value1 + original_price );
+
        <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>
 
</source>
 
</source>
  
  
−
Теперь когда заходим на страницу товара видим как меняется его цена от выбора опционных свойств.
+
Теперь когда заходим на страницу товара видим как меняется его цена в зависимости от выбора опционных свойств.
  
 
[[Категория:Верстка в TPL]]
 
[[Категория:Верстка в TPL]]
 
[[Категория:Модуль Каталог]]
 
[[Категория:Модуль Каталог]]
 
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]
 
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]

Текущая версия на 11:51, 31 марта 2014

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


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

Источник — «https://wiki.umisoft.ru/index.php?title=Динамическое_обновление_цены_при_выборе_опционных_свойств_в_TPL&oldid=7234»