Перейти к содержимому


Отправка Товара В Корзину


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 186

#1 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 03 Октябрь 2013 - 15:55

можно ли сделать при нажатии "купить" (добавлении товара в корзину) чтобы не появлялось всплывающее окошко а иконка (любое изображение) от кнопки "купить" скользила в корзину и количество товара в корзине сразу же обновлялась, без обновления страницы?
На многих магазинах так используют

#2 sVs

sVs

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 232 сообщений
  • ГородМосква

Отправлено 03 Октябрь 2013 - 16:48

Очень интересная идея

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Октябрь 2013 - 02:44

Пожалуйста, приведите пример подобной реализации. Так же сообщите номер вашего аккаунта и желательно запишите его в профиль на форуме.

#4 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 04 Октябрь 2013 - 07:07

http://izhmarket.ru/ вот на этом сайте есть такая реализация

#5 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 05 Октябрь 2013 - 04:25

В шаблоне "Сияние" можно использовать следующий код

$(function() {
	$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListForm').each(function() {
	  $(this).addClass('ajaxForm');
	});
	$(this).find('.listing, .goodsDataMainImage, .goodsListItemImage').addClass('form-block-wrapper');
	$(this).find('.listing img, .goodsDataMainImage img, .goodsListItemImage img').addClass('product-img');
	$('form.ajaxForm').submit(function() {
		var formData = $(this).serializeArray();
		formData.push({name: 'ajax_q', value: 1});
		$.post($(this).attr('action'), formData, $.proxy(function(html) {
			$('#cartSum').html($(html).find('.newCartSum').html());
			$('#cartCount').html($(html).find('.newCartCount').html());
			var wrapper = $(this).closest('.form-block-wrapper').length ? $(this).closest('.form-block-wrapper') : $(this);
			var product_img = wrapper.find('.product-img');
			var img = product_img.clone().appendTo($('body'));
			img.css({
				position: "absolute",
				left: product_img.offset().left,
				top: product_img.offset().top,
				display: "block",
				zIndex: 999
			}).animate({
				width: 0,
				height: 0,
				left: $('#cartInfo').offset().left,
				top: $('#cartInfo').offset().top
				}, 800, 'linear', function() {
				   $(this).remove();
				});
		}, this));
		return(false);
	});
});

данный код необходимо вставить в конец файла main.js. Так же из этого файла необходимо удалить

// Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListForm').submit(function(){
   
	$(this).nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 450, // Minimum width
	  minHeight: 140, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;
  });


#6 sVs

sVs

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 232 сообщений
  • ГородМосква

Отправлено 05 Октябрь 2013 - 10:57

А в шаблоне "Пластик"?

#7 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 05 Октябрь 2013 - 19:07

Просмотр сообщенияСake (05 Октябрь 2013 - 04:25) писал:

В шаблоне "Сияние" можно использовать следующий код

$(function() {
$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListForm').each(function() {
	 $(this).addClass('ajaxForm');
});
$(this).find('.listing, .goodsDataMainImage, .goodsListItemImage').addClass('form-block-wrapper');
$(this).find('.listing img, .goodsDataMainImage img, .goodsListItemImage img').addClass('product-img');
$('form.ajaxForm').submit(function() {
	 var formData = $(this).serializeArray();
	 formData.push({name: 'ajax_q', value: 1});
	 $.post($(this).attr('action'), formData, $.proxy(function(html) {
		 $('#cartSum').html($(html).find('.newCartSum').html());
		 $('#cartCount').html($(html).find('.newCartCount').html());
		 var wrapper = $(this).closest('.form-block-wrapper').length ? $(this).closest('.form-block-wrapper') : $(this);
		 var product_img = wrapper.find('.product-img');
		 var img = product_img.clone().appendTo($('body'));
		 img.css({
			 position: "absolute",
			 left: product_img.offset().left,
			 top: product_img.offset().top,
			 display: "block",
			 zIndex: 999
		 }).animate({
			 width: 0,
			 height: 0,
			 left: $('#cartInfo').offset().left,
			 top: $('#cartInfo').offset().top
			 }, 800, 'linear', function() {
				 $(this).remove();
			 });
	 }, this));
	 return(false);
});
});

