Микрокалькулятор кв.м.

[Skull515]

Доброго времени суток.

В работе сайт строительной тематики, одним из товаров является ламинат, который в пачке содержит разный метраж. Соответственно, заказчику нужно чтобы Пересчет в карточке товара шел в кв.м. пачки, самих пачках и деньгах. Накопал статью. Воспользовался и на тестовом сайте, в дефолтной теме, все заработало - посмотреть можно тут. Начал переносить на "боевой" сайт. Если бы на сайте торговали только ламинатом, то проблем не было бы никаких, но загвоздка в том, что помимо товара, которому подходит карточка с калькулятором, есть еще, к примеру, ковролин, которому достаточно стандартного счетчика 1+1+1 и т.д.

В начале думал решить вопрос с помощью модуля персонализированных шаблонов. И все бы хорошо, но вот только при подключении нового tpl не считается цена.

Итого 2 выхода:

решить почему не обновляется цена (думаю, что это связано с модулем пересчета цен без AJAX, скорее всего нужно просто переустановить, смутило только то, что в теме, с которой работаю, модуль уже интегрирован, причем на уровне файлов, а не просто Дополнение) и использовать другой tpl для карточек товара с ламинатом;

либо "заставить" изменяться поле между плюсами и минусами в зависимости от того, заполнено поле квадратуры в пачке или нет.

Что-то подтолкнуло ко второму варианту.

Итак задача - если поле квадратуры в пачке в админке заполнено, то вываливается калькулятор, если не заполнено (ну или там 0), то стандартный счетчик с шагом 1.

Изначально, стандартное поле с шагом 1 в шаблоне (не стандартном) описано в виде HTML

Спойлер

<div class="pull-left">
<input type="text" name="quantity" value="<?php echo $minimum; ?>" data-toggle="tooltip" title="<?php echo $entry_qty; ?>" size="2" id="input-quantity" class="form-control" />
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
</div>
<div class="custom pull-left">
<button type="button" id="plus" class="items-count" ><i class="fa fa-angle-up">&nbsp;</i></button>
<button type="button" id="minus" class="items-count"><i class="fa fa-angle-down">&nbsp;</i></button>
</div>

 

и JS, который увеличивает и уменьшает кол-во

Спойлер

function minus(){
	if(document.getElementById("input-quantity").value <= 0) {
		return false;
	}
	document.getElementById("input-quantity").value --;
};
function plus(){
	document.getElementById("input-quantity").value ++;
};
$('#minus').click(function(){
	minus();
});
$('#plus').click(function(){
	plus();
});

 

Я поковырял код и вот на чем остановился:

HTML

Спойлер

<div class="pull-left">
	
<div class="col-sm-12 form-group">
  <div class="col-sm-6">
    <input type="text" name="quantity_in_box" value="<?php echo $minimum * ($in_box?$in_box:1); ?> кв.м. (<?php echo $minimum; ?> уп.)" size="2" id="input-quantity" class="kolvo form-control" />
    <input type="hidden" name="quantity" value="<?php echo $minimum; ?>" />
  </div>
</div>

<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
    
</div>
<div class="custom pull-left">
<button data-type="q_plus" type="button" id="plus" class="control-in-de items-count" ><i class="fa fa-angle-up">&nbsp;</i></button>
<button data-type="q_minus" type="button" id="minus" class="control-in-de items-count"><i class="fa fa-angle-down">&nbsp;</i></button>

</div>

 

и переработанный JS

Спойлер

var metraj = '<?php echo $in_box; ?>';
$('.control-in-de').click(function(){ 
	if($(this).data('type') == 'q_minus'){
	  if($('input[name="quantity"]').val() > '<?php echo $minimum; ?>'){
		$('input[name="quantity"]').val(parseInt($('input[name="quantity"]').val())-1);
	  }
	}else{
		$('input[name="quantity"]').val(parseInt($('input[name="quantity"]').val())+1);					
	}
	if(metraj > 0){ 
	in_box = parseInt($('input[name="quantity"]').val())*<?php echo $in_box; ?>;
	$('input[name="quantity_in_box"]').val(in_box.toFixed(2) + ' кв.м. (' + $('input[name="quantity"]').val() + ' уп.)');
	}
	else
	{
		$(".kolvo").val("<?php echo $minimum; ?>");
		$(".kolvo#name").append($(this).attr("quantity"))
	}
});

 

Объявление переменной в начале - это получение значения из поля метража в пачке, из админки. Далее, если метраж > 0, то все отрабатывает и считается, а вот если меньше, то происходит такая вещь - поле имеет вид 1 кв.м. - (1 уп.), при нажатии плюса/минуса появляется "1" и не меняется, хотя если товар добавить в корзину, то кол-во нажатий учитывается. Получается, что не отображается изменение штучного кол-ва и первоначальный вид не очень - 1 кв.м. - (1 уп.), когда должен быть просто - 1.

Мысли какие: заменить значение value в input на дефолтовое, но этого не достаточно, в случае, если метраж в админке не указан нужно еще и атрибут name тега input привести к дефолтному виду. Возможно, это еще не все причины почему не идет отображение штучного подсчета.

Прошу совета и помощи, т.к. JS только начинаю постигать. Чувствую, что решение близко, но никак не могу ухватить...

Это все, по задумке, должно позволить сделать разделение в рамках одного tpl.

Змінено 8 серпня 2017 користувачем Skull515