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


Как Сделать Вот Такую Всплывающую Корзину?

Автор ogonek7777, 17 мая 2013 21:22

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

#1 ogonek7777

ogonek7777

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

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

Отправлено 17 Май 2013 - 21:22

Мой сайт
пример такой корзины: закваски-нн.рф

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

  • 179.JPG

#2 Ботаникус

Ботаникус

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

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

Отправлено 17 Май 2013 - 21:38

Просмотр сообщенияogonek7777 (17 Май 2013 - 21:22) писал:

Мой сайт
пример такой корзины: закваски-нн.рф
супер идея, постою послушаю)
а у меня Ваш сайт почему то не открывается, загружается только полоса вверху

#3 Сake

Сake

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

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

Отправлено 18 Май 2013 - 03:10

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

<script>
$(function() {
  $(window).scroll(function() {
	 if($(this).scrollTop() > 100) {
	 $('#float-cart, #back-top').fadeIn();
	 else {
		$('#float-cart, #back-top').fadeOut();
	 } 
  });
  $("#back-top").hide();
  $('#back-top a').click(function () {
	 $('body,html').animate({scrollTop: 0}, 800);
  return(false);
  });
});
</script>
<style>
#back-top {
	margin-left: 890px;
	position: fixed;
	top: 10px;
}
#back-top a {
	color: #3CAA3C;
	display: block;
	font: 10pt arial,helvetics,sens-serif;
	position: relative;
	text-align: center;
	transition: all 1s ease 0s;
	width: 108px;
}
#back-top a:hover {
	color: #000000;
}
#float-cart {
	background-color: #3CAA3C;
	border-bottom: 1px solid #009900;
	border-radius: 0 0 15px 15px;
	box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
	color: #FFFFFF;
	display: none;
	font: 10pt arial,helvetics,sens-serif;
	margin-left: 132px;
	opacity: 0.8;
	padding: 10px 0;
	position: fixed;
	top: 0;
	width: 1000px;
	z-index: 10000;
}
#float-cart li {
	color: #FFFFFF;
	float: left;
	list-style: none outside none;
	padding: 0 20px;
}
#float-cart a {
	color: #C0EEFA;
	font: 10pt arial,helvetics,sens-serif;
}
#float-cart a:hover {
	color: #FFFFFF;
	font: 10pt arial,helvetics,sens-serif;
}
</style>
<!-- Всплывающая панель -->
<div id="float-cart" class="cartInfo">
<ul onclick="document.location='{CART_URL}';">
	{% IF cart_count_empty %}	 
		<li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li> 
	{% ELSE %}
		{% FOR cart_sum %}	
			<li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li> 
		{% ENDFOR %}
	{% ENDIF %}
</ul>
<ul>
	<li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
<ul>
</div>
<!-- Всплывающая панель Конец -->

#4 Ботаникус

Ботаникус

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

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

Отправлено 18 Май 2013 - 07:44

спасибо! а страницу загружать не будет?) меня всё одно волнует)

#5 Vaccina

Vaccina

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

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

Отправлено 21 Май 2013 - 03:26

нет, не будет, данные толком нагрузки не несут да и отсутствуют изображения, панель залита цветом, так что дольше сайт грузиться от этого не начнет :)

#6 Bogdanovich4you

Bogdanovich4you

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

  • Пользователи
  • PipPipPip
  • 57 сообщений
  • ГородСанкт-Петербург

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

Расскажите, куда данный код вставлять?

#7 Сake

Сake

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

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

Отправлено 17 Сентябрь 2013 - 01:18

Данный код необходимо вставлять в шаблон "HTML". Например после тега <body>

#8 551

551

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

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

Отправлено 17 Сентябрь 2013 - 10:51

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

Данный код необходимо вставлять в шаблон "HTML". Например после тега <body>

Попробовал сделать - на сайте панель не появляется.

#9 miyako

miyako

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

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

Отправлено 17 Сентябрь 2013 - 12:01

Просмотр сообщения551 (17 Сентябрь 2013 - 10:51) писал:

Попробовал сделать - на сайте панель не появляется.

Какой код Вы устанавливаете?

#10 551