данный код необходимо вставить в конец файла main.js. Так же из этого файла необходимо удалить

// Добавление товара в корзину через ajax
$('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListForm').submit(function(){

$(this).nyroModalManual({
	 formIndicator: 'ajax_q', // Value added when a form is sent
	 minWidth: 450, // Minimum width
	 minHeight: 140, // Minimum height
	 gallery: null // Gallery name if provided
});
return false;
});
то что надо, а как сделать чтобы и количество товара в корзине обновлялось сразу?

#8 Slava

Slava

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 115 сообщений

Отправлено 05 Октябрь 2013 - 20:06

А подскажите тоже самое для шаблона " вечность " !?

#9 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Октябрь 2013 - 06:12

Просмотр сообщенияsVs (05 Октябрь 2013 - 10:57) писал:

А в шаблоне "Пластик"?

В шаблоне "Пластик" можно использовать следующий код

$(function() {
		$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListForm').each(function() {
		  $(this).addClass('ajaxForm');
		});
		$(this).find('.ulproduct, .fullimg, .tabproduct').addClass('form-block-wrapper');
		$(this).find('.ulproduct img, .fullimg img, .tabproduct img').addClass('product-img');
		$('form.ajaxForm').submit(function() {
				var formData = $(this).serializeArray();
				formData.push({name: 'ajax_q', value: 1});
				$.post($(this).attr('action'), formData, $.proxy(function(html) {
						$('div.cartInfo .cartSum').html($(html).find('.newCartSum').html());
						$('#cartCount').html($(html).find('.newCartCount').html());
						var wrapper = $(this).closest('.form-block-wrapper').length ? $(this).closest('.form-block-wrapper') : $(this);
						var product_img = wrapper.find('.product-img');
						var img = product_img.clone().appendTo($('body'));
						img.css({
								position: "absolute",
								left: product_img.offset().left,
								top: product_img.offset().top,
								display: "block",
								zIndex: 999
						}).animate({
								width: 0,
								height: 0,
								left: $('.cartInfo').offset().left,
								top: $('.cartInfo').offset().top
								}, 800, 'linear', function() {
								   $(this).remove();
								});
				}, this));
				return(false);
		});
});

Просмотр сообщенияpunkkez (05 Октябрь 2013 - 19:07) писал:

то что надо, а как сделать чтобы и количество товара в корзине обновлялось сразу?

В предложенном коде это уже реализовано. Это можно заметить обратив внимание на строку

$('#cartCount').html($(html).find('.newCartCount').html());

которая и обновляет количество товара. Так это работает в стандартном шаблоне. Вся проблема в том что у вас изменена структура корзины в шаблоне "HTML" и отсутствует идентификатор cartCount. Вам необходимо в шаблоне "HTML" найти ваш код корзины

