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


Оформление Корзины


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

#81 Alexandr

Alexandr

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

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

Отправлено 15 Август 2013 - 12:33

Просмотр сообщенияVaccina (15 Август 2013 - 01:15) писал:

За это отвечают следующие классы в вашем файле стилей main.css

.cart-info {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 0 2px #BABABA;
display: none;
height: 200px;
left: 1px;
position: absolute;
top: 55px;
width: 360px;
z-index: 99999;
}
.cart-info:after {
border-color: transparent transparent rgba(132, 131, 131, 0.3);
border-style: solid;
border-width: 10px;
content: " ";
height: 0;
left: 48px;
position: absolute;
top: -20px;
width: 0;
z-index: 2;
}
.cart-info:before {
border-color: transparent transparent #FFFFFF;
border-style: solid;
border-width: 9px;
content: " ";
height: 0;
left: 49px;
position: absolute;
top: -18px;
width: 0;
z-index: 3;
}

Изменять нужно свойство left. Классы before и after задают положение направляющей стрелки.



Найдите в файле стилей

.cart-info .cart-total button {
display: inline-block;
float: left;
margin-top: -3px;
}

и замените на

.cart-info .cart-total button {
display: inline-block;
margin-top: -3px;
}



Пожалуйста, сообщите где вы хотите отображать кнопку очистки корзины?

Спасибо все вроде работает, кнопку очисти корзину хочу сделать в верхнем левом углу. Так же интересны кнопки удаляющие только один товар. И ещё как сделать чтобы в каталоге нажимая на кнопку добавить в корзину не высвечивалась табличка "перейти в корзину" "продолжить покупки"?

#82 Vaccina

Vaccina

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

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

Отправлено 16 Август 2013 - 01:24

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

.cart-clear {
	display: block;
float: left;
}
.cart-remove {
	vertical-align: middle;
padding-right: 10px;
}

далее в файле 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('td:eq(2)').length) {
																 var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
																 var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
																 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('#shopping-cart-table tr').size()) {
								 $('.cart-count').html('<a class="cart-clear" href="/cart/truncate">Очистить корзину</a> Корзина '
								 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
								 + $(html).find('.price .num').closest('.price').html())
		 .find('.cart-clear').click(function() {
			$.get($(this).attr('href'), function() {
			 location.reload();
		 });
			return(false);
		 });
	   
								 var item = $('<table class="cart-table cartForm">');
								 $(html).find('#shopping-cart-table tr').each(function() {
								 if($(this).find('td:eq(2)').length) {
				var remove = $('<td>').addClass('cart-remove').append($(this).find('td:eq(0)').html())
		  .find('.btn-remove2').click(function() {
			  $.get($(this).attr('href'), function() {
			   updateCartInfo();
		   });
		  });
										var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
										var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
										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';
								 });
}
});
}

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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm').submit(function(){
	// Если нужно быстро положить в корзину
	if($(this).attr('rel') == 'quick') {
	  return true;
   
	// Если нужно просто добавить в корзину и продолжить покупки
	} else {
	  $(this).nyroModalManual({
		formIndicator: 'ajax_q',  // Value added when a form is sent
		minWidth: 420, // Minimum width
		minHeight: 150, // Minimum height
		gallery: null // Gallery name if provided
	  });
	  return false;
	 }
  });

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm').submit(function(){
	// Если нужно быстро положить в корзину
	if($(this).attr('rel') == 'quick') {
	  return true;
   
	// Если нужно просто добавить в корзину и продолжить покупки
	} else {
	  /*$(this).nyroModalManual({
		formIndicator: 'ajax_q',  // Value added when a form is sent
		minWidth: 420, // Minimum width
		minHeight: 150, // Minimum height
		gallery: null // Gallery name if provided
	  });*/
   var data = $(this).serializeArray();
	  data.push({name: 'ajax_q', value: 1})
	  $.post($(this).attr('action'), data, $.proxy(function(data, textStatus, jqXHR) {
		  if($(data).find('.success-msg').length) {
				 updateCartInfo();
		  }
		  else {
				$.fn.nyroModalManual({
				  content: data,
				  gallery: null,
				  resizable: false,
				  autoSizable: true,
				  windowResize: false,
				});
		  }
		}, this));
	  return false;
	 }
  }); 