551

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

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

Отправлено 17 Сентябрь 2013 - 12:38

Просмотр сообщенияmiyako (17 Сентябрь 2013 - 12:01) писал:

Какой код Вы устанавливаете?

Вот этот сразу после <body>

<script>
$(function() {
  $(window).scroll(function() {
		 if($(this).scrollTop() > 100) {
		 $('#float-cart, #back-top').fadeIn();
		 else {
				$('#float-cart, #back-top').fadeOut();
		 }
  });
  $("#back-top").hide();
  $('#back-top a').click(function () {
		 $('body,html').animate({scrollTop: 0}, 800);
  return(false);
  });
});
</script>
<style>
#back-top {
		margin-left: 890px;
		position: fixed;
		top: 10px;
}
#back-top a {
		color: #3CAA3C;
		display: block;
		font: 10pt arial,helvetics,sens-serif;
		position: relative;
		text-align: center;
		transition: all 1s ease 0s;
		width: 108px;
}
#back-top a:hover {
		color: #000000;
}
#float-cart {
		background-color: #3CAA3C;
		border-bottom: 1px solid #009900;
		border-radius: 0 0 15px 15px;
		box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
		color: #FFFFFF;
		display: none;
		font: 10pt arial,helvetics,sens-serif;
		margin-left: 132px;
		opacity: 0.8;
		padding: 10px 0;
		position: fixed;
		top: 0;
		width: 1000px;
		z-index: 10000;
}
#float-cart li {
		color: #FFFFFF;
		float: left;
		list-style: none outside none;
		padding: 0 20px;
}
#float-cart a {
		color: #C0EEFA;
		font: 10pt arial,helvetics,sens-serif;
}
#float-cart a:hover {
		color: #FFFFFF;
		font: 10pt arial,helvetics,sens-serif;
}
</style>
<!-- Всплывающая панель -->
<div id="float-cart" class="cartInfo">
<ul onclick="document.location='{CART_URL}';">
		{% IF cart_count_empty %}	   
				<li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
		{% ELSE %}
				{% FOR cart_sum %}	 
						<li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
				{% ENDFOR %}
		{% ENDIF %}
</ul>
<ul>
		<li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
<ul>
</div>
<!-- Всплывающая панель Конец -->

#11 miyako

miyako

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

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

Отправлено 17 Сентябрь 2013 - 12:59

Просмотр сообщения551 (17 Сентябрь 2013 - 12:38) писал:

Вот этот сразу после <body>

<script>
$(function() {
$(window).scroll(function() {
		 if($(this).scrollTop() > 100) {
		 $('#float-cart, #back-top').fadeIn();
		 else {
			 $('#float-cart, #back-top').fadeOut();
		 }
});
$("#back-top").hide();
$('#back-top a').click(function () {
		 $('body,html').animate({scrollTop: 0}, 800);
return(false);
});
});
</script>
<style>
#back-top {
	 margin-left: 890px;
	 position: fixed;
	 top: 10px;
}
#back-top a {
	 color: #3CAA3C;
	 display: block;
	 font: 10pt arial,helvetics,sens-serif;
	 position: relative;
	 text-align: center;
	 transition: all 1s ease 0s;
	 width: 108px;
}
#back-top a:hover {
	 color: #000000;
}
#float-cart {
	 background-color: #3CAA3C;
	 border-bottom: 1px solid #009900;
	 border-radius: 0 0 15px 15px;
	 box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
	 color: #FFFFFF;
	 display: none;
	 font: 10pt arial,helvetics,sens-serif;
	 margin-left: 132px;
	 opacity: 0.8;
	 padding: 10px 0;
	 position: fixed;
	 top: 0;
	 width: 1000px;
	 z-index: 10000;
}
#float-cart li {
	 color: #FFFFFF;
	 float: left;
	 list-style: none outside none;
	 padding: 0 20px;
}
#float-cart a {
	 color: #C0EEFA;
	 font: 10pt arial,helvetics,sens-serif;
}
#float-cart a:hover {
	 color: #FFFFFF;
	 font: 10pt arial,helvetics,sens-serif;
}
</style>
<!-- Всплывающая панель -->
<div id="float-cart" class="cartInfo">
<ul onclick="document.location='{CART_URL}';">
	 {% IF cart_count_empty %}	
			 <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
	 {% ELSE %}
			 {% FOR cart_sum %}	
					 <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
			 {% ENDFOR %}
	 {% ENDIF %}