<span id="cartSum">
		  {% IF cart_count_empty %}
			{CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")} | <span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")} | {cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>

и заменить его на

<span>
		  {% IF cart_count_empty %}
			<span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">{cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>

по идее это должно сработать корректно.

Просмотр сообщенияSlava (05 Октябрь 2013 - 20:06) писал:

А подскажите тоже самое для шаблона " вечность " !?

В шаблоне "Вечность" можно использовать следующий код

$(function() {
$('form.goodsListItemCatalogueAddToCartButton, form.goodsToCartFromCompareForm, form.goodsDataForm').each(function() {
		 $(this).addClass('ajaxForm');
		 $(this).find('button[type="submit"]').removeAttr('onclick');
});
$(this).find('.items, .main-image').addClass('form-block-wrapper');
$(this).find('.items img, .main-image img').addClass('product-img');
$('form.ajaxForm').submit(function() {
		 var formData = $(this).serializeArray();
		 formData.push({name: 'ajax_q', value: 1});
		 $.post($(this).attr('action'), formData, $.proxy(function(html) {
				 $('.basket-info:first').html($(html).find('#newCartData').html());
				 var wrapper = $(this).closest('.form-block-wrapper').length ? $(this).closest('.form-block-wrapper') : $(this);
				 if(!wrapper.find('.product-img').length) {
					wrapper = $('.form-block-wrapper');
				 }
				 var product_img = wrapper.find('.product-img');
				 var img = product_img.clone().appendTo($('body'));
				 img.css({
						 position: "absolute",
						 left: product_img.offset().left,
						 top: product_img.offset().top,
						 display: "block",
						 zIndex: 999
				 }).animate({
						 width: 0,
						 height: 0,
						 left: $('.basket-info a').offset().left,
						 top: $('.basket-info a').offset().top
						 }, 800, 'linear', function() {
								 $(this).remove();
						 });
		 }, this));
		 return(false);
});
});


#10 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 08 Октябрь 2013 - 14:26

Просмотр сообщенияСake (08 Октябрь 2013 - 06:12) писал:

В предложенном коде это уже реализовано. Это можно заметить обратив внимание на строку

$('#cartCount').html($(html).find('.newCartCount').html());

которая и обновляет количество товара. Так это работает в стандартном шаблоне. Вся проблема в том что у вас изменена структура корзины в шаблоне "HTML" и отсутствует идентификатор cartCount. Вам необходимо в шаблоне "HTML" найти ваш код корзины

<span id="cartSum">
		 {% IF cart_count_empty %}
		 {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")} | <span>0</span> {CURRENCY_NAME}
		 {% ELSE %}
		 {% FOR cart_sum %}
			 <span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")} | {cart_sum.NOW | money_format}</span><br />
		 {% ENDFOR %}
		 {% ENDIF %}
	 </span>

и заменить его на

<span>
		 {% IF cart_count_empty %}
		 <span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">0</span> {CURRENCY_NAME}
		 {% ELSE %}
		 {% FOR cart_sum %}
			 <span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">{cart_sum.NOW | money_format}</span><br />
		 {% ENDFOR %}
		 {% ENDIF %}
	 </span>

по идее это должно сработать корректно.
все равно количество товара в корзине обновляется только после обновления страницы

#11 sVs

sVs

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 232 сообщений
  • ГородМосква

Отправлено 08 Октябрь 2013 - 21:10

А как сделать в "Пластике" такую реализацию только для страницы просмотра самого товара. А на главной странице/в сопутствующих/с этим товаром смотрят оставить всплывающее окно?

#12 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 09 Октябрь 2013 - 02:55

Просмотр сообщенияpunkkez (08 Октябрь 2013 - 14:26) писал:

все равно количество товара в корзине обновляется только после обновления страницы

В предыдущем сообщении я немного ошибся. Получилось 2 идентификатора cartSum. Замените код (ранее замененный)

<span>
				 {% IF cart_count_empty %}
				 <span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">0</span> {CURRENCY_NAME}
				 {% ELSE %}
				 {% FOR cart_sum %}
						 <span id="cartSum"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum">{cart_sum.NOW | money_format}</span><br />
				 {% ENDFOR %}
				 {% ENDIF %}
		 </span>

на следующий

<span>
				 {% IF cart_count_empty %}
				 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">0</span></span> {CURRENCY_NAME}
				 {% ELSE %}
				 {% FOR cart_sum %}
						 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">{cart_sum.NOW | money_format}</span></span><br />
				 {% ENDFOR %}
				 {% ENDIF %}
		 </span>

если и это не поможет, то не убирайте изменения. Возможно проблема кроется в чем-то еще.

Просмотр сообщенияsVs (08 Октябрь 2013 - 21:10) писал:

А как сделать в "Пластике" такую реализацию только для страницы просмотра самого товара. А на главной странице/в сопутствующих/с этим товаром смотрят оставить всплывающее окно?

Попробуйте код

$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListForm').each(function() {
				  $(this).addClass('ajaxForm');
				});
				$(this).find('.ulproduct, .fullimg, .tabproduct').addClass('form-block-wrapper');
				$(this).find('.ulproduct img, .fullimg img, .tabproduct img').addClass('product-img');

заменить на

$('form.goodsDataForm').each(function() {
				  $(this).addClass('ajaxForm');
				});
				$(this).find('.fullimg').addClass('form-block-wrapper');
				$(this).find('.fullimg img').addClass('product-img');