#83 Alexandr

Alexandr

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

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

Отправлено 16 Август 2013 - 09:57

Просмотр сообщенияVaccina (16 Август 2013 - 01:24) писал:

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

.cart-clear {
display: block;
float: left;
}
.cart-remove {
vertical-align: middle;
padding-right: 10px;
}

далее в файле 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('td:eq(2)').length) {
																 var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
																 var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
																 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('#shopping-cart-table tr').size()) {
								 $('.cart-count').html('<a class="cart-clear" href="/cart/truncate">Очистить корзину</a> Корзина '
								 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
								 + $(html).find('.price .num').closest('.price').html())
		 .find('.cart-clear').click(function() {
		 $.get($(this).attr('href'), function() {
			 location.reload();
		 });
		 return(false);
		 });
	
								 var item = $('<table class="cart-table cartForm">');
								 $(html).find('#shopping-cart-table tr').each(function() {
								 if($(this).find('td:eq(2)').length) {
			 var remove = $('<td>').addClass('cart-remove').append($(this).find('td:eq(0)').html())
		 .find('.btn-remove2').click(function() {
			 $.get($(this).attr('href'), function() {
			 updateCartInfo();
		 });
		 });
									 var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
									 var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
									 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';
								 });
}
});
}

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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm').submit(function(){
// Если нужно быстро положить в корзину
if($(this).attr('rel') == 'quick') {
	 return true;

// Если нужно просто добавить в корзину и продолжить покупки
} else {
	 $(this).nyroModalManual({
	 formIndicator: 'ajax_q', // Value added when a form is sent
	 minWidth: 420, // Minimum width
	 minHeight: 150, // Minimum height
	 gallery: null // Gallery name if provided
	 });
	 return false;
	 }
});

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm').submit(function(){
// Если нужно быстро положить в корзину
if($(this).attr('rel') == 'quick') {
	 return true;

// Если нужно просто добавить в корзину и продолжить покупки
} else {
	 /*$(this).nyroModalManual({
	 formIndicator: 'ajax_q', // Value added when a form is sent
	 minWidth: 420, // Minimum width
	 minHeight: 150, // Minimum height
	 gallery: null // Gallery name if provided
	 });*/
var data = $(this).serializeArray();
	 data.push({name: 'ajax_q', value: 1})
	 $.post($(this).attr('action'), data, $.proxy(function(data, textStatus, jqXHR) {
		 if($(data).find('.success-msg').length) {
				 updateCartInfo();
		 }
		 else {
			 $.fn.nyroModalManual({
				 content: data,
				 gallery: null,
				 resizable: false,
				 autoSizable: true,
				 windowResize: false,
			 });
		 }
	 }, this));
	 return false;
	 }
});

