Javascript-форум - Динамическое изменение цен.

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Динамическое изменение цен. (https://javascript.ru/forum/jquery/42722-dinamicheskoe-izmenenie-cen.html)

Динамическое изменение цен.

Здравствуйте.
Есть магазин на Joomla 1.5 и VM 1.1.9.
Как сделать так, чтобы цена в карточке товара пересчитывалась динамически?
проблема в том, что она пересчитывается динамически но только для одного свойства товара.
А цены других свойств не суммируются.
Ниже коды файлов.

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>

<?php
// User is not allowed to see a price or there is no price
if( !$auth['show_prices'] || ( !isset($price_info["product_price_id"] ) && ( !$parent_has_children) ) ) {
	
	$link = $sess->url( $_SERVER['PHP_SELF'].'?page=shop.ask&amp;product_id='.$product_id.'&amp;subject='. urlencode( $VM_LANG->_('PHPSHOP_PRODUCT_CALL').": $product_name") );
	echo vmCommonHTML::hyperLink( $link, $VM_LANG->_('PHPSHOP_PRODUCT_CALL') );
}
?>

<?php
// DISCOUNT: Show old price! Inline style specified for PDF creation, remove it if you don't need it
if(!empty($discount_info["amount"])) {
	?>
	<span class="product-Old-Price" style="color:red;text-decoration:line-through;">
		<?php echo $CURRENCY_DISPLAY->getFullValue($undiscounted_price); ?></span>
	
	<br/>
	<?php
}
?>
<?php
if( !empty( $price_info["product_price_id"] )) { ?>
<!-- Скрипт пересчета цены -->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".inputboxattrib").change(function () {
jQuery('span.productPrice').replaceWith('<span class="productPrice">'+jQuery(".inputboxattrib option:selected").attr("title")+'</span>');
})  
});
</script>
<!-- Скрипт пересчета цены -->
	<span class="productPrice">
		<?php echo $CURRENCY_DISPLAY->getFullValue($base_price) ?>
		<?php echo $text_including_tax ?>
	</span>
<?php
}
echo $price_table;
?>


<?php
// DISCOUNT: Show the amount the customer saves
if(!empty($discount_info["amount"])) {
	echo "<br />";
	echo $VM_LANG->_('PHPSHOP_PRODUCT_DISCOUNT_SAVE').": ";
	if($discount_info["is_percent"]==1) {
		echo $discount_info["amount"]."%";
	}
	else {
		echo $CURRENCY_DISPLAY->getFullValue($discount_info["amount"]);
	}
}
?>

И другой код

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); 

foreach($attributes as $attribute) { 		
    ?>
<table width="650" border="0">
      <tr><td width="210">
    <div class="vmAttribChildDetail" style="float: left;text-align:left;">
        <label for="<?php echo $attribute['titlevar'] ?>_field"><?php echo $attribute['title'] ?></label>:
    </div></td>
    <td width="430"><div class="vmAttribChildDetail" style="float:left;margin:3px;">
        <select class="inputboxattrib" id="<?php echo $attribute['titlevar'] ?>_field" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>">
		<?php foreach ( $attribute['options_list'] as $options_item ) : ?>
	        <?php if( isset( $options_item['display_price']) ) : ?>
<!--	        <option value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?> (<?php echo $options_item['sign'].$options_item['display_price'] ?>)</option> -->
					<option title="<?php echo $options_item['display_price'] ?>" value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?> (<?php echo $options_item['sign'].$options_item['display_price'] ?>)</option>
	        <?php else : ?>
	        <option value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?></option>
	        <?php endif; ?>
        <?php endforeach; ?>
        </select>
    </div>
      </tr>
    </table>
  <?php 
} ?>

В итоге цена меняется как положено, но только для одного свойства. А для других ничего не происходит.
К примеру Если цена зависит от габарита - это одно свойство. А если цена зависит дополнительно еще и от цвета - это уже другое свойство. Вот это второе свойство не суммируется.
может и коряво объяснил, но надеюсь поймете. Помогите пожалуйста справиться с задачей.

