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


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


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

#61 bg999

bg999

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

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

Отправлено 05 Июль 2013 - 13:27

Просмотр сообщенияСake (05 Июль 2013 - 01:01) писал:

Попробуйте сделать следующее - в файле стилей main.css найдите и удалите

#nyroModalBg {
background: none repeat scroll 0 0 transparent !important;
}

далее в шаблоне "Ajax Добавление товара в корзину" найдите

<script>
$('#nyroModalFull').hide();
$('.nyroModalClose').trigger('click');
updateCartInfo();
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');
$('#cartInfo').find('.cart-info').addClass('selected');
}, 1000);
setTimeout(function() {
$('.cart-preloaded').removeClass('fixed');
$('#cartInfo').find('.cart-info').removeClass('selected');
}, 5000);
}
</script>

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

// Если нужно просто добавить в корзину и продолжить покупки
} 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;
}
});
// Клик по ячейке с изображением означает клик по картинке

и замените на

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



Супер))) теперь все сработало)



Просмотр сообщенияСake (05 Июль 2013 - 01:01) писал:

К сожалению, все же этого реализовать нельзя, так как эти данные отображаются системно и выводятся с помощью стандартного кода

<snap style="font-size:12px; line-height: 20px; color: #858484;">{% IFNOT cart_items.DISTINCTIVE_PROPERTIES_EMPTY %}<span>{% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %}</span>{% ENDIF %}
	 </snap>

В данном случае если данные не выводятся, то вывести их другим способом нельзя.


В этом вопросе не понятно, так а этот код можно поставить в корзину, про который вы говорите выше?

#62 Сake

Сake

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

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

Отправлено 06 Июль 2013 - 00:11

Этот код у вас уже и так есть в корзине. Данный код выводит информацию о свойствах товара, например таких как (кг., шт.) и т.д Повлиять на отображение данной информации нельзя. Например если она не отображается, то заставить её отображаться нельзя.

#63 bg999

bg999

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

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

Отправлено 09 Июль 2013 - 18:59

Добрый вечер! Скажите пожалуйста куда могли подеваться маленькие картинки товаров на странице корзины, буквально вчера все было на месте, очень жду помощи от вас мой сайт http://cosmetikova.ru

#64 Koderhan

Koderhan

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

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

Отправлено 09 Июль 2013 - 19:12

Просмотр сообщенияbg999 (09 Июль 2013 - 18:59) писал:

Добрый вечер! Скажите пожалуйста куда могли подеваться маленькие картинки товаров на странице корзины, буквально вчера все было на месте, очень жду помощи от вас мой сайт
Сейчас на странице корзины картинки нормально отображаются. ScreenShot 739.png

#65 bg999

bg999

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

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

Отправлено 09 Июль 2013 - 20:36

Спасибо за оперативный ответ, да тоже заметил, похоже на волшебство то не было их а потом спустя мин 30 снова начали отображаться

#66 RuslanJ

RuslanJ

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

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

Отправлено 20 Июль 2013 - 13:38

Просмотр сообщенияСake (27 Июнь 2013 - 03:07) писал:

Все правильно, просто еще данная корзина с информацией не доделана. Осталось вставить в файл main.js следующий код

$(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 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'));
		 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';
	 });
}
});
}

а в файл стилей main.css следующий

.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;
}

далее в шаблон "Ajax добавление товара в корзину" необходимо вставить

updateCartInfo();

после строки

<script>

Подскажите пожалуйста сделал как описано, но всплывающего окна так и нет. Что мне надо сделать?
Вроде посмотрел по исходникам все как у bg999, но видимо что то упустил

Или это только для шаблона мокко?
Проделал всё то же в шаблоне мокко безрезультатно. Жду помощи. Сайт bentobox.storeland.ru

#67 Сake

Сake

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

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

Отправлено 23 Июль 2013 - 00:49

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

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 54px;
  left: 380px;
  white-space:nowrap;
  overflow:hidden;
  height:20px;
  width: 340px;
}

и замените на

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 54px;
  left: 380px;
  white-space:nowrap;
  height:20px;
  width: 340px;
}


#68 RuslanJ

RuslanJ

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

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

Отправлено 23 Июль 2013 - 08:02