</ul>
<ul>
	 <li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
<ul>
</div>
<!-- Всплывающая панель Конец -->

Сейчас у Вас дублируется код. Посмотрите на строке 95 и на строке 177 шаблона HTML

Инструкция по установке кнопки наверх можно найти здесь - http://forum.storela...ерх/#entry27024

#12 551

551

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

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

Отправлено 17 Сентябрь 2013 - 15:24

Просмотр сообщенияmiyako (17 Сентябрь 2013 - 12:59) писал:

Сейчас у Вас дублируется код. Посмотрите на строке 95 и на строке 177 шаблона HTML

Инструкция по установке кнопки наверх можно найти здесь - http://forum.storela...ерх/#entry27024

Ага, второй код удалил, но панель все-равно не появилась. Мне не нужна кнопка "наверх", она у меня есть. Мне нужна панель, которая будет появляться при пролистывании сайта, как здесь закваски-нн.рф

#13 Taisia

Taisia

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

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

Отправлено 17 Сентябрь 2013 - 19:47

что бы сделать всплывающую панель

вам нужно найти в файле HTML код

</head>

ПЕРЕД ним вставить код

<!-- Всплывающая панель -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cartpanel.css" type="text/css">
<script>
$(document).ready(function(){
		 window.onscroll = function(){
						 if(window.pageYOffset>100){
										 $('#float-cart').fadeIn();
						 } else{
										 $('#float-cart').fadeOut();
						 }
		 }
});
function calculateDeliveryCost(itemsCost) {
		 $("#deliveryRate, #float-cart .delivery-rate").html(html);
}
</script>
<!--scrollup-->
<script type="text/javascript">
$(document).ready(function(){
				 // hide #back-top first
				 $("#back-top").hide();
				 // fade in #back-top
				 $(function () {
								 $(window).scroll(function () {
												 if ($(this).scrollTop() > 100) {
																 $('#back-top').fadeIn();
												 } else {
																 $('#back-top').fadeOut();
												 }
								 });
								 // scroll body to 0px on click
								 $('#back-top a').click(function () {
												 $('body,html').animate({
																 scrollTop: 0
												 }, 800);
												 return false;
								 });
				 });
});
</script>
<!--end scrollup-->
<!-- End Всплывающая панель -->


далее найти в коде там же  Найти 

</body>


и ПЕРЕД вставить 

<!-- Корзина-Всплывающая панель -->
<div id="float-cart" class="cartInfo">
<ul onclick="document.location='{CART_URL}';">
				 {% IF cart_count_empty %}	
						 <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
				 {% ELSE %}
						 {% FOR cart_sum %}	
						 <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
						 {% ENDFOR %}
				 {% ENDIF %}
		 </ul>
		 <ul>
						 <li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
		 <ul>
</div>
<!-- Корзина-Всплывающая панель-Конец -->

загрузить прикрепленный файл через Редактор шаблонов - добавить файл .

Прикрепленные файлы

  • Прикрепленный файл  cartpanel.css   2,32К   507 Количество загрузок:

#14 551

551

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

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

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

Просмотр сообщенияTaisia (17 Сентябрь 2013 - 19:47) писал:

что бы сделать всплывающую панель

вам нужно найти в файле HTML код

</head>

ПЕРЕД ним вставить код

<!-- Всплывающая панель -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cartpanel.css" type="text/css">
<script>
$(document).ready(function(){
		 window.onscroll = function(){
						 if(window.pageYOffset>100){
										 $('#float-cart').fadeIn();
						 } else{
										 $('#float-cart').fadeOut();
						 }
		 }
});
function calculateDeliveryCost(itemsCost) {
		 $("#deliveryRate, #float-cart .delivery-rate").html(html);
}
</script>
<!--scrollup-->
<script type="text/javascript">
$(document).ready(function(){
				 // hide #back-top first
				 $("#back-top").hide();
				 // fade in #back-top
				 $(function () {
								 $(window).scroll(function () {
												 if ($(this).scrollTop() > 100) {
																 $('#back-top').fadeIn();
												 } else {
																 $('#back-top').fadeOut();
												 }
								 });
								 // scroll body to 0px on click
								 $('#back-top a').click(function () {
												 $('body,html').animate({
																 scrollTop: 0
												 }, 800);
												 return false;
								 });
				 });
});
</script>
<!--end scrollup-->
<!-- End Всплывающая панель -->


