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


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


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

#21 Vaccina

Vaccina

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

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

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

Как я понимаю вы решили уже данный вопрос самостоятельно? Так как у вас на сайте кнопка "Наверх" только одна и она находиться внизу. Всплывающая корзина так же отображается.

#22 velena168

velena168

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

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

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

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

Как я понимаю вы решили уже данный вопрос самостоятельно? Так как у вас на сайте кнопка "Наверх" только одна и она находиться внизу. Всплывающая корзина так же отображается.
Не совсем.
1) Кнопка "Наверх" мигает.
2) А, самое главное. Если товар положить в корзину и продолжить покупки, сумма заказа появляется только после обновления страницы, а не сразу как в шапке.

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

#23 Vaccina

Vaccina

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

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

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

1) Кнопка у вас моргает вероятно из-за дубликата кода в шаблоне "HTML". Найдите и удалите в шаблоне "HTML" код вида

<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() > 180) {
																																 $('#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>

2) Попробуйте в шаблоне "" найти

<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
</script>

и заменить на

<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
$('.cartSumP > a > b > span').removeAttr('title').html($('.newCartCount').html());
</script>


#24 velena168

velena168

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

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

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

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

2) Попробуйте в шаблоне "" найти

<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
</script>

и заменить на

<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
$('.cartSumP > a > b > span').removeAttr('title').html($('.newCartCount').html());
</script>
Спасибо, уже лучше, но как-то неправильно: в корзине товаров на: 4 шт.
Попробовала заменить в $('.cartSumP > a > b > span').removeAttr('title').html($('.newCartCount').html());   ('.newCartCount')  на   ('.newCartSum')
Стилистически правильно получилось   В КОРЗИНЕ товаров на: 6 848 рублей   Но всплывающая панель увеличивается в ширину, не очень красиво.

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

  • Снимок.PNG


#25 Vaccina

Vaccina

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

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

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

Вы верно заметили изменив .newCartCount на .newCartSum, в предыдущем сообщении я ошиблась указав данную переменную. Про увелечение сплывающей панели не совсем понятно. Пожалуйста, объясните данный вопрос по подробнее.

#26 velena168

velena168

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

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

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

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

Вы верно заметили изменив .newCartCount на .newCartSum, в предыдущем сообщении я ошиблась указав данную переменную. Про увелечение сплывающей панели не совсем понятно. Пожалуйста, объясните данный вопрос по подробнее.
В скринах по порядку:
1. Пустая корзина
2. Добавлен первый товар
3.Продолжим покупки переходим в другой товар
Тут все нормально.
4. А, когда добавляем второй товар, панель расширяется почти в 2 раза

Конечно, я где-то стили нарушила или еще чего-нибудь.

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

  • Снимок.PNG
  • Снимок1.PNG
  • Снимок2.PNG
  • Снимок3.PNG


#27 Vaccina

Vaccina

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

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

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

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

{cart_sum.NOW_WITH_DISCOUNT | money_format}<br />

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

{cart_sum.NOW_WITH_DISCOUNT | money_format}

плюс в файл стилей main.css добавьте правило

#float-cart li {
	white-space: nowrap;
}


#28 velena168

velena168

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

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

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

Все теперь замечательно! Большое спасибо.

#29 borisovd

borisovd

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

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

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

Здравствуйте, хочу сделать эту всплывающию полосу что бы работала когда добавлял товар в сравнение, то есть добавил я товар в сравние и выскочила эта панель что у вас столько то товаров в сравнении, и кнопка перейти к сравнению, ну и что бы корзина была. У вас столько то товаров на такую то сумму. Вроде все) Спасибо!)

#30 Vaccina

Vaccina

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

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

Отправлено 28 Ноябрь 2013 - 05:52

Для начала сделайте данную панель по инструкции.
Только после всех изменений, сл.код:
<!-- Всплывающая панель -->
<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>
<!-- Всплывающая панель Конец -->
замените на:

<!-- Всплывающая панель -->
{%IF COMPARE_GOODS_COUNT>0 %}
<div id="float-cart" class="cartInfo">
<ul>
		<li>Товаров на сравнении: {COMPARE_GOODS_COUNT} шт.</li>
  <li><a class="contentTbodyCompareDetails" href="{COMPARE_URL}">Посмотреть</a></li>
<ul>
<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>
{% ENDIF %}
<!-- Всплывающая панель Конец -->


#31 borisovd

borisovd

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

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

Отправлено 28 Ноябрь 2013 - 11:43

Нужно подвинуть правее Корзина пустая Минимальная сумма заказа:

Информация о сумме товаров в корзине изменяется только после обновления странице, как сделать что бы сразу менялась?

#32 Koderhan

Koderhan

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

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

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

Просмотр сообщенияborisovd (28 Ноябрь 2013 - 11:43) писал:

Нужно подвинуть правее Корзина пустая Минимальная сумма заказа:

Информация о сумме товаров в корзине изменяется только после обновления странице, как сделать что бы сразу менялась?
Для выравнивания надписи.


Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "HTML".
Найти код:
<h1 style="text-align: center;font-size: 17px;">
Заменить:
<h1 style="font-size: 17px;text-align: right;">

И количество товаров после добавления товара в корзину вроде как изменяется. Возможно такая ошибка появляется из-за кеша браузера.

#33 borisovd

borisovd

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

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

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

<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>
Может тут лучше что то сделать что бы не менять стили h1?

#34 borisovd

borisovd

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

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

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

Все сделал) Спасибо)

#35 Store-rondell

Store-rondell

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

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

Отправлено 22 Декабрь 2013 - 15:53

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

2) А, самое главное. Если товар положить в корзину и продолжить покупки, сумма заказа появляется только после обновления страницы, а не сразу как в шапке.

Выявилась эта же ошибка!
Помогите!

#36 Сake

Сake

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

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

Отправлено 24 Декабрь 2013 - 04:13

На данный вопрос вам ответили в теме форума http://forum.storela...ывающей-корзине
Пожалуйста, не дублируйте ваши вопросы.

#37 Jerek

Jerek

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

  • Пользователи
  • PipPipPip
  • 120 сообщений
  • ГородОренбург

Отправлено 10 Февраль 2014 - 12:04

Все получилось, но вот маленькие вопросы.
1 - Как поменять цвет с зеленого на свой.

2 - Вставил не корзину а ссылки на страницы. И вот сразу вопрос, пока не вставлял сами ссылки, все было нормально. Хотелось бы сделать Наклоном, 16 размером и шрифтом ComIk но почему то, при вставке ссылки на название, цвет и шрифт убираеться.

#38 Vaccina

Vaccina

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

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

Отправлено 11 Февраль 2014 - 04:22

1. В cartpanel.css найдите:
#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;
	left: 50%;
	margin: 0 auto 0 -500px;
	opacity: 0.8;
	padding: 10px 0;
	position: fixed;
	top: 0;
	width: 1000px;
	z-index: 10000;
}
измените значение background-color
2.Ссылок на данный момент у вас не обнаружила. На счет шрифта, в том же файле найдите:
#float-cart a {
	color: #C0EEFA;
	font: 10pt arial,helvetics,sens-serif;
}
и измените значение font

#39 Jerek

Jerek

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

  • Пользователи
  • PipPipPip
  • 120 сообщений
  • ГородОренбург

Отправлено 11 Февраль 2014 - 11:05

Просмотр сообщенияVaccina (11 Февраль 2014 - 04:22) писал:


Спасибо огромное, всё получилось  ! ! ;)

#40 vender12

vender12

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

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

Отправлено 28 Март 2014 - 09:22

у меня появилась вверху полоска корзины, проблемы - при нажатии купить не прибавляется цена(если обновить страницу то она прибавленная становится)-стрелка вверх двоится-и как добавить в всплывающею строку"доставка цена"
магазин 8626

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

спасибо

Сообщение отредактировал vender12: 28 Март 2014 - 12:17





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

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