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

[butuz1]

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

[w3bmak3r]

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

Итак... все ниже описанные действия делаю на стандартном шаблоне 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;
}

 

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

[laim731]

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