#13 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 09 Октябрь 2013 - 07:39

теперь количество товара в корзине обновляется а сумма остается прежней

#14 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 10 Октябрь 2013 - 02:08

Данная проблема возникает за-за добавленного вами дубликата корзины scrollcart (корзина при прокрутке страницы), если вы обратите внимание, то там цена обновляется. Все дело в одинаковом идентификаторе cartSum. Что бы исправить эту ситуацию - необходимо идентификатор заменить на класс. Найдите в шаблоне "HTML" строку

<span id="cartSum">

и замените её на

<span id="cartSum" class="cartSumN">

далее найдите

<span class="cartprice" id="cartSum">

и замените на

<span class="cartprice cartSumN" id="cartSum">

после в файле main.js найдите

$('#cartSum').html($(html).find('.newCartSum').html());

и замените на

$('.cartSumN').html($(html).find('.newCartSum').html());


#15 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 10 Октябрь 2013 - 08:27

scrollcart я убрал и теперь все нормально обновляется но при добавлении товара в корзину пишет - количество шт.  а при обновлении страницы пишет - количество товаров
нужно чтобы всегда писал именно количество товаров

#16 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Октябрь 2013 - 09:33

Просмотр сообщенияpunkkez (10 Октябрь 2013 - 08:27) писал:

scrollcart я убрал и теперь все нормально обновляется но при добавлении товара в корзину пишет - количество шт.  а при обновлении страницы пишет - количество товаров
нужно чтобы всегда писал именно количество товаров

Найдите код в шаблоне HTML -
<span>
								 {% IF cart_count_empty %}
								 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">0</span></span> {CURRENCY_NAME}
								 {% ELSE %}
								 {% FOR cart_sum %}
												 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">{cart_sum.NOW | money_format}</span></span><br />
								 {% ENDFOR %}
								 {% ENDIF %}
				 </span>
и замените на  -
<span>
								 {% IF cart_count_empty %}
								 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">0</span></span>товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}
								 {% ELSE %}
								 {% FOR cart_sum %}
												 <span id="cartCount"><span class="num"> {CART_COUNT_TOTAL}&nbsp;товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")}</span></span> | <span id="cartSum"><span class="num">{cart_sum.NOW | money_format}</span></span><br />
								 {% ENDFOR %}
								 {% ENDIF %}
				 </span>


#17 punkkez

punkkez

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 492 сообщений

Отправлено 10 Октябрь 2013 - 10:38

не изменилось, еще и при пустой корзине пишет не рублей а товаров

#18 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Октябрь 2013 - 13:48

Просмотр сообщенияpunkkez (10 Октябрь 2013 - 10:38) писал:

не изменилось, еще и при пустой корзине пишет не рублей а товаров

Верните пожалуйста изменения назад.

#19 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Октябрь 2013 - 13:55

Найдите код в Ajaj шаблоне  -
{% FOR cart_count %}
		{cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %}
	  {% ENDFOR %}
и замените на -
{% FOR cart_count %}
		{cart_count.COUNT}&nbsp;товар{cart_count.COUNT | gen_word_end("", "а", "ов")}{% IFNOT cart_count.last %},{% ENDIF %}
	  {% ENDFOR %}


#20 sVs

sVs

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 232 сообщений
  • ГородМосква

Отправлено 12 Октябрь 2013 - 16:15

Просмотр сообщенияmiyako (10 Октябрь 2013 - 13:55) писал:

Попробуйте код

$('form.goodsDataForm, form.goodsToCartFromCompareForm, form.goodsListForm').each(function() {
				 $(this).addClass('ajaxForm');
			 });
			 $(this).find('.ulproduct, .fullimg, .tabproduct').addClass('form-block-wrapper');
			 $(this).find('.ulproduct img, .fullimg img, .tabproduct img').addClass('product-img');

заменить на

$('form.goodsDataForm').each(function() {
				 $(this).addClass('ajaxForm');
			 });
			 $(this).find('.fullimg').addClass('form-block-wrapper');
			 $(this).find('.fullimg img').addClass('product-img');

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




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных