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


Отображение На Корзине Количества Товаров

Автор tva1982, 25 окт. 2013 13:16

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

#1 tva1982

tva1982

    Пользователь

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

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

Интересует следующиее: как в шаблоне пластик установить отображение количества товаров в корзине рядом с ней, а не общей стоимости товаров, положенных в корзину. Например, как в шаблоне Осень.

А если сделать как в том же шаблоне выпадающее окно да с содержимым корзины, было ваще супер :)

#2 Vaccina

Vaccina

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

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

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

Цитата

А если сделать как в том же шаблоне выпадающее окно да с содержимым корзины, было ваще супер

Что-то подобное реализовалось в следующих темах форума. Пожалуйста, почитайте их внимательно.
http://forum.storela...ина/#entry93940
http://forum.storela...__20#entry75349

#3 tva1982

tva1982

    Пользователь

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

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

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

Что-то подобное реализовалось в следующих темах форума. Пожалуйста, почитайте их внимательно.
http://forum.storela...ина/#entry93940
http://forum.storela...__20#entry75349

Началась проблема с того, что нет у меня:
В шаблоне "HTML" после строки

<div class="cartInfo">
как указано в сообщении:
http://forum.storela...__60#entry83525

Ну и со всеми вытекающими. Пробовал по разному никаких изменений.
Все вернул в исходное состояние.

магазин: http://momo-cosmetic.ru

#4 miyako

miyako

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

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

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

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

Началась проблема с того, что нет у меня:
В шаблоне "HTML" после строки

<div class="cartInfo">
как указано в сообщении:
http://forum.storela...__60#entry83525

Ну и со всеми вытекающими. Пробовал по разному никаких изменений.
Все вернул в исходное состояние.

магазин: http://momo-cosmetic.ru

Найдите код в шаблоне HTML - 
<div class="rghtrever">
		  <a href="{CART_URL}">		{% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}{% ENDFOR %}
		  {% ENDIF %}</a>  </div>
		</div>
и замените на - 
<div class="rghtrever" id="cartInfo">
<div class="cart-preloaded">
				<div class="cart-info">
				<div class="cart-count"></div>
				<div class="cart-item"></div>
				<div class="cart-total"></div>
		</div>
</div>
		  <a href="{CART_URL}">		{% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}{% ENDFOR %}
		  {% ENDIF %}</a>  </div>
		</div>

в main.css вставьте - 
.cart-preloaded {
		position: relative;
}
.cart-info {
		background: #FFFFFF;
		box-shadow: 0 0 2px #BABABA;
		height: 200px;
		position: absolute;
		right: 80px;
		top: 55px;
		width: 360px;
		z-index: 99999;
		display: none;
}
.cart-info.selected {
		display: block;
}
.cart-info:after {
		content: ' ';
		top: -20px;
		right: 48px;
		position: absolute;
		border-color: transparent transparent rgba(132, 131, 131, 0.3) transparent;
		border-style: solid;
		border-width: 10px;
		height:0;
		width:0;
		z-index: 2;
}
.cart-info:before {
		content: ' ';
		top: -18px;
		right: 49px;
		position: absolute;
		border-color: transparent transparent #fff transparent;
		border-style: solid;
		border-width: 9px;
		height:0;
		width:0;
		z-index: 3;
}
.cart-info .cart-count {
		width: 96%;
		height: 28px;
		margin: 0 auto;
		border-bottom: 1px solid #E6E6E6;
		color: #828282;
		font-size: 12px;
		line-height: 28px;
		text-align: right;
}
.cart-info .cart-item {
		border-bottom: 1px solid #E6E6E6;
		max-height: 130px;
		margin: 5px auto;
		overflow-x: hidden;
		overflow-y: auto;
		width: 96%;
}
.cart-info .cart-total {
   height: 25px;
   width: 96%;
   margin: 5px auto;
   font-size: 12px;
   line-height: 25px;
   text-align: right;
}
.cart-info .cart-count .count {
		padding: 3px 6px;
		color: #fff;
		background: #333;
}
.cart-info .cart-item * {
		padding: 0px;
		font-size: 10px !important;
		vertical-align: top;
}
.cart-info .cart-item tr {
		border-bottom: 1px solid #E6E6E6;
}
.cart-info .cart-item tr:last-of-type {
		border-bottom: none;
}
.cart-info .cart-item .cart-name {
		width: 260px;
		padding: 0 10px;
}
.cart-info .cart-total span {
		font-size: 12px !important;
		display: inline-block;
		text-align: left !important;
}
.cart-info .cart-total button {
		display: inline-block;
		float: left;
		margin-top: -3px;
}
.cart-price .prd-count {
		display: block;
}

в шаблон "Ajax Добавление товара в корзину" добавьте
<script>
updateCartInfo();
if(!$('.cart-preloaded').hasClass('fixed')) {
  setTimeout(function() {
				$('.cart-preloaded').addClass('fixed');
				$('#cartInfo').find('.cart-info').addClass('selected');
  }, 1000);
  setTimeout(function() {
				$('.cart-preloaded').removeClass('fixed');
				$('#cartInfo').find('.cart-info').removeClass('selected');
  }, 5000);
}
</script>


в файл main.js добавьте
$(function() {
  $(window).scroll(function() {
				var scrollTop = $(window).scrollTop();
				if(scrollTop > $('.cartInfo').offset().top)
				   $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);
				}
				else {
				   $('.cart-info').animate({'marginTop': 0}, 500);
				}
  });
});
$(function() {
$('#cartInfo').hover(function() {
				 if($.trim($(this).find('.cart-item').text()).length) {
				 $(this).find('.cart-info').addClass('selected');
return(false);
				 }
				 updateCartInfo();
}, function() {
				 $(this).find('.cart-info').removeClass('selected');
});
});
function updateCartInfo() {
$.get('/cart?only_body=1', function(html) {
if($(html).find('#shopping-cart-table tr').size()) {
				 $('.cart-count').html('Корзина '
				 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
				 + $(html).find('.price .num').closest('.price').html());
		  
				 var item = $('<table class="cart-table cartForm">');
				 $(html).find('#shopping-cart-table tr').each(function() {
				 if($(this).find('.product-name').length) {
								 var image = $('<td>').addClass('cart-image').append($(this).find('.goods-image-icon-square'));
								 var name = $('<td>').addClass('cart-name').append($(this).find('.product-name'));
								 var price = $('<td>').addClass('cart-price')
								 .append($(this).find('td:eq(5) .cart-price'))
								 .append($('<span class="prd-count">').append($(this).find('td:eq(4) .input-text').val() + ' шт.'));
								 item.append(($('<tr>').append(image).append(name).append(price)));
				 }
				 })
				 $('.cart-item').html(item);
				 $('.cart-total').html($(html).find('#shopping-cart-table tfoot tr:eq(1) td').html());
				 $('.cart-total').find('button').click(function() {
								 document.location = '/cart';
				 });
}
});
}

#5 tva1982

tva1982

    Пользователь

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

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

Вроде все сделал.
Но изменений никаких

#6 miyako

miyako

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

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

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

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

Вроде все сделал.
Но изменений никаких

в main.js - 
  if(scrollTop > $('.cartInfo').offset().top)
замените на - 
  if(scrollTop > $('.rghtrever').offset().top)

#7 tva1982

tva1982

    Пользователь

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

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

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

в main.js -
if(scrollTop > $('.cartInfo').offset().top)
замените на -
if(scrollTop > $('.rghtrever').offset().top)

Все так же. Никаких изменений

#8 Koderhan

Koderhan

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

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

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

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

Все так же. Никаких изменений
Для начала нужно исправить js ошибки на сайте.
В файле "main.js".
Код:
$(function() {
  $(window).scroll(function() {
								var scrollTop = $(window).scrollTop();
								if(scrollTop > $('.rghtrever').offset().top)
								   $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);
								}
								else {
								   $('.cart-info').animate({'marginTop': 0}, 500);
								}
  });
});
Заменить:
$(function() {
  $(window).scroll(function() {
								var scrollTop = $(window).scrollTop();
								if(scrollTop > $('.rghtrever').offset().top) {
								   $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);
								}
								else {
								   $('.cart-info').animate({'marginTop': 0}, 500);
								}
  });
});

#9 tva1982

tva1982

    Пользователь

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

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

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

Для начала нужно исправить js ошибки на сайте.
В файле "main.js".
Код:
$(function() {
$(window).scroll(function() {
							 var scrollTop = $(window).scrollTop();
							 if(scrollTop > $('.rghtrever').offset().top)
								 $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);
							 }
							 else {
								 $('.cart-info').animate({'marginTop': 0}, 500);
							 }
});
});
Заменить:
$(function() {
$(window).scroll(function() {
							 var scrollTop = $(window).scrollTop();
							 if(scrollTop > $('.rghtrever').offset().top) {
								 $('.cart-info').animate({'marginTop': (scrollTop - $('#cartInfo').height())}, 0);
							 }
							 else {
								 $('.cart-info').animate({'marginTop': 0}, 500);
							 }
});
});

Исправил. Далее что необходимо сделать?

#10 Сake

Сake

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

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

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

Найдите в вашем файле стилей main.css

#bar .rever a {
	background: url("http://design.momo-cosmetic.ru/tov.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0);
	color: #FFFFFF;
	display: block;
	float: left;
	font: 18px 'Cuprum',sans-serif;
	height: 36px;
	margin: 0;
	padding: 20px 10px 0 55px;
	text-decoration: none;
}

и замените на

#bar .rever #cartInfo > a {
	background: url("http://design.momo-cosmetic.ru/tov.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0);
	color: #FFFFFF;
	display: block;
	float: left;
	font: 18px 'Cuprum',sans-serif;
	height: 36px;
	margin: 0;
	padding: 20px 10px 0 55px;
	text-decoration: none;
}

далее добавьте

.cart-preloaded * {
	text-shadow: none !important;
}

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

function updateCartInfo() {
$.get('/cart?only_body=1', function(html) {
if($(html).find('#shopping-cart-table tr').size()) {
								 $('.cart-count').html('Корзина '
								 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
								 + $(html).find('.price .num').closest('.price').html());
				 
								 var item = $('<table class="cart-table cartForm">');
								 $(html).find('#shopping-cart-table tr').each(function() {
								 if($(this).find('.product-name').length) {
																 var image = $('<td>').addClass('cart-image').append($(this).find('.goods-image-icon-square'));
																 var name = $('<td>').addClass('cart-name').append($(this).find('.product-name'));
																 var price = $('<td>').addClass('cart-price')
																 .append($(this).find('td:eq(5) .cart-price'))
																 .append($('<span class="prd-count">').append($(this).find('td:eq(4) .input-text').val() + ' шт.'));
																 item.append(($('<tr>').append(image).append(name).append(price)));
								 }
								 })
								 $('.cart-item').html(item);
								 $('.cart-total').html($(html).find('#shopping-cart-table tfoot tr:eq(1) td').html());
								 $('.cart-total').find('button').click(function() {
																 document.location = '/cart';
								 });
}
});
}

и замените на

function updateCartInfo() {
$.get('/cart?only_body=1', function(html) {
if($(html).find('.paddlr tr').size()) {
   $('.cart-count').html('Корзина '
			+ '<span class="count">' + $(html).find('.paddlr tr.order').size() + '</span> '
			+ $(html).find('.whtblue .num').closest('span').html());
				 
   var item = $('<table class="cart-table cartForm">');
   $(html).find('.paddlr tr.order').each(function() {
	   if($(this).find('.info').length) {
			var image = $('<td>').addClass('cart-image').append($(this).find('.img'));
			var name = $('<td>').addClass('cart-name').append($(this).find('.info span'));
			var price = $('<td>').addClass('cart-price')
				  .append($(this).find('td.fnt12b:eq(2)'))
				  .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.'));
			item.append(($('<tr>').append(image).append(name).append(price)));
	   }
   });
   $('.cart-item').html(item);
   $('.cart-total').html($(html).find('.cartbottom .right').html());
   $('.cart-total').find('button').click(function() {
		  document.location = '/cart';
   });
}
});
}