далее найти в коде там же  Найти

</body>


и ПЕРЕД вставить

<!-- Корзина-Всплывающая панель -->
<div id="float-cart" class="cartInfo">
<ul onclick="document.location='{CART_URL}';">
				 {% IF cart_count_empty %}	
						 <li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
				 {% ELSE %}
						 {% FOR cart_sum %}	
						 <li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
						 {% ENDFOR %}
				 {% ENDIF %}
		 </ul>
		 <ul>
						 <li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
		 <ul>
</div>
<!-- Корзина-Всплывающая панель-Конец -->

загрузить прикрепленный файл через Редактор шаблонов - добавить файл .

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

#15 Taisia

Taisia

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

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

Отправлено 19 Сентябрь 2013 - 15:40

Ваша панель сейчас синего цвета,
возможно вы не очищали кэш браузера после внесения изменений.
уточните какие именно изменения не применяются ?

#16 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

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

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

Данный код необходимо вставлять в шаблон "HTML". Например после тега <body>

А для Сияния этот код подходит? Пробовала, ничего не получилось. А так удобно, если во всплывающем меню была бы не только корзина, а и ссылки на нужные стр. Контакты, Доставка, Акции. Или объявление важное прописать. Кнопка На верх у меня уже есть, может из за нее не получилось?

#17 mark03

mark03

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

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

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

Я тож хочу такую, мне подходит данный код?

#18 Сake

Сake

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

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

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

Просмотр сообщенияvelena168 (17 Октябрь 2013 - 15:43) писал:

А для Сияния этот код подходит? Пробовала, ничего не получилось. А так удобно, если во всплывающем меню была бы не только корзина, а и ссылки на нужные стр. Контакты, Доставка, Акции. Или объявление важное прописать. Кнопка На верх у меня уже есть, может из за нее не получилось?

Пожалуйста, вставьте данный код и не убирайте изменений, если код будет не работать или не будет отображаться. Если появиться проблема отображения (которую нужно скрыть от покупателей) - в файл стилей добавьте 

#float-cart {
   display: none;
}

Просмотр сообщенияmark03 (17 Октябрь 2013 - 15:50) писал:

Я тож хочу такую, мне подходит данный код?

У вас как я понимаю изначальная тема "Сияние". Вам применим ответ для пользователя velena168. Выполните изменения и не убирайте их если корзина будет отображаться не так как ожидалось.

#19 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

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

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

Пожалуйста, вставьте данный код и не убирайте изменений, если код будет не работать или не будет отображаться. Если появиться проблема отображения (которую нужно скрыть от покупателей) - в файл стилей добавьте

#float-cart {
display: none;
}



У вас как я понимаю изначальная тема "Сияние". Вам применим ответ для пользователя velena168. Выполните изменения и не убирайте их если корзина будет отображаться не так как ожидалось.
Вставила. Не отображается.

#20 velena168

velena168

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

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

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

Ой, появилась. Только кнопка наверх у меня нормальная была внизу, а сейчас сверху и двоится.
Ссылки на нужные стр. Контакты, Доставка, Акции кое-как добавила. Прозрачность убрать? Шрифт В корзине крупнее? И вправо переместить надпись Корзина? Если товар положить в корзину и продолжить покупки, сумма заказа появляется только после обновления страницы, а не сразу как в шапке, тогда вообще смысла в панели почти нет.
Помогите, пожалуйста довести до ума.
P. S. Кое-что поменяла, кнопка наверх встала на прежнее место, но теперь зачем-то мигает...

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

  • Снимок.PNG

Обратно в Изменение общей стилистики


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

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

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