Jump to content

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


Recommended Posts

  • 5 months later...
  • Replies 76
  • Created
  • Last Reply

Top Posters In This Topic

Здравствуйте. Подскажите как доделать функцию добавления количества товара до добавления в корзину.

добавил вот такие кнопки, а что дальше делать не знаю. 

 

вот еще дополнение к данной теме

http://pcvector.net/...pole-input.html

Количество увеличивается и уменьшается но в корзину добавляется лишь 1 шт.  Версия 2.2.4

Надеюсь поможете, заранее большое спасибо.

Link to post
Share on other sites

сколько будет стоить помощь и кто готов помочь? 

так же нужна помощь в настройке различных единиц товаров. Версия Simpla 2.2.4

пишите в лс или здесь, надеюсь с ценой договоримся)

Link to post
Share on other sites

сколько будет стоить помощь и кто готов помочь? 

так же нужна помощь в настройке различных единиц товаров. Версия Simpla 2.2.4

пишите в лс или здесь, надеюсь с ценой договоримся)

http://www.simplashop.com/article/razlichnye-edinitsy-izmereniya - тут можете попробовать поставить. Если нет - пишите в личку.

Link to post
Share on other sites

Еще не могу разобратся с http://pcvector.net/scripts/forms/380-uvelichit-i-umenshit-znachenie-v-pole-input.html

Так и не понял куда код вставлять, а куда скрипт...

 

чтобы уменьшить длину инпута, добавьте в стили

input[name="amount"] {
    width: 60px;
    text-align: center;
}

 

в шаблоне product.tpl , там где ваш input должно быть вот так

<span class="minus">-</span>
<input type="text" name="amount" value="1">
<span class="plus">+</span>

 

а в самом низу шаблона

<script>
$(function() {
// Раскраска строк характеристик
$(".features li:even").addClass('even');
$(".features TR:even").addClass('even');

// Зум картинок
$("a.zoom").fancybox({ 'hideOnContentClick' : true });
});

// Плюс и минус
$('.minus').click(function () {
    var $input = $(this).parent().find('input');
    var count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count;
    $input.val(count);
    $input.change();
    return false;
});
$('.plus').click(function () {
    var $input = $(this).parent().find('input');
    $input.val(parseInt($input.val()) + 1);
    $input.change();
    return false;
});
</script>

 

ну и в стили можете добавить для кнопок

.minus, .plus {
    width: 10px;
    height: 10px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 3px 5px 3px 5px;
    border: 1px solid #ddd;
}
Link to post
Share on other sites

ага, спасибо... оставил себе без + и - ...   слишком убого смотрится!

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

Link to post
Share on other sites

ага, спасибо... оставил себе без + и - ...   слишком убого смотрится!

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

 

<input type="text" name="amount" value="1"
onblur="if(this.value==''){this.value='1';}" 
onfocus="if(this.value=='1'){this.value='';}" />
Link to post
Share on other sites

 

<input type="text" name="amount" value="1"
onblur="if(this.value==''){this.value='1';}" 
onfocus="if(this.value=='1'){this.value='';}" />

С этой формулой отказывается работать... просто не грузит страницу...

Link to post
Share on other sites

{literal} <input type="text" name="amount" value="1"
onblur="if(this.value==''){this.value='1';}" 
onfocus="if(this.value=='1'){this.value='';}"/> {/literal} 
 

 

 

Ага... а так работает, спасибо !

Link to post
Share on other sites
  • 3 weeks later...

У меня 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;
});
*/

 

Манипуляции с приведённым Крохой кодом не дают желаемого результата. В корзину товар добавляется, вариант товара отслеживается, количество верное, но есть одно "НО" - при нажатии на кнопку "В корзину" происходит редирект в ***/cart/... Помогите разобраться. (Версия 2.1.5)

 

Доброго дня! Помогите разобраться в аналогичной проблеме: При добавлении нескольких товаров - происходит редирект в корзину. Версия 2.2.1

Link to post
Share on other sites

В корзине у меня вот так