Я вижу только один селект (вы его называете первым свойством):

<select class="inputboxattrib" id="<?php echo $attribute['titlevar'] ?>_field" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>">
		<?php foreach ( $attribute['options_list'] as $options_item ) : ?>
	        <?php if( isset( $options_item['display_price']) ) : ?>
<!--	        <option value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?> (<?php echo $options_item['sign'].$options_item['display_price'] ?>)</option> -->
					<option title="<?php echo $options_item['display_price'] ?>" value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?> (<?php echo $options_item['sign'].$options_item['display_price'] ?>)</option>
	        <?php else : ?>
	        <option value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?></option>
	        <?php endif; ?>
        <?php endforeach; ?>
</select>

И я не нашёл пересчёт? Я вижу как цена берётся из значения .inputboxattrib option:selected и вставляется в span.productPrice

jQuery(".inputboxattrib").change(function () {
  jQuery('span.productPrice').replaceWith('<span class="productPrice">'+jQuery(".inputboxattrib option:selected").attr("title")+'</span>');
})

Вот ссылка на сайт. может посмотрев сайт Вы поймете в чем дело.
http://door33.ru

Ну не вижу я где тут динамически меняются цены.
тут

Эти изменения видны для пользователя?

Я убрал изменение цен, так как оно работает некорректно.
Попробую объяснить на примере этого товара:
Если выбирать размер полотна - то цена нормально динамически показывается над товаром.
Если же выбирать другие опции (наличник, добор и т.д.) то окончательная цена не меняется.
но при этом при нажатии на кнопку Купить - все нормально, цена уже стоит правильная.
Хотелось бы сделать так, чтобы пользователь сразу видел цену, которую ему нужно будет заплатить.

Ну не меняется вообще цена, меняю хоть размер полотна, хоть количество.. цена над товаром остаёться не изменной: Цена: 5 400.00 руб.

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

Уважаемые гуру, помогите, пожалуйста!!!

У вас по сути обычный калькулятор.
Каждая из опций добавляет определённую сумму к общей цене.
Значит вам нужно выполнить ряд простых арифметических действий, а соответственно нужны цифры, с которыми эти действия выполнять. Нужна базовая цена и наценка для каждой из опций. Если всё это хранить в DOM, то удобнее всего использовать дата-атрибуты.
На каждый выбор опции следует брать базовую цену, проходить по списку опций, суммировать их общую стоимость, и после этого выводить цифру в нужное место, предварительно отформатировав.

Я же писал тебе: я не вижу у тебя сложения.

<script>jQuery(document).ready(function(){
jQuery(".inputboxattrib").change(function () { //размер_полотна_field
  var atrribut1 = jQuery("#размер_полотна_field option:selected").attr("title");
  var atrribut2 = jQuery("#коробочный_брус_с_уплотнителем_1_шт_field option:selected").attr("title");
  //.. и так далее для всех аттрибутов
  
  // затем ты складываешь так как надо, например
  var priceTotal = atrribut1 + atrribut2;
  
  // и уже потом заменяешь с priceTotal
}) 
});</script>

При изменении (change) одного из аттрибутов, я бы заново узнал все значения твоих аттрибутов, потом бы сложил их, и вывел бы конечную цену.

