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


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

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

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

#61 Mari-ina

Mari-ina

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

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

Отправлено 13 Май 2014 - 19:39

Здравствуйте. Не могу поменять цвет полосы (меняла значение background-color в cartpanel.css). И еще на скрине видно, что корзина у меня смещена в бок и нет ее края с кнопкой вверх.

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

  • 31.png

#62 Ирина345

Ирина345

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

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

Отправлено 13 Май 2014 - 19:58

Просмотр сообщенияMari-ina (13 Май 2014 - 19:39) писал:

Здравствуйте. Не могу поменять цвет полосы (меняла значение background-color в cartpanel.css). И еще на скрине видно, что корзина у меня смещена в бок и нет ее края с кнопкой вверх.
Здравствуйте находим в cartpanel.css
#float-cart {
background-color: #FF3A28;
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;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900; border-radius:0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; -webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
заменяем на

#float-cart {
background-color: #FF3A28;
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;
margin-left: 450px;
top: 0;
width: 1000px;
z-index: 10000;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900; border-radius:0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; -webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}
меняя значение  background-color: #FF3A28; меняете цвет

#63 Mari-ina

Mari-ina

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

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

Отправлено 13 Май 2014 - 20:35

Не помогло

#64 lew

lew

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

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

Отправлено 13 Май 2014 - 23:02

В HTML
найдите эту строчку кода
#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; 
}
как и писал модератор выше - вот это меняйте: background-color: #3CAA3C;

#65 Mari-ina

Mari-ina

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

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

Отправлено 14 Май 2014 - 08:06

В HTML  у меня такого кода нет.

SL-291648

#66 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 14 Май 2014 - 08:39

Просмотр сообщенияMari-ina (14 Май 2014 - 08:06) писал:

В HTML  у меня такого кода нет.

SL-291648




Данный код находится в файле main.css

#67 Mari-ina

Mari-ina

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

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

Отправлено 14 Май 2014 - 12:50

Данный код у меня есть только в cartpanel.css, там я пробовала - цвет не меняется. А как быть с тем, что корзина у меня смещена в бок и нет ее края с кнопкой вверх.

#68 Ирина345

Ирина345

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

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

Отправлено 14 Май 2014 - 14:04

Просмотр сообщенияMari-ina (14 Май 2014 - 12:50) писал:

Данный код у меня есть только в cartpanel.css, там я пробовала - цвет не меняется. А как быть с тем, что корзина у меня смещена в бок и нет ее края с кнопкой вверх.
Здравствуйте, в HTML найдите строку 559
#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;
}
поменяйте цвет  background-color: #3CAA3C;
   меняете значение margin-left: меняете отступ от края

#69 Mari-ina

Mari-ina

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

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

Отправлено 21 Май 2014 - 21:48

Спасибо, корзину поменяла. А можно кнопку вверх спустить вниз и сделать прозрачным фон? И еще - она у меня мигает почему-то!

#70 Vaccina

Vaccina

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

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

Отправлено 22 Май 2014 - 01:41

Зачем вам две кнопки вверх? Удалите дубликат, чтобы не мешался, далее найдите:
#back-top {
	margin-left: 890px;
	position: fixed;
	top: 10px;
}
замените на:
#back-top {
	bottom: 10px;
	opacity: 0.5;
	position: fixed;
	right: 0;
}

#71 Mari-ina

Mari-ina

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

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

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

Спасибо

#72 vanyushka

vanyushka

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

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

Отправлено 20 Июнь 2014 - 19:23

Здравствуйте!

Есть ли возможность перенести элемент корзины из шаблона "Весна", в область шапки шаблона "Мокко" (вровень горизонтальному меню)? Чтобы отображалась та же анимация при наведении (поворот изображения корзины)?

Аккаунт SL-298388

#73 Vaccina

Vaccina

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

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

Отправлено 21 Июнь 2014 - 00:05

