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


Корзина, Фиксированная В Окне Браузера.

фиксированная корзина корзина изменение корзны

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

#1 ConstantinRS

ConstantinRS

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

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

Отправлено 03 Январь 2014 - 15:46

Каким образом возможно привести корзину к такому виду?
корзина.png
То есть, закреплена в правом нижнем углу окна браузера и не перемещается. Отображается на всех страницах сайта.

#2 sengun

sengun

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

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

Отправлено 03 Январь 2014 - 16:54

Просмотр сообщенияConstantinRS (03 Январь 2014 - 15:46) писал:

Каким образом возможно привести корзину к такому виду?
Прикрепленный файл корзина.png
То есть, закреплена в правом нижнем углу окна браузера и не перемещается. Отображается на всех страницах сайта.
Здравствуйте.
В шаблоне HTML после тега
<body>
вставьте такой код
  <div id="fixed_cart">
  <a href="{CART_URL}" title="Перейти в корзину">
	  <img src="{ASSETS_IMAGES_PATH}cart.png">
	  Корзина
	</a>
	{% IF cart_count_empty %}
	  <span>Пусто</span>
	{% ELSE %}
	  <span>{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT}{% ENDFOR %} Р</span>
	{% ENDIF %}
</div>
а в конец style.css добавьте
#fixed_cart {
  position: fixed;
  bottom:0;
  right: 0;
  width: 250px;
  height:40px;
  background: #2c2c2c;
  color: #fff;
  border-top-left-radius: 6px;-webkit-border-top-left-radius: 6px;-moz-border-top-left-radius: 6px;
}
#fixed_cart a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: #444;
  border: 1px solid #202020;
  padding: 3px 10px;
  margin-top: 6px;
  margin-left: 15px;
  border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
}
#fixed_cart img { margin-right: 5px; }
#fixed_cart span {
  width: 50%;
  text-align: center;
  display: inline-block;
}
И загрузите в разделе "Редактор шаблонов" картинку cart.png , чтобы отображалась слева от слова "Корзина"

#3 ConstantinRS

ConstantinRS

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

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

Отправлено 03 Январь 2014 - 20:25

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

Спасибо за оперативный ответ. Тега <body> не нашёл, вставил после
</head>
<body class="home">

В тексте получилось:
кор2.png
На сайте с ПК выглядит так:
кор23.png
Изображение позже вставлю.
Хотелось бы..
1.Увеличить шрифт, а можно и весь модуль.
2.Вынести его на передний план, дабы его не закрывал подвал при пролистывании вниз.
3.И сделать его, конечно, кликабельным.
4.Кстати, цена отображается лишь после обновления страницы..

Уж простите, с html у меня не очень, но стараюсь разобраться.

И ещё один нюанс.. На мобильных устройствах корзины вообще не видно..
Screenshot_2014-01-03-23-15-03.png Screenshot_2014-01-03-23-15-55.png

SL-256931

#4 ConstantinRS

ConstantinRS

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

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

Отправлено 03 Январь 2014 - 22:38

Методом научного тыка добился нужного мне вида

Безымянный.png

и правильного отображения на мобильных устройствах
Screenshot_2014-01-04-01-15-41.png

Что осталось:
1.цена меняется лишь при обновлении страницы;
2.модуль не кликабелен (желательно, чтобы кликабелен был весь модуль);
3.модуль корзины на заднем плане, то есть при перемещении по странице то и дело закрывается либо товарами, либо
   подвалом..

#5 ConstantinRS

ConstantinRS

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

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

Отправлено 03 Январь 2014 - 23:24

Проблема 3:"модуль корзины на заднем плане.." решена добавлением "z-index: 9999;" в style.css. Получилось:
#fixed_cart {
z-index: 9999;
position: fixed;
bottom:0;
right: 0;
width: 250px;
height:40px;
background: #2c2c2c;
color: #fff;
border-top-left-radius: 6px;-webkit-border-top-left-radius: 6px;-moz-border-top-left-radius: 6px;
}
#fixed_cart a {
display: inline-block;
color: #fff;
text-decoration: none;
background: #444;
border: 1px solid #202020;
padding: 3px 10px;
margin-top: 6px;
margin-left: 15px;
border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
}
#fixed_cart img { margin-right: 5px; }
#fixed_cart span {
width: 50%;
text-align: center;
display: inline-block;
}


#6 ConstantinRS

ConstantinRS

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

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

Отправлено 04 Январь 2014 - 00:36

1. Каким-то чудом кнопка модуля стала кликабельной... Но, при нажатии, на долю секунды экран темнеет. То есть происходит одно
    мерцание, и тут же переход в корзину. Проверял на разных браузерах- ситуация аналогична.
2. Проблема с изменением суммы в корзине лишь после обновления страницы пока тоже актуальна.
3. И ещё хотелось бы убрать старый модуль корзины. Я, конечно, могу повырезать, но боюсь лишь прибавить этим работы.. )

#7 ConstantinRS

ConstantinRS

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

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

Отправлено 09 Январь 2014 - 17:37

Уже все проблемы с корзиной решил сам. Осталась лишь проблема с изменением суммы в корзине лишь после обновления страницы.

И напишите, когда вы уже начинаете работать в нормальном режиме, пожалуйста.

#8 Сake

Сake

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

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

Отправлено 10 Январь 2014 - 02:33

Добавьте в конец вашего шаблона "Быстрый заказ" следующую строку

<script>$('#fixed_cart span').html('{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT}{% ENDFOR %} Р');</script>






Темы с аналогичным тегами фиксированная корзина, корзина, изменение корзны

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

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