// Аяксовая корзина
 $('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, amount: $(this).find('input[name="amount"]').val()},


 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;
 });
в шаблонах
<div class="number">
    <span class="minus">-</span>{literal} <input type="text" name="amount" value="1" size="5"
onblur="if(this.value==''){this.value='1';}" 
onfocus="if(this.value=='1'){this.value='';}"/> {/literal}<span class="plus">+</span>
</div>
 
Link to post
Share on other sites
  • 6 months later...

 

chocolate_moles, в 13 Dec 2013 - 06:35, сказал(а):

 

 

чтобы уменьшить длину инпута, добавьте в стили

input[name="amount"] {
    width: 60px;
    text-align: center;
}

в шаблоне product.tpl , там где ваш input должно быть вот так

<span class="minus">-</span>
<input type="text" name="amount" value="1">
<span class="plus">+</span>

а в самом низу шаблона

<script>
$(function() {
// Раскраска строк характеристик
$(".features li:even").addClass('even');
$(".features TR:even").addClass('even');

// Зум картинок
$("a.zoom").fancybox({ 'hideOnContentClick' : true });
});

// Плюс и минус
$('.minus').click(function () {
    var $input = $(this).parent().find('input');
    var count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count;
    $input.val(count);
    $input.change();
    return false;
});
$('.plus').click(function () {
    var $input = $(this).parent().find('input');
    $input.val(parseInt($input.val()) + 1);
    $input.change();
    return false;
});
</script>

ну и в стили можете добавить для кнопок

.minus, .plus {
    width: 10px;
    height: 10px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 3px 5px 3px 5px;
    border: 1px solid #ddd;
}

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

 

<input type="number" name="amount" value="1"> и никаких тебе стилей и скриптов...

 

в данной теме - этот код в шаблон (product.tpl, к примеру)

 

и в самом шаблоне в ajax_cart.js добавить

 

amount: $(this).find('input[name=amount]').val()

 

 

у меня выглядит так (версия 2.3.5)

 

 

// Аяксовая корзина
$('form.variants').live('submit', function(e) { //для n1c и его вопроса выше по поводу не рабочего аякса....
e.preventDefault();
var 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,
amount: $(this).find('input[name="amount"]').val()
},
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;
});

 

 

 

в шаблоне

 

 

 

<!-- Выбор варианта товара -->
<form class="variants" action="/cart"> <!-- должно иметь место и соответствовать -->
<table>
{foreach $product->variants as $v}
<tr class="variant">
<td>
<input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $product->variant->id==$v->id}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
</td>
<td>
{if $v->name}<label class="variant_name" for="product_{$v->id}">{$v->name}</label>{/if}
</td>
<td>
{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
</td>
</tr>
{/foreach}
</table>
<input type="number" name="amount" value="1">
<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
</form>
<!-- Выбор варианта товара (The End) -->
 
Link to post
Share on other sites

А как сделать чтобы при добавлении товара сразу не переходило в корзину а оставалось с товаре?

Покажи верстку страницы с которой не работает скрипт. Обычная ошибка - удаление необходимых классов..

 

Выше в сообщении подсказка для тебя выделенная цветом.. проверь

Link to post
Share on other sites

Покажи верстку страницы с которой не работает скрипт. Обычная ошибка - удаление необходимых классов..

 

Выше в сообщении подсказка для тебя выделенная цветом.. проверь

 

Проверил, код такой же как ты прислал... 

только вместо <input type="number" name="amount" value="1"> у меня <input type="text" name="amount" value="1">

поменял на number аналогично сразу переходит в корзину....

Link to post
Share on other sites

Проверил, код такой же как ты прислал... 

только вместо <input type="number" name="amount" value="1"> у меня <input type="text" name="amount" value="1">

поменял на number аналогично сразу переходит в корзину....

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

Link to post
Share on other sites
  • 2 months later...

Поставил. Все вроде работает, но единственная проблема, в товарах с несколькими вариантами, добавляет количество первого варианта. Никто не сталкивался с таким?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...