Курс 2016 года “Разработка на UMI.CMS от 0 до готового сайта”
Требуется у свойства "В наличии" и "Нет в наличии" сделать разные цвета.

Автор koroganРаздел Шаблоны TPL

Ответов: 2
Просмотров: 3068
Последний ответ 09 Января 2012, 16:25:59
от korogan
Подскажите, пожалуйста, как вывести подсказку в зависимости от цены

Автор nitoitiРаздел Макросы UMI.CMS

Ответов: 1
Просмотров: 3237
Последний ответ 04 Ноября 2014, 19:56:24
от nitoiti
JS+AJAX - формат цены без суффикса и префикса

Автор samРаздел JS и AJAX

Ответов: 3
Просмотров: 3499
Последний ответ 20 Октября 2014, 00:45:31
от sam
Цены в разных валютах. Проблемы и странности

Автор crazygeorgioРаздел Custom макросы

Ответов: 0
Просмотров: 1633
Последний ответ 03 Октября 2015, 03:22:49
от crazygeorgio
Передача цены через api в заказ на маркете

Автор webtrendРаздел Настройка системы и модулей

Ответов: 2
Просмотров: 1257
Последний ответ 20 Ноября 2016, 17:51:51
от webtrend

0 Пользователей и 1 Гость просматривают эту тему.

*

denis_savin

  • *
  • 12
  • +0/-0
    • Просмотр профиля