Заменил, но ничего не произошло. Как не было всплывающего окна корзины, так и нет... :(

#69 Сake

Сake

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

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

Отправлено 24 Июль 2013 - 00:20

Используйте следующий код для шаблона "Корзина"

<div class="page-headline">
  <h1>Корзина</h1>
</div>
<div class="pad-box">
  <!-- Строка пути -->
  <div id="site-path">
	<p>
	  <a href="http://{NET_DOMAIN}/">Главная</a> » <span class="current">Корзина</span>
	</p>
  </div>
  <!-- end Строка пути -->

  <form action="{CART_URL}" method="post" class="cartForm">
	<div>
   
	  {% IF FORM_NOTICE %}<h5 class="{% IF FORM_NOTICE_IS_GOOD %}green{% ELSE %}errorMessage{% ENDIF %}">{FORM_NOTICE | nl2br}</h5>{% ENDIF %}
   
	  {% IF cart_items_empty %}
		<div class="cartFormEmpty">
		  <h3>Ваша корзина пуста</h3><br />
		  Предлагаем выбрать нужный Вам товар из <a href="{CATALOG_URL}">каталога</a>.
		</div>
	  {% ELSE %}
		  <input type="hidden" name="hash" value="{HASH}" />
		  <table class="cartFormTable">
			<thead class="cartFormThead">
			  <tr>
				<th colspan="2">Наименование</th>
				<th>Кол-во</th>
				<th>Цена</th>
				<th>Общая сумма</th>
				<th>Удалить</th>
			  </tr>
			</thead>
			<tbody class="cartFormTbody" id="shopping-cart-table">
			  {% FOR cart_items %}
			  <tr>
				<td class="cell1">
				  <a href="{cart_items.GOODS_URL}"><img class="goods-image-icon goods-image-icon-square" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a>
				</td>
				<td class="cell2">
				  <a href="{cart_items.GOODS_URL}" class="cartFormTbodyHeader product-name">
					{cart_items.GOODS_NAME}
				   
					<!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
					{% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %}
				  </a>
 
				  <!-- Путь к категории, из которой заказали товара -->
				  <div class="cartFormTbodyNavigate">
					<a href="http://{NET_DOMAIN}/">Главная</a>
					  {% FOR catalog_path %}
						   &raquo; <a href="{cart_items.catalog_path.URL}" >{cart_items.catalog_path.NAME}</a>
					  {% ENDFOR %}
				  </div>
				 
				</td>
				<td class="cell3">
				  <input name="form[quantity][{cart_items.GOODS_MOD_ID}]" value="{cart_items.ORDER_LINE_QUANTITY}" /> {cart_items.GOODS_MOD_MEASURE_NAME}
				</td>
				<td class="cell4 num">
				  {cart_items.GOODS_MOD_PRICE_NOW | money_format}
				</td>
				<td class="cell5 num">
				  <span class="cart-price">{cart_items.ORDER_LINE_PRICE_NOW | money_format}</span>
				</td>
				<td class="cell6">
				  <a href="{cart_items.ORDER_LINE_DELETE_URL}"><img src="{ASSETS_IMAGES_PATH}cartDelete.png" /></a>
				</td>
			  </tr>
			  {% ENDFOR %}
			</tbody>
			<tfoot class="cartFormTfoot">
			  <tr>
				<td colspan="2" class="cartFormTfootTruncate"><a href="{CART_TRUNCATE_URL}" onclick="return confirm('Вы действительно хотите удалить все товары из корзины?')">Очистить корзину</a></td>
				<td colspan="4" class="cartFormTfootSum">
				  <table class="cartFormTfootSumTable">
					<tr>
					  <td class="cell1">Итого:&nbsp;</td>
					  <td class="cell2 price">
						{% FOR cart_sum %}
						  {cart_sum.NOW | money_format}<br />
						{% ENDFOR %}
					  </td>
					</tr>
				  </table>
				</td>
			  </tr>
			  <tr>
				<td colspan="6" class="cartFormTfootButtons"><br /><input class="more-link onlybutton" type="submit" value="Пересчитать"> <input class="more-link" type="submit" name="next_step" value="Оформить заказ"></td>
			  </tr>
			</tfoot>
		  </table>
		 
	  {% ENDIF %}
	</div>
  </form>
</div>

Вам необходимо заменить весь код вашего шаблона.

#70 Alexandr

Alexandr

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

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

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

Помогите мне пожалуйста сделать такую же корзину, а то я не смог найти фразу <divstyle="position: absolute; top:15px; right:20px;"id="cartInfo">, и дальше у меня выполняя все действия все съехало и ничего в результате не получилось. У меня дизайн техника.

#71 Vaccina

Vaccina

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

  • Модераторы
  • 23 864 сообщений

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

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

#72 Alexandr

Alexandr

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

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

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

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

Данная информация не предусматривалась для использования в шаблоне "Техника". Хотя её можно попробовать адаптировать и для данного шаблона. Пожалуйста, сообщите номер вашего аккаунта.
Буду вам очень благодарен. Аккаунт SL-222981

#73 Сake

Сake

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

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

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

В шаблоне "HTML" после строки

<div class="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>

далее в файл стилей 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 > $('.mymenu').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';
		 });
}
});
}

