Выбор количества товара перед добавлением в корзину Simpla

Сегодня я расскажу об очередной доработке cms Simpla. Речь пойдет о том, как добавить в карточку товара (или список товаров, а также рубрику) поле для ввода количество товара, перед его отправкой в корзину. По-умолчанию такого поля не предусмотрено, поэтому когда вы нажимаете на кнопку в корзину - товар в количестве одной штуки красиво улетает.

А что если нужно добавить 30 стульев? Или 10 мониторов? 10 раз нажимать на кнопку достаточно трудоемко, и не каждый человек догадается перейти в корзину, чтобы выбрать количество товара (хотя в корзине такая функция реализована). Сейчас мы постараемся сами сделать такую возможность: выбор количества товара перед добавлением в корзину.

Для начала хочу обратить внимание, что все изменения я делаю на Simpla 2.3.3. На разных версиях Simpla исходный код движка меняется. Будьте бдительны.

Тут все до ужаса просто. Идем на FTP, путь: design/ваша тема/js/ajax_cart.js. У меня файл выглядит так:

// Аяксовая корзина
$('form.variants').live('submit', function(e) {
	e.preventDefault();
	button = $(this).find('input[type="submit"]');
	if($(this).find('input[name=variant]:checked').size()>0)
		variant = $(this).find('input[name=variant]:checked').val();
	if($(this).find('select[name=variant]').size()>0)
		variant = $(this).find('select').val();
	$.ajax({
		url: "ajax/cart.php",
		data: {variant: variant},
		dataType: 'json',
		success: function(data){
			$('#cart_informer').html(data);
			if(button.attr('data-result-text'))
				button.val(button.attr('data-result-text'));
		}
	});
	var o1 = $(this).offset();
	var o2 = $('#cart_informer').offset();
	var dx = o1.left - o2.left;
	var dy = o1.top - o2.top;
	var distance = Math.sqrt(dx * dx + dy * dy);
	$(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance);	
	$('.transfer_class').html($(this).closest('.product').find('.image').html());
	$('.transfer_class').find('img').css('height', '100%');
	return false;
});
 
 
/*
// Аяксовая корзина
$('a[href*="cart?variant"]').live('click', function(e) {
	e.preventDefault();
	//variant_id = $(this).attr('id');
 
	href = $(this).attr('href');
	pattern = /\/?cart\?variant=(\d+)$/;
	variant_id = pattern.exec(href)[1];
 
	link = $(this);
	$.ajax({
		url: "ajax/cart.php",
		data: {variant: variant_id},
		dataType: 'json',
		success: function(data){
			$('#cart_informer').html(data);
			//if(link.attr('added_text'))
			//	link.html(link.attr('added_text'));
			//link.attr('href', '/cart');
		}
	});
 
	var o1 = $(this).offset();
	var o2 = $('#cart_informer').offset();
	var dx = o1.left - o2.left;
	var dy = o1.top - o2.top;
	var distance = Math.sqrt(dx * dx + dy * dy);
 
	$(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance);	
	$('.transfer_class').html($(this).closest('.product').find('.image').html());
	$('.transfer_class').find('img').css('height', '100%');
	return false;
});
*/

Теперь меняем строчку (11 сверху):

data: {variant: variant},

На:

data: {variant: variant,amount: $(this).find('input[name="amount"]').val()},

Здесь закончили. Идем в админку сайта, открываем шаблоны нашей темы и в нужное место карточки товара (product.tpl) или списка товаров (products.tpl) вставляем:

<input type="text" name="amount" value="5">

Вот и все) Теперь появится поле для ввода значения нужного количества товара. Не забудьте стилизовать его:) Всем успехов.