Elnor

Изменение цвета корзины, при добавлении товара

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

Elnor    0

Здравствуйте! есть два вопроса по изменению корзины, очень надеюсь на вашу помощь!

 

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

2) Как добавить картинку в блок с корзиной, пробовал добавить вот этот модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10605 но картинка выезжает за пределы блока.

Нужно что бы картинка была слева от текста, но не выезжала за пределы блока

 

Вот мой сайт, что бы понимать как выглядит корзина: http://elnorshop.ru/index.php?route=common/home

И css код отвечающий за корзину:

 

 

 


#header #cart {
min-width: 300px;
}
#header #cart .heading {
float: right;
cursor:pointer;
/*padding-left: 14px;
padding-right: 14px;*/
padding:10px 200px 10px 10px;
border:2px solid #000000;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
background: #FFF url(../image/cart-button-bg.png) 0 100% repeat-x;
position: relative;
z-index: 1;
}
#header #cart .heading:before{
content:'.';
text-indent:-9999px;
position:absolute;
height:18px;
width:13px;
right:17px;
top:50%;
margin-top:-9px;
background:url(../image/cart-ico.png) 0 0 no-repeat;
}
#header #cart .heading:hover{
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
}
#header #cart .heading:hover:before{
background-position:0 100%;
}

#header #cart .heading h4 {
color: #000000;
text-shadow: #FFFFFF 1px 1px 1px;
font-size: 20px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #FFFFFF;
text-shadow: #535758 1px 1px 1px;
text-decoration: none;
background:none;
}
#header #cart .heading a span {
/*background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;*/
font-size:15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
/*padding: 8px;*/
padding:12px;
min-height: 150px;
/*border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;*/
border:2px solid #000000;
-webkit-border-radius:0 3px 3px 3px;
-moz-border-radius:0 3px 3px 3px;
border-radius:0 3px 3px 3px;
background: #FFFFFF;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
}

#header #cart.active .heading {
/*margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;*/
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#header #cart.active .content {
display: block;
}
#header #cart .cart {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
#header #cart .cart td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
#header #cart .cart .image {
width: 1px;
}
#header #cart .cart .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
#header #cart .cart .name small {
color: #666;
}
#header #cart .cart .quantity {
text-align: right;
}
#header #cart .cart td.total {
text-align: right;
}
#header #cart .cart .remove {
text-align: right;
}
#header #cart .cart .remove img {
cursor: pointer;
}
#header #cart table.total {
border-collapse: collapse;
padding: 5px;
float: right;
clear: left;
margin-bottom: 5px;
}
#header #cart table.total td {
color: #000;
}
#header #cart .content .checkout {
text-align: right;
clear: both;
}
#header #cart .content .checkout a{

}
#header #cart .content .checkout a {
display: inline-block;
padding:0 9px;
background: url('../image/buttons.png') 0 0 repeat-x;
text-decoration: none;
cursor: pointer;
height:25px;
line-height:25px;
font-size:13px;
font-weight:bold;
color:#fff;
text-shadow:0 -1px 0px #0c72bd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:none;
}
#header #cart .content .checkout a:visited{
color:#fff;
}
#header #cart .content .checkout a:hover {
/*background: url('../image/button-left-active.png') top left no-repeat;*/
background-position:0 -25px;
color:#fff;
}
#header #cart .content .checkout a:active{
background-position:0 -50px;
-webkit-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
-moz-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
}
*+ html #header #cart .content .checkout a{display:inline; zoom:1;}


#header #cart .empty {
padding-top: 50px;
text-align: center;
 

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


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

Неужели проблема неразрешима?

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


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

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

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

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

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

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

Войти

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

