КАРТОЧКА ТОВАРА / Калькулятор в карточке товара для делимых продуктов

Заметка создана: 19 марта 2024 г.

Этот калькулятор подойдёт для сайтов, где продается товар мерный, цена которого зависит от выбранной площади и толщины материала.

Для начала создаём Информационную систему, которую назовем, к примеру "Материалы для калькулятора". Сразу же создадим Допсвойство "Кратность" (поясню ниже). Далее создадим инфоэлементы для разных толщин материала. Например, "Материал толщина 1.8 мм", "Материал, толщина 2.1мм" и т.д. В свойстве "Кратность" нужно указать на какую величину увеличивается стоимость товара за единицу площади. Т.е. к примеру, для "Материал, толщина 1мм" стоимость квадратного метра 100р., а для "Материал толщина 1.8 мм" - 200 р. Тогда кратность будет равна "2". Эту кратность будем использовать в калькуляторе в карточке товара. Чтобы передать данные из созданной нами Инфосистемы в карточку товара, добавим нижеприведённый код в ТДС Интернет-магазина:

// Материалы в карточке товара
ob_start();
if (Core::moduleIsActive('informationsystem'))
{
	$Informationsystem_Controller_Show = new Informationsystem_Controller_Show(Core_Entity::factory('Informationsystem', 32));

	$Informationsystem_Controller_Show->xsl(Core_Entity::factory('Xsl')->getByName('МатериалыВКарточкеТовараСайт2'))
		->groupsMode('none')
		->itemsForbiddenTags(array('text', 'description'))
		->cache(FALSE)
		->group(FALSE)
		->itemsPropertiesList(FALSE)
		//->itemsProperties(array(129))
		->itemsProperties(TRUE)
		->limit(20)
		//->votes(TRUE)
		->show();
}
$Shop_Controller_Show->addEntity(
	Core::factory('Core_Xml_Entity')
		->name('kratnost')->value(ob_get_clean())
);
//

В итоге, получим в XML данные о Материалах.

В XSL карточки товара добавляем код нашего калькулятора, а в макет код jquery, который будет у нас отслеживать изменения в полях и селекторе и производить расчёт.

XSL

<label>Высота сетки, см: </label>

</span>

</div>

<label>Длина сетки, см: </label>

</span>

</div>

<xsl:if test="/shop/kratnost">

<xsl:value-of disable-output-escaping="yes" select="/shop/kratnost "/>

</div>

</xsl:if>

</div>

</form>

<!--div class="margin-top-10 margin-bottom-10">

</div-->

<span>Заказать</span></button>

</div>

JavaScript / jQuery

// Cart quantity

$(".qty-inner .qty-up").on("click", function() {

var jInput = $($(this).data('src')),

oldValue = jInput.val();

var jInputName = $(jInput).attr('name');

console.log(jInputName);

if (jInputName =='height' || jInputName =='width') {

if (oldValue < 100) {

jInput.val(100);

}

else if (jInputName =='height' && oldValue < 300 && oldValue > 99) {

jInput.val(parseInt(oldValue) + 1);

}

else if (jInputName =='width' && oldValue > 99) {

jInput.val(parseInt(oldValue) + 1);

}

else if(jInputName =='height2' || jInputName =='width2') {

if (jInputName =='height2' && oldValue < 158) {

jInput.val(158);

}

else if (jInputName =='width2' && oldValue < 100) {

jInput.val(100);

}

else if (jInputName =='width2' && oldValue > 99) {

jInput.val(parseInt(oldValue) + 100);

}

var price = $('input[name=item-price]').val() * 1;

var height = $('input[name=height]').val() * 1;

var width = $('input[name=width]').val() * 1;

var height2 = $('input[name=height2]').val() * 1;

var width2 = $('input[name=width2]').val() * 1;

var material = $('#materials').val();

var materialName = $('#materials option:selected').text();

var result = ((height * width * material)/10000).toFixed(2);

var result2 = ((width2 * material)/100).toFixed(2);

var summ = (result * price).toFixed(0);

var summ2 = (result2 * price).toFixed(0);

$('#summ').html(summ); // записываем сумму

$('#summ2').html(summ2); // записываем сумму

$('#quantity').val(result); // записываем количество

$('#quantity2').val(result2); // записываем количество

if (jInputName =='width2') {

$('#fast_order').data('height', height2 ).data('width', width2 ).data('materials', materialName );

$('#inCart').data('height', height2 ).data('width', width2 ).data('materials', materialName );

}else{

$('#fast_order').data('height', height ).data('width', width ).data('materials', materialName );

$('#inCart').data('height', height ).data('width', width ).data('materials', materialName );

}

});

$(".qty-inner .qty-down").on("click", function() {

var jInput = $($(this).data('src')),

oldValue = jInput.val();

var jInputName = $(jInput).attr('name');

if (jInputName =='width2') {

if (oldValue > 199) {

jInput.val(parseInt(oldValue) - 100);

}

else if (oldValue < 299 && oldValue > 100) {

jInput.val(parseInt(oldValue) - 1);

}

var price = $('input[name=item-price]').val() * 1;

var height = $('input[name=height]').val() * 1;

var width = $('input[name=width]').val() * 1;

var material = $('#materials').val();

var materialName = $('#materials option:selected').text();

var result = ((height * width * material)/10000).toFixed(2);

var summ = (result * price).toFixed(0);

$('#summ').html(summ); // записываем сумму

$('#quantity').val(result); // записываем количество

$('#fast_order').data('height', height ).data('width', width ).data('materials', materialName ); // Отправляем информацию о размерах в быстрый заказ

});

$('#height, #width').on("change keyup paste", function(){

var price = $('input[name=item-price]').val() * 1;

var height = $('input[name=height]').val() * 1;

var width = $('input[name=width]').val() * 1;

var material = $('#materials').val();

var materialName = $('#materials option:selected').text();

var result = ((height * width * material)/10000).toFixed(2);

var summ = (result * price).toFixed(0);

$('#summ').html(summ); // записываем сумму

$('#quantity').val(result); // записываем количество

$('#fast_order').data('height', height ).data('width', width ).data('materials', materialName );

});

$("#form #materials").change(function(){

var price = $('input[name=item-price]').val() * 1;

var height = $('input[name=height]').val() * 1;

var width = $('input[name=width]').val() * 1;

var material = $(this).val();

var materialName = $('#materials option:selected').text();

var result = (((height * width) * material)/10000).toFixed(2);

var summ = (result * price).toFixed(0);

$('#summ').html(summ); // записываем сумму

$('#quantity').val(result); // записываем количество

$('#fast_order').data('height', height ).data('width', width ).data('materials', materialName );

});

HostCMS