В шаблоне HTML вместо:
<!-- Корзина -->
	 <div id="cartInfo">
	 <a href="{CART_URL}">в корзине товаров на</a>:
	 <span id="cartSum">
		 {% IF cart_count_empty %}
		 <span class="red">0</span> {CURRENCY_NAME}
		 {% ELSE %}
		 {% FOR cart_sum %}
			 <span>{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
		 {% ENDFOR %}
		 {% ENDIF %}
	 </span>
	 </div>
	 <!-- end Корзина -->
вставьте:
<div id="cart">
		 <div class="heading">
			 <h4>Корзина покупок</h4>
			 <a href="{CART_URL}" title="Перейти в корзину"><span class="cart_circle"></span><span id="cart-total">Покупок
			 {% IF cart_count_empty %}
			 <span class="red">0</span>
			 {% ELSE %}
				 {CART_COUNT_TOTAL}
			 {% ENDIF %}
				 - на сумму
			
			 {% IF cart_count_empty %}
				 <span>0</span> {CURRENCY_NAME}
			 {% ELSE %}
				 {% FOR cart_sum %}
				 {cart_sum.NOW | money_format}<br />
				 {% ENDFOR %}
			 {% ENDIF %}</span>
			 </a>
		 </div>
		 <div class="content">
			 <div class="empty">Ваша корзина покупок пуста!</div>
		 </div>
		 <div class="clear"></div>
		 </div>
		 <!-- end Корзина -->

в конец main.css добавьте:
#header #cart {z-index: 20;min-width: 300px;top:3px;right:20px;}
#header #cart .cart_circle {display:block;width:36px;height:36px;background:url('{ASSETS_IMAGES_PATH}cart_circle.png') 50% 50% no-repeat;background-color:#ff0551;-webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position:absolute;top:3px;right:0;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;cursor:pointer;}
#header #cart .heading:hover .cart_circle {transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg); -o-transform:rotate(360deg);}
#header #cart .heading {float: right;margin-top: 15px;padding-left: 14px;padding-right: 46px;position: relative;z-index: 1;}
#header #cart .heading h4 {color: #333333;font-size: 15px;font-weight: bold;margin-top: 0px;margin-bottom: 3px;text-align:right;}
#header #cart .heading a {text-decoration: none;}
#header #cart .content {clear: both;display: none;position: relative;top: -1px;padding: 8px;min-height: 150px;background: #FFF;border-bottom:5px solid #ff0551;box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-khtml-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
#header #cart.active .heading {padding-bottom: 6px;}
#header #cart.active .content {display: block;}
#header #cart .empty {padding-top: 50px;text-align: center;}

и в редактор шаблонов загрузите иконку значка корзины с названием cart_circle.pngПрикрепленный файл  cart_circle.zip   1,11К   56 Количество загрузок:

#74 tolikkansk

tolikkansk

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

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

Отправлено 01 Август 2014 - 19:51

1)А как сделать, чтобы надпись была, после приобретения товара:
В корзине товаров ... шт на сумму ...рублей?

2) И ещё глюк появился, корзина появляется сразу сверху, как заходишь на сайт, как убрать?
http://dochkam-sinochkam.ru/

#75 Vaccina

Vaccina

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

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

Отправлено 02 Август 2014 - 03:22

1. На данный момент в одной корзине надпись, что она пуста, в другой надпись "в корзине товаров на 0 рублей"
2.В шаблоне HTML найдите:
<div id="float-cart" class="cartInfo" style="display: block;height: 40px;">
замените на:
<div id="float-cart" class="cartInfo" style="height: 40px;">

#76 tolikkansk

tolikkansk

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

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

Отправлено 02 Август 2014 - 20:13

Просмотр сообщенияVaccina (02 Август 2014 - 03:22) писал:

1. На данный момент в одной корзине надпись, что она пуста, в другой надпись "в корзине товаров на 0 рублей"
2.В шаблоне HTML найдите:
<div id="float-cart" class="cartInfo" style="display: block;height: 40px;">
замените на:
<div id="float-cart" class="cartInfo" style="height: 40px;">
Я имею в виду, что когда будет добавлен товар в корзину, то во всплывающей корзине и в обычной горела надписьЖ
"В корзине товаров ... шт на сумму ...рублей"

#77 tolikkansk

tolikkansk

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

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

Отправлено 04 Август 2014 - 19:54

Почему, когда кладешь товар в корзину, сначала появляется одна надпись. а потом другая, когда обновляешь страницу?

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

  • cart1.jpg
  • cart2.jpg

#78 MikDark

MikDark

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

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

Отправлено 04 Август 2014 - 20:03

Просмотр сообщенияtolikkansk (04 Август 2014 - 19:54) писал:

Почему, когда кладешь товар в корзину, сначала появляется одна надпись. а потом другая, когда обновляешь страницу?

Когда кладете товар в корзину, появляется блок из шаблона: Быстрый заказ, находится в самом низу шаблона.

#79 karapuzz

karapuzz

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

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

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

Всем привет , а кто подскажет как изменить размер полосы , и сместить её в правый угол!?

#80 karapuzz

karapuzz

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

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

Отправлено 04 Август 2015 - 13:34

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

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

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

А можно изменить текст и размеры всплывающей корзины? очень нужно, буду благодарен если поможете..
Обратно в Изменение общей стилистики


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

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

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