Войти


  • Похожий контент

    • От sv2109

      350.00 руб
      View File


      Option Image Change - Изменение картинки товара в зависимости от опции
      Модуль дает возможность изменять изображение на странице товара в зависимости от выбранной опции для этого товара.
      Для этого в админ панели при создании / редактировании товара к нужным изображениям привязываются определенные опции.
      Модулю для работы необходим vqmod.
      Установка
      1. Скопировать все с папки "upload" в корневую папку вашего магазина. Файлы движка не будут перезаписаны.
      2. Установить модуль в панели управления
      3. При необходимости поменяйте настройки
      Новое в версии 1.1:
      - добавлена возможность выбирать несколько опций для 1 изображения
      - изображение в корзине соответствует выбранным опциям
      Версии движка, на которых тестировался модуль
      - ocStore v1.5.4.1
      - ocStore v1.5.5.1
      - opencart v1.5.6
      но должен работать на всех 1.5.х версиях
      - OpenCart, ocStore 2.0, 2.1, 2.2, 2.3 (для получения этих версий - пишите в ЛС автору или на почту sv2109@gmail.com)
       
      Submitter sv2109 Submitted 03/27/2014 Category Product Options Системные требования Сайт разработчика http://sv2109.com Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1 OpenCart.Pro, ocShop  
    • От sv2109
      Модуль дает возможность изменять изображение на странице товара в зависимости от выбранной опции для этого товара.
      Для этого в админ панели при создании / редактировании товара к нужным изображениям привязываются определенные опции.
      Модулю для работы необходим vqmod.
      Установка
      1. Скопировать все с папки "upload" в корневую папку вашего магазина. Файлы движка не будут перезаписаны.
      2. Установить модуль в панели управления
      3. При необходимости поменяйте настройки
      Новое в версии 1.1:
      - добавлена возможность выбирать несколько опций для 1 изображения
      - изображение в корзине соответствует выбранным опциям
      Версии движка, на которых тестировался модуль
      - ocStore v1.5.4.1
      - ocStore v1.5.5.1
      - opencart v1.5.6
      но должен работать на всех 1.5.х версиях
      - OpenCart, ocStore 2.0, 2.1, 2.2, 2.3 (для получения этих версий - пишите в ЛС автору или на почту sv2109@gmail.com)
       
    • От marinapl2000
      Друзья, ищу высокопрофессионального разработчика для аудита и оптимизации работы корзины ОК 2.3, корзина на симпле, шаблон PavoThemes.
       
      В корзине отрабатывает:
      - два модуля доставки (СДЭК, Шиптор)
      - модуль оплаты Яндекс
      - модуль программы лояльности (кастомный и коробочный - купоны)
      - геолокация
      - небольшие кастомизации (про всю мелочевку расскажу по ходу дела исполнителю)
       
      Проблема следующая: периодически возникают проблемы с созданием заказов. Проблемы разные: то кнопка Применить для купона не нажимается, то не обновляется стоимость при выборе способа доставки, то кнопка оформления заказа не нажимается.
       
      Все проблемы плавающие относительно сценария воспроизведения и браузеров, поэтому нужен очень хороший специалист - архитектор, который не просто порекомендует поотключать все модули в корзине (ничего "лишнего", от чего можно безболезненно отказаться, там не установлено), а поможет выявить ошибки и их причины, а потом выявленное исправить.
       
      Заранее спасибо за предложения.
    • От Rufan
      помогите решите проблему!
      1.)  товар не добавляется с каталога в корзину, закладки и сравнения, если же перейти на сам товар то тогда все норм!
      2.)  если все же удается добавить товар в корзину то при нажатии на корзину всплывает окно в котором отображается товарная позиция и если нажать на крестик рядом с ней то вместо того чтоб товар удалился из корзины она просто исчезает   (не закрывается а именно и исчезает)
       
      http://retro-cars.in.ua/index.php?route=product/category&path=67_63
       
    • От Matvei

      Скачать/Купить дополнение


      Добавлен в корзину
      заменяет стандартное добавление в корзину "alert alert-success" с выводом картинки добавляемого товара в модальном окне
      ocmod + инструкция с кодами для внесения небольших изменений
      Добавил Matvei Добавлено 22.09.2016 Категория Модули Системные требования Сайт разработчика https://opencartshop.ru/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.1 ocStore 2.3
      2.1 OpenCart.Pro, ocShop  
  • Последние посетители   0 пользователей онлайн

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