#11 tva1982

tva1982

    Пользователь

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

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

Сделал. Что-то начинает проявляться. Но содержимого корзины так и не видно:

Изображение

#12 Сake

Сake

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

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

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

Найдите в вашем файле стилей main.css

#bar .rever {
	color: #FF9B20;
	float: right;
	font: 12px/64px 'Cuprum',sans-serif;
	margin: 0;
	overflow: hidden;
	padding: 6px 15px 0 0;
	width: 250px;
}

и замените на

#bar .rever {
	color: #FF9B20;
	float: right;
	font: 12px/64px 'Cuprum',sans-serif;
	margin: 0;
	padding: 6px 15px 0 0;
	width: 250px;
}

#13 tva1982

tva1982

    Пользователь

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

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

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

Найдите в вашем файле стилей main.css

#bar .rever {
color: #FF9B20;
float: right;
font: 12px/64px 'Cuprum',sans-serif;
margin: 0;
overflow: hidden;
padding: 6px 15px 0 0;
width: 250px;
}

и замените на

#bar .rever {
color: #FF9B20;
float: right;
font: 12px/64px 'Cuprum',sans-serif;
margin: 0;
padding: 6px 15px 0 0;
width: 250px;
}

Теперь отражается содержимое корзины, но не совсем красиво:

Изображение

т.е. межстрочный интервал ну очень уж крупный, и если есть скидка по группе, то пишет "undefined".

Также при добавлении товара в корзину:

Изображение

При наведении курсора на кнопку "Продолжить покупки" в окне, также выскакивает содержимое корзины. Как это убрать?

#14 Сake

Сake

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

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

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

Цитата

т.е. межстрочный интервал ну очень уж крупны

Добавьте в ваш файл стилей main.css

.cart-price {
	white-space: nowrap;
}
.cart-info .cart-item * {
	line-height: 20px;
}

Цитата

если есть скидка по группе, то пишет "undefined"

Пожалуйста, сообщите адрес товара при котором проявляется данная ошибка.

Цитата

При наведении курсора на кнопку "Продолжить покупки" в окне, также выскакивает содержимое корзины. Как это убрать?

В данном случае есть несколько вариантов решения проблемы:
1. Убрать стандартное сообщение при добавлении товара в корзину.
2. Отключить отображение добавленного окна корзины при добавлении товара в корзину.

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

#15 tva1982

tva1982

    Пользователь

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

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

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

Добавьте в ваш файл стилей main.css

.cart-price {
white-space: nowrap;
}
.cart-info .cart-item * {
line-height: 20px;
}



Пожалуйста, сообщите адрес товара при котором проявляется данная ошибка.



В данном случае есть несколько вариантов решения проблемы:
1. Убрать стандартное сообщение при добавлении товара в корзину.
2. Отключить отображение добавленного окна корзины при добавлении товара в корзину.

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

Ошибку показывает на саму скидку:

Изображение

#16 Сake

Сake

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

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

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

Найдите в файле main.js строку

var price = $('<td>').addClass('cart-price')
								  .append($(this).find('td.fnt12b:eq(2)'))
								  .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.'));

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

var price = $('<td>').addClass('cart-price')
								  .append($(this).find('td.fnt12b:eq(2)'))
								  .append($('<span class="prd-count">').append($(this).find('input.number').length ? ($(this).find('input.number').val() + ' шт.') : ($(this).find('.number').html())));

#17 tva1982

tva1982

    Пользователь

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

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

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

Найдите в файле main.js строку

var price = $('<td>').addClass('cart-price')
								 .append($(this).find('td.fnt12b:eq(2)'))
								 .append($('<span class="prd-count">').append($(this).find('input.number').val() + ' шт.'));

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

var price = $('<td>').addClass('cart-price')
								 .append($(this).find('td.fnt12b:eq(2)'))
								 .append($('<span class="prd-count">').append($(this).find('input.number').length ? ($(this).find('input.number').val() + ' шт.') : ($(this).find('.number').html())));

ОК. Спасибо все работает
Обратно в Корзина


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. → Корзина
  6. Privacy Policy