Перейти к содержанию
butuz1

Зафиксировать корзину

Рекомендуемые сообщения

Хотелось бы чтобы корзина при прокрутке была зафиксирована, а в идеале всплывала(и висела на видном месте незвисимо от прокрутки)  когда в корзину добавляется товар? Пробовал в css фиксировать через position: fixed;, но съезжает в сторону за пределы экрана, но при прокрутке фиксируется(большая часть за пределами экрана).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Напишу один из вариантов (фиксированная корзина справа)

Итак... все ниже описанные действия делаю на стандартном шаблоне OcStore 1.5.5.x

 

  1. В файле ../catalog/language/russian/module/cart.php  ищем строку
$_['text_items']    = 'Товаров: %s (%s)';

меняем на

$_['text_items']    = '%s';

      2. В файле ../catalog/language/russian/checkout/cart.php ищем строку

$_['text_items']    = 'Товаров: %s (%s)';

меняем на 

$_['text_items']    = '%s'; 

    3.  В файле ../catalog/view/theme/default/template/module/cart.tpl ищем следующие строки

<div id="cart">
<div id="cart_img"><a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a></div>
<div class="heading">
<a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>

меняем на 

<div id="cart">
<div class="heading">
<a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a>
<a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>

  4. В файле ../catalog/view/theme/default/stylesheet/stylesheet.css ищем строки

#cart_img {
position: fixed;
top: 20px;
right: 35px;
}
#cart {
position: fixed;
top: 60px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#cart .heading {
float: right;
margin-right: 2px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
position: relative;
z-index: 1;
}
#cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#cart .heading a {
color: #000;
text-decoration: none;
display: block;
}
#cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left:30px;
line-height: 30px;
}
#cart .content {
clear: both;
display: none;
position: relative;
top: 2px;
padding: 8px;
min-height: 150px;
border: 1px solid #EEEEEE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background: #FFF;
}
#cart.active .content {
display: block;
}

 

меняем на 

 

#cart {
position: fixed;
top: 60px;
right: 0;
z-index: 9;
}
#cart .heading {
float: right;
height: 70px;
padding: 10px;
position: relative;
z-index: 1;
border: 1px solid #eee;
background: #fff;
}
#cart .heading a {
color: #000;
text-decoration: none;
display: block;
}
#cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left: 10px;
line-height: 30px;
}
#cart .content {
clear: both;
display: none;
position: relative;
top: 2px;
padding: 8px;
min-height: 150px;
border: 1px solid #EEEEEE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background: #FFF;
}
#cart.active .content {
display: block;
}

 

В результате должны получить корзину такого вида:

21.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Можно это сделать на ocStore 2.1.x

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.