Помогите пожлуйста в реализации данного функционала в tpl-шаблонизаторе.
Попробовал прикрутить из статьи для xslt, но что то ничего не вышло(

Использую не радио кнопки, а селекты.

*

ilyar

Опиши подробнее что хочешь сделать и что не получается.

*

denis_savin

  • *
  • 12
  • +0/-0
    • Просмотр профиля
Опиши подробнее что хочешь сделать и что не получается.
Мне надо что бы при выборе опционального свойства менялась основлная цена (динамически).

Есть в опциональных свойствах спец. поле, где указывается цена.
Когда выбираешь это опциональное свойство, в нем пишется 34р. то есть прибавление к основной цене 34 рубля. Я хоче что бы при выборе такого опционального свойства цена менялась (что бы пользователь знал окончательную цену товара).

Что делал:
За основу взял статью с wiki: http://wiki.umisoft.ru/Динамическое_обновление_цены_при_выборе_опционных_свойств
Там рассказывается про xslt шаблонизатор с использованием radio check.
Я решил попробовать сделать на tpl с использованием select.
Что наделал(файл вывода опциональных свойств:
<?php
$FORMS = array();


$FORMS['group'] = <<<END

<form id="basket_%id%" action="%pre_lang%/emarket/basket/put/element/%id%/" method="get" >

<span>%lines%</span>
<p>%emarket basketAddLink()%</p>
</form>

END;

$FORMS['group_line'] = <<<END
   
    %prop%
   
END;

$FORMS['optioned_block'] = <<<END
<strong>%title%:</strong><br>
<span id="price_id">
<select name="options[%field_name%]" >
%items%
</select>
</span>
<script type="text/javascript"> var original_price = parseFloat($('#price_id').text(), 10); </script>
<br>

END;

$FORMS['optioned_block_empty'] = <<<END

<br/><br/>
END;

$FORMS['optioned_item'] = <<<END


<option value="%object-id%" onClick="var value1 = parseFloat($(this).parent().parent().children('td:last-child').html()); $('#price_id').html( value1 + original_price );">
%object-name% %emarket applyPriceCurrency(%float%, 'short')%
</option>


END;

?>


Не хочет он пересчитывать цену динамически:( 

*

ilyar

Разделяй логику и представление, не надо совать инлайн стили или скрипты в шаблоны, жизнь от этого станет прикрасой, это лирическое отступление.

Не могу сказать по твоему коду у меня мало TPL практики, а приведенный шаблон не полный, но вижу одну ошибку:  <span id="price_id">, что бы разобраться что не так советую смотреть в конслоль для этого очень хорошо подходит Chrome DevTools, вот замечательный курс на эту тему, он на английском, но видео интуитивно понятно, за 2 часа вполне можно освоить этот скил.
 
В твой задаче нет ничего сложного XSLT или TPL не важно. В общем виде тебе надо  построить правильную html структуру, что бы сне было удобно работать из JavaScript, например вот так:

Код: HTML [Выделить]

<form class="item" data-item-id="123" method="get">
  <div class="item__name">Наименование товара Б</div>
  <select class="item__option" name="options[field_name]">
    <option>опции</option>
    <option value="1" data-original-price="9.55">опция А +9.55 руб.</option>
    <option value="2" data-original-price="19.55">опция Б +19.55 руб.</option>
    <option value="3" data-original-price="29.55">опция В +29.55 руб.</option>
  </select>
  <button class="price">
    <div class="price__value" data-original-price="100">100</div>
    <div class="price__suffix">руб.</div>
  </button>
</form>


далее при выборе опции, обновляем отображение стоимости:

Код: JavaScript [Выделить]

jQuery('.item').change(function () {
  var target = $('.price__value', this);
  var itemPrice = parseFloat(target.data('original-price'));
  var optionPrice = parseFloat($('.item__option option:selected', this).data('original-price'));
  target.html(itemPrice + optionPrice);
});


Демка http://bit.ly/itemAddOptionPrice

Думаю понятно как это внедрить в TPL шаблон, пиши если будут вопросы.
« Последнее редактирование: 10 Октября 2016, 09:56:47 от ilyar »

*

denis_savin

  • *
  • 12
  • +0/-0
    • Просмотр профиля
Сделал все так же как вы мне посоветовали, но ничего не меняется(
Скрипт запихал в header
Вот код в браузере:
<div class="price w100">
<strong>Цена опт.:</strong>
<span class="price__value" data-original-price="459">459</span><span class="red">руб.</span>
</div>

<select name="options[razmer_navolochki]" class="item__option">
<option value="6893" data-original-price="">50 х 70</option>
<option value="6894" data-original-price="35">70 х 70 +35 руб</option>
</select>

Так же приводу ко файла где то все сделано:
<?php
$FORMS = array();


$FORMS['group'] = <<<END

<form id="basket_%id%" action="%pre_lang%/emarket/basket/put/element/%id%/" method="get" >

<span>%lines%</span>
<p>%emarket basketAddLink()%</p>
</form>

END;

$FORMS['group_line'] = <<<END
   
    %prop%
   
END;

$FORMS['optioned_block'] = <<<END
<strong>%title%:</strong><br>

<select name="options[%field_name%]" class="item__option">
%items%
</select>


<br>

END;

$FORMS['optioned_block_empty'] = <<<END
<!--<strong>%title%</strong> - Нет опций-->
<br/><br/>
END;

$FORMS['optioned_item'] = <<<END



<option value="%object-id%" data-original-price="%emarket applyPriceCurrency(%float%, 'price')%">
%object-name% %emarket applyPriceCurrency(%float%, 'short')%
</option>


END;

?>
И код файла вывода цены:
$FORMS['price'] = <<<END

<strong>Цена опт.:</strong>
<span class="price__value" data-original-price="%value%">%value%</span><span class="red">руб.</span>

END;

*

ilyar

смотри вставил в демо твою структуру html http://bit.ly/itemAddOptionPrice работает, может быть jQuery не подключаешь... если это так то в логе будет обязательно ошибка, что вообще лог говорит?
« Последнее редактирование: 10 Октября 2016, 09:59:01 от ilyar »

*

denis_savin

  • *
  • 12
  • +0/-0
    • Просмотр профиля
jQuery подключен.
А можно поподробнее насчет консоли chrome?
не понимаю как с помощью нее посмотреть где ошибка и вообще отрабатывает ли функция.

*

ilyar

Конслоль это часть Chrome DevTools, я писал о нем ранее, вот замечательный курс на эту тему (см. четвертый урок), он на английском, но видео интуитивно понятно, за 2 часа вполне можно освоить этот инструмент.

Еще есть статья Chrome DevTools: Using the Console, автор Tim Statler, перевод Использование консоли Google Chrome, переводчик Владимир Старков.
 
« Последнее редактирование: 10 Октября 2016, 09:07:24 от ilyar »