Сообщений в теме: 6

[tega4]

Здравствуйте уважаемые модераторы!
Интересует вопрос, как сделать отдельный стиль для фиксированной корзины?
Т.е. когда клиент находится в самом начале страницы, корзина отображается там где сейчас, а как только скроллинг начинает закрывать корзину появляется прилипшая к верху окна корзинка уже с другим стилем.
Такое вообще возможно?
Также интересуют те же махинации с блоком контактов.
SL-268427

[Vaccina]

Для фиксации достаточно в стилях

#cartInfo {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	float: right;
	font: 24px 'OwnHand',Times;
	height: 129px;
	overflow: hidden;
	position: absolute;
	right: 70px;
	text-align: left;
	top: 90px;
	vertical-align: bottom;
	white-space: nowrap;
	width: 200px;
}

вместо    position: absolute; указать position: fixed;
аналогичная ситуация и с контактами

[tega4]

Vaccina (29 Май 2014 - 04:07) писал:

Для фиксации достаточно в стилях

#cartInfo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
float: right;
font: 24px 'OwnHand',Times;
height: 129px;
overflow: hidden;
position: absolute;
right: 70px;
text-align: left;
top: 90px;
vertical-align: bottom;
white-space: nowrap;
width: 200px;
}

вместо position: absolute; указать position: fixed;
аналогичная ситуация и с контактами

спасибо
что надо для фиксации сделать я знаю, а как задать им иной стиль от того что есть сейчас?

[Castiel]

tega4 (29 Май 2014 - 06:09) писал:

спасибо
что надо для фиксации сделать я знаю, а как задать им иной стиль от того что есть сейчас?

Здравствуйте, если вы хотите использовать другие стили для корзины при скролинге, то вам необходимо будет
Добавить код новой корзины в шаблоне HTML (продублировать старый код изменив все классы)
Добавить новые классы и стили для этой корзины
Добавить скрипт который будет скрывать старую корзину и отображать новую при скролинге.

[tega4]

Castiel (29 Май 2014 - 07:53) писал:

Здравствуйте, если вы хотите использовать другие стили для корзины при скролинге, то вам необходимо будет
Добавить код новой корзины в шаблоне HTML (продублировать старый код изменив все классы)
Добавить новые классы и стили для этой корзины
Добавить скрипт который будет скрывать старую корзину и отображать новую при скролинге.

спасибо,не подскажите как конкретно это прописать?

[Castiel]

tega4 (29 Май 2014 - 09:08) писал:

спасибо,не подскажите как конкретно это прописать?

В файле "HTML".
После кода:

<!-- end Корзина -->

Добавить:

<!-- Корзина2 -->
	  <div id="cartInfo2">
		 <a href="{CART_URL}"><img src="{ASSETS_IMAGES_PATH}korzina.png" style="width: 68px; height: 64px; padding-left:30px; padding-top: 0px;"></a>
		<div class="tecst">Корзина:<br />
					 <span id="cartSum">
						 {% IF cart_count_empty %}
					  <span class="cartSum1">0 {CURRENCY_NAME} </span>
					 {% ELSE %}
						{% FOR cart_sum %}
					  <span class="cartSum1">{cart_sum.NOW | money_format}<br /></span>
						 {% ENDFOR %}
					  {% ENDIF %}</div>
		 <div class="ofzak">
		  <a href="{CART_URL}">Оформить заказ</a>
		</div>
	  </div>
		 <!-- end Корзина2 -->

В конец файла "main.css".
Добавить код:

/*cartInfo2*/
#cartInfo2 {
  display:none;
  z-index:999999;
  float:right;
  position:fixed;
  font-size: 15px;
  top: 0px;
  right: 0px;
  white-space:nowrap;
  overflow:hidden;
  height:171px;
  width: 284px;
  text-align: left;
  vertical-align: bottom;
  background:url({ASSETS_IMAGES_PATH}bg-korzina.png) no-repeat;
}
#cartInfo2:hover {
  background:url({ASSETS_IMAGES_PATH}bg-korzina-hov.png) no-repeat;
}
#cartInfo2 .tecst {
  padding-left: 65px;
  margin-top: -60px;
  text-align: center;
  vertical-align: bottom;
  color:#000;
  font-size:16px;
}
#cartInfo2 .ofzak {
  margin-top:-5px;
  margin-left:40px;
  padding-top: 10px;
  text-align: center;
  vertical-align: bottom;
}
#cartInfo2 a {
  color:#ff0;
  text-transform: uppercase;
  font: 18px Times New Roman, sans-serif;
  font-weight:bolder;

}
#cartInfo2 a:hover {
  color:#000;
  text-transform: uppercase;
  font: 18px Times New Roman, sans-serif;
  font-weight:bolder;

}

В файле "main.js".
Добавить в конце:

// hide #cart2
  $("#cartInfo2").hide();

  // fade in #back-top
$(window).scroll(function () {
if ($(this).scrollTop() > 120) {
$('#cartInfo2').fadeIn();
} else {
$('#cartInfo2').fadeOut();
}
});

В файле "Ajax добавление товара в корзину".
Найти:

$('#cartSum').html($('.newCartSum').html());
$('#cartSum1').html($('.newCartCount').html());

Заменить:

$('#cartSum').html($('.newCartSum').html());
$('#cartSum1').html($('.newCartCount').html());
$('.cartSum1').html($('.newCartSum').html());

[tega4]

большое спасибо, все корректно работает)