Все сделал но кнопка не появилась.=(((
И ещё вопросик сразу как сделать чтобы в эту всплывающую корзину можно было попасть не только через стрелочку, а в любом месте, может сделать чтобы она после отвода мышки показывалась ещё пару секунд или ещё какое нибудь решение сможете предложить? Заранее благодарен

#84 Сake

Сake

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

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

Отправлено 17 Август 2013 - 00:32

Попробуйте следующий измененный код
function updateCartInfo() {
$.get('/cart?only_body=1', function(html) {
if($(html).find('#shopping-cart-table tr').size()) {
	 $('.cart-count').html('<a class="cart-clear" href="/cart/truncate">Очистить корзину</a> Корзина '
																 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
																 + $(html).find('.price .num').closest('.price').html())
				 .find('.cart-clear').click(function() {
				 $.get($(this).attr('href'), function() {
						 location.reload();
				 });
				 return(false);
				 });
	
																 var item = $('<table class="cart-table cartForm">');
																 $(html).find('#shopping-cart-table tr').each(function() {
																 if($(this).find('td:eq(2)').length) {
																
																
						 var remove = $('<td>').addClass('cart-remove').append($(this).find('td:eq(0)').html())
				 .find('.btn-remove2').click(function() {
						 $.get($(this).attr('href'), function() {
						 updateCartInfo();
				 });
				 }).end();
																		 var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
																		 var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
																		
																		 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(remove).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';
																 });
}
});
}

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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm')

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsDataForm')

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

.cart-remove {
vertical-align: middle;
padding-right: 10px;
}

и замените на

.cart-remove {
vertical-align: middle !important;
padding-right: 10px !important;
}

Цитата

И ещё вопросик сразу как сделать чтобы в эту всплывающую корзину можно было попасть не только через стрелочку, а в любом месте, может сделать чтобы она после отвода мышки показывалась ещё пару секунд или ещё какое нибудь решение сможете предложить? Заранее благодарен

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

$(this).find('.cart-info').removeClass('selected');

и заменить на

setTimeout($.proxy(function() {
$(this).find('.cart-info').removeClass('selected');
}, this), 2000);


#85 Alexandr

Alexandr

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

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

Отправлено 17 Август 2013 - 13:25

Просмотр сообщенияСake (17 Август 2013 - 00:32) писал:

Попробуйте следующий измененный код
function updateCartInfo() {
$.get('/cart?only_body=1', function(html) {
if($(html).find('#shopping-cart-table tr').size()) {
	 $('.cart-count').html('<a class="cart-clear" href="/cart/truncate">Очистить корзину</a> Корзина '
																 + '<span class="count">' + $(html).find('#shopping-cart-table tbody > tr').size() + '</span> '
																 + $(html).find('.price .num').closest('.price').html())
				 .find('.cart-clear').click(function() {
				 $.get($(this).attr('href'), function() {
						 location.reload();
				 });
				 return(false);
				 });
	
																 var item = $('<table class="cart-table cartForm">');
																 $(html).find('#shopping-cart-table tr').each(function() {
																 if($(this).find('td:eq(2)').length) {
																
																
						 var remove = $('<td>').addClass('cart-remove').append($(this).find('td:eq(0)').html())
				 .find('.btn-remove2').click(function() {
						 $.get($(this).attr('href'), function() {
						 updateCartInfo();
				 });
				 }).end();
																		 var image = $('<td>').addClass('cart-image').append($(this).find('td:eq(1)').html());
																		 var name = $('<td>').addClass('cart-name').append($(this).find('td:eq(2)').html());
																		
																		 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(remove).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';
																 });
}
});
}

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

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm')

и замените на

$('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsDataForm')

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

.cart-remove {
vertical-align: middle;
padding-right: 10px;
}

и замените на

.cart-remove {
vertical-align: middle !important;
padding-right: 10px !important;
}



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

$(this).find('.cart-info').removeClass('selected');

и заменить на

setTimeout($.proxy(function() {
$(this).find('.cart-info').removeClass('selected');
}, this), 2000);

Всё бы замечательно, но теперь после нажатия кнопки добавить в корзину, она автоматически не появляется, и цифра рядом с корзиной не меняется пока не обновишь страницу(( Подскажите как исправить

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

#86 Сake

Сake

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

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

Отправлено 20 Август 2013 - 05:18

Попробуйте в шаблоне "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>

и заменить на

<script>
updateCartInfo();
if(!$('.cart-preloaded').hasClass('fixed')) {
  setTimeout(function() {
	  $('.cart-preloaded').addClass('fixed')
	  .find('.cart-info').addClass('selected');
	  setTimeout(function() {
		 $('.cart-preloaded').removeClass('fixed')
		 .find('.cart-info').removeClass('selected');
	  }, 5000);
  }, 1000);
}
</script>


#87 Alexandr

Alexandr

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

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

Отправлено 20 Август 2013 - 10:38

Просмотр сообщенияСake (20 Август 2013 - 05:18) писал:

Попробуйте в шаблоне "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>

и заменить на

<script>
updateCartInfo();
if(!$('.cart-preloaded').hasClass('fixed')) {
setTimeout(function() {
	 $('.cart-preloaded').addClass('fixed')
	 .find('.cart-info').addClass('selected');
	 setTimeout(function() {
		 $('.cart-preloaded').removeClass('fixed')
		 .find('.cart-info').removeClass('selected');
	 }, 5000);
}, 1000);
}
</script>

Заменил не помогло

#88 Сake

Сake

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

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

Отправлено 21 Август 2013 - 02:37

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

setcookie error
TypeError: h.data is null

в связи с чем прерывается дальнейшее исполнение javascript кода, а именно установленный setTimeout. Данная информация была переданная разработчикам. Думаю что после устранения данной ошибки - корзина будет отображаться после добавления товара. Пожалуйста, подождите.

#89 Alexandr

Alexandr

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

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

Отправлено 21 Август 2013 - 10:27

Просмотр сообщенияСake (21 Август 2013 - 02:37) писал:

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

setcookie error
TypeError: h.data is null

в связи с чем прерывается дальнейшее исполнение javascript кода, а именно установленный setTimeout. Данная информация была переданная разработчикам. Думаю что после устранения данной ошибки - корзина будет отображаться после добавления товара. Пожалуйста, подождите.

А сколько примерно ждать?

#90 Сake

Сake

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

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

Отправлено 21 Август 2013 - 21:30

Пожалуйста, отправьте мне в ЛС данные (логин, пароль) доступа к вашей панели управления.

Цитата

А сколько примерно ждать?

В скором времени проблема будет решена.

#91 Flor@@

Flor@@

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

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

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

помогите добавить значок корзины, пожалуйста вот сюда:  <a href="{CART_URL}">Корзина:</a>. У меня не получается правильно.

#92 Taisia

Taisia

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

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

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

вы хотите видеть изображение корзины рядом со словом КОРЗИНА или вместо него ?

#93 Flor@@

Flor@@

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

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

Отправлено 01 Ноябрь 2013 - 08:47

Именно рядом, слева от ссылки (существующей сейчас).

#94 miyako

miyako

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

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

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

Просмотр сообщенияotdyh-i-son.ru (01 Ноябрь 2013 - 08:47) писал:

Именно рядом, слева от ссылки (существующей сейчас).

Найдите код в шаблоне HTML -
<div id="cartInfo">
и после него добавьте код изображения -
<img src="путь до изображения" />


#95 Flor@@

Flor@@

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

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

Отправлено 01 Ноябрь 2013 - 16:07

это я пробовала, не получается так, смотрите скрин:
картинка: ru/basket.png?0960

Прикрепленные изображения

  • вид сайта 24.jpg


#96 ne_yana

ne_yana

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

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

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

Просмотр сообщенияotdyh-i-son.ru (01 Ноябрь 2013 - 16:07) писал:

это я пробовала, не получается так, смотрите скрин:
картинка: ru/basket.png?0960
Здравствуйте, вставьте
<img src="файл" style="
	float: left;
	margin-top: -17px;
">
В файле main.css замените
#cartInfo {
margin-left: 750px;
position: absolute;
font-weight: bold;
font-size: 17px;
top: 88px;
white-space: nowrap;
overflow: hidden;
height: 25px;
width: 220px;
color: white;
}
на
#cartInfo {
margin-left: 714px;
position: absolute;
font-weight: bold;
font-size: 17px;
top: 88px;
white-space: nowrap;
height: 25px;
width: 220px;
color: white;
}


#97 Flor@@

Flor@@

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

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

Отправлено 01 Ноябрь 2013 - 22:02

спасибо огромное, помогло))))).




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

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