Примечание 1: русский шрифт в id (#коробочный_брус_с_уплотни� �елем_1_шт_field) это нормально? Я бы так не рисковал.

Примечание 2: надеюсь ты понимаешь, что нужна проверка после того как ты поместил в atrribut2 какое то значение.

var atrribut2 = jQuery("#коробочный_брус_с_уплотнителем_1_шт_field option:selected").attr("title");

Тебе же нужны цифры, а не само строчное значение одной из опций списка. Ставь тут же проверку: если пользователь выбрал то-то, то числовое значение этого слагаемого будет таким-то и тд. Есть ещё варианты, но могу запутать тебя.

Цитата:

Сообщение от Faab (Сообщение 280225)

русский шрифт в id это нормально?

Строго говоря, даже в css селекторы, набранные кириллицей, будут работать.
Но да, не принято.

Цитата:

Сообщение от Faab (Сообщение 280225)

Я же писал тебе: я не вижу у тебя сложения.

При изменении (change) одного из аттрибутов, я бы заново узнал все значения твоих аттрибутов, потом бы сложил их, и вывел бы конечную цену.

Примечание 1: русский шрифт в id (#коробочный_брус_с_уплотни� �елем_1_шт_field) это нормально? Я бы так не рисковал.

Примечание 2: надеюсь ты понимаешь, что нужна проверка после того как ты поместил в atrribut2 какое то значение.

var atrribut2 = jQuery("#коробочный_брус_с_уплотнителем_1_шт_field option:selected").attr("title");

Мне кажется, я не догоню как это сделать. Мог бы ты мне все расписать подробнее?
Кроме того, если не менять значения размера полотная, то он отдает цена : undefined
Мне кажется тут в коде что-то нужно изменить

jQuery('span.productPrice').replaceWith('<span class="productPrice">'+jQuery(".inputboxattrib option:selected").attr("title")+'</span>');

Вот пример решения, но есть разные решения, под твои условия.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css"></style>

</head>
<body>
<script>
$(document).ready(function(){
  jQuery(".inputA").change(function () {
    var nalchikValue = parseInt($('#nalichnikField').val());
    var doborValue = parseInt($('#doborField').val()); //doborField
    var totalPrice = nalchikValue + doborValue;
    
    jQuery('span.productPrice').replaceWith('<span class="productPrice">' + totalPrice + '</span>');
  });
});
</script>
<select class="inputA" id="nalichnikField">
  <option value="0">не выбрано</option>
  <option title="220.00 руб." value="220.00 руб.">темный орех</option>
</select>
<select class="inputA" id="doborField">
  <option value="0">не выбрано</option>
  <option title="380.00 руб." value="380.00 руб.">10 см темный орех</option>
  <option title="490.00 руб." value="490.00 руб">15 см темный орех</option>
  <option title="640.00 руб." value="640.00 руб.">20 см темный орех</option>
</select>
<div>
  <span class="productPrice">0</span> руб.
</div>
</body>
</html>

Проблема с тем что не считались другие поля со свойствами решена путем добавления такого кода.

//функция разделитель тысячных
function thousandSep(val) {
    return String(val).split("").reverse().join("")
                  .replace(/(\d{3}\B)/g, "$1 ")
                  .split("").reverse().join("");
}

//функция подсчета цены
function setPriceView() {
	
	var price = 0;
	
	jQuery(".inputboxattrib option:selected").each(function(){ //проходимся по всем инпутам
		price += parseFloat(jQuery(this).attr('title').replace(/\s+/g, '')); //парсим цену из атрибутов
	});
	
	console.log(price);
	
	var number = parseFloat(jQuery(".inputboxquantity").val()); //получаем количество
	var totalPrice = price*number; //считаем цену
	
	totalPrice = thousandSep(totalPrice.toFixed(2)); //приводим цену к нужному виду
	
	jQuery('span.productPrice').replaceWith('<span class="productPrice">'+totalPrice+' руб.</span>');//вставляем цену на страницу
};

jQuery(document).ready(function(){

jQuery(".inputboxattrib").change(function () {setPriceView(); }); //вешаем обработчик на изменение полотно и витража
jQuery(".inputboxquantity").change(function () {setPriceView(); }); //вешаем обработчик на изменение количества
jQuery(".quantity_box_button").click(function () {setPriceView(); }); //вешаем обработчик на кнопки изменения количества
});

Проблема теперь в том, что он все цены умножает на общее количество, а как сделать свое поле ввода количества? (сайт на Joomla и VM 1.1.9)