Данный код еще не результирующий для вас. Как сделаете данные изменения, сообщите нам об этом.

#74 Alexandr

Alexandr

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

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

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

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

В шаблоне "HTML" после строки

<div class="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>

далее в файл стилей 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 > $('.mymenu').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';
		 });
}
});
}

Данный код еще не результирующий для вас. Как сделаете данные изменения, сообщите нам об этом.

сделал, что дальше

#75 Alexandr

Alexandr

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

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

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

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

В шаблоне "HTML" после строки

<div class="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>

далее в файл стилей 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 > $('.mymenu').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';
		 });
}
});
}

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

#76 Сake

Сake

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

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

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

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

if(scrollTop > $('.mymenu').offset().top)

и замените на

if(scrollTop > $('.cartInfo').offset().top)

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

.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: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;
}

и замените в них свойство right на left, в результате получится

.cart-info {
		background: #FFFFFF;
		box-shadow: 0 0 2px #BABABA;
		height: 200px;
		position: absolute;
		left: 80px;
		top: 55px;
		width: 360px;
		z-index: 99999;
		display: none;
}
.cart-info:after {
		content: ' ';
		top: -20px;
		left: 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;
		left: 49px;
		position: absolute;
		border-color: transparent transparent #fff transparent;
		border-style: solid;
		border-width: 9px;
		height:0;
		width:0;
		z-index: 3;
}

Далее в шаблоне "HTML" найдите

<div class="cartInfo">

и замените на

<div class="cartInfo" id="cartInfo">


#77 Alexandr

Alexandr

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

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

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

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

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

if(scrollTop > $('.mymenu').offset().top)

и замените на

if(scrollTop > $('.cartInfo').offset().top)

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

.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: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;
}

и замените в них свойство right на left, в результате получится

.cart-info {
	 background: #FFFFFF;
	 box-shadow: 0 0 2px #BABABA;
	 height: 200px;
	 position: absolute;
	 left: 80px;
	 top: 55px;
	 width: 360px;
	 z-index: 99999;
	 display: none;
}
.cart-info:after {
	 content: ' ';
	 top: -20px;
	 left: 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;
	 left: 49px;
	 position: absolute;
	 border-color: transparent transparent #fff transparent;
	 border-style: solid;
	 border-width: 9px;
	 height:0;
	 width:0;
	 z-index: 3;
}

Далее в шаблоне "HTML" найдите

<div class="cartInfo">

и замените на

<div class="cartInfo" id="cartInfo">

Сделал как вы сказали но как то все не очень красиво отображается, хотелось бы чтобы как на этом сайте http://cosmetikova.ru/ вскакивала при наведении, и ещё кнопочку удалить товар добавить и очистить корзину

#78 Сake

Сake

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

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

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

Теперь вам необходимо в файле 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('#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';
				 });
}
});
}


#79 Alexandr

Alexandr

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

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

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

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

Теперь вам необходимо в файле 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('#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';
				 });
}
});
}

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

#80 Vaccina

Vaccina

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

  • Модераторы
  • 23 864 сообщений

Отправлено 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;
}

Цитата

как сделать в ней кнопки для удаления какого то одного товара и кнопку очистить корзину?

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




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

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