Изменение вида кнопки купить

jekass · 17 жовтня 2014

Добрый день! Столкнулся со следующей проблемой: в каталоге товаров не получается изменить цвет кнопки купить на ocStore Version 1.5.4.1. Сейчас кнопка очень не примечательная, что доставляет заказчикам некоторые неудобства.

Вопрос в том, как изменить ее цвет или заменить вообще на картинку? Для карточки продукта решение нашел, в стилях вообще не был прописан код для изменения цвета кнопки, решил следующим кодом:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;   - это цвет кнопки
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
 }
a.button, input.button:hover {
background: #32CD32;
}

По идее этот код должен действовать и на каталог товаров, но ничего не изменилось. Как можно это исправить??? Заранее спасибо)

wipper · 19 жовтня 2014

шаблон у вас не стандартный. давайте ссылку на ваш сайт - разберемся!

jekass · 19 жовтня 2014

Адрес магазина - http://shopping-ck.com.ua

wipper · 20 жовтня 2014

Адрес магазина - http://shopping-ck.com.ua

#content .box-product .cart input.button {
background: url('/image/add_to_cart.gif') left center no-repeat;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px #9C9C9C;
-moz-box-shadow: 0 0px 0px #9C9C9C;
box-shadow: 0 0px 0px #9C9C9C;
color: #005800;
font-weight: normal;
margin-top: 8px;
padding-left: 31px;
}

background: url('/image/add_to_cart.gif') left center no-repeat; вот картинка, её нужно удалить

Ниже цвет кнопки background: #FF4500;

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

Или сделайте так в #content .box-product .cart input.button {

background: #32353A url('/image/add_to_cart.gif') 4px 1px no-repeat;

И иконку нужно заменить на прозрачную

jekass · 21 жовтня 2014

#content .box-product .cart input.button {
background: url('/image/add_to_cart.gif') left center no-repeat;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px #9C9C9C;
-moz-box-shadow: 0 0px 0px #9C9C9C;
box-shadow: 0 0px 0px #9C9C9C;
color: #005800;
font-weight: normal;
margin-top: 8px;
padding-left: 31px;
}

background: url('/image/add_to_cart.gif') left center no-repeat; вот картинка, её нужно удалить

Ниже цвет кнопки background: #FF4500;

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #FF4500;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

Или сделайте так в #content .box-product .cart input.button {

background: #32353A url('/image/add_to_cart.gif') 4px 1px no-repeat;

И иконку нужно заменить на прозрачную

Не получается(( Надпись Купить не получается сделать по центру, цвет текста не изменяется на белый. И хотелось чтобы рамка (цветная) была скругленная, как в карточке товара. Что можно сделать?

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема.

wipper · 22 жовтня 2014

Не получается(( Надпись Купить не получается сделать по центру, цвет текста не изменяется на белый. И хотелось чтобы рамка (цветная) была скругленная, как в карточке товара. Что можно сделать?

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема.

Что это у меня получается а у вас нет? )))

Странно

wipper · 22 жовтня 2014

Ну вот смотрим кнопка купить, удалил корзину так как вы хотите текст по центру

#content .box-product .cart input.button {
color: #FFFFFF;
margin-top: 8px;
background: #FF4500;
font-weight: bold;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}

Вышло так

При наведении

#content .box-product .cart input.button:hover {
background: #FF4500;
font-weight: bold;
}

Вышло так

wipper · 22 жовтня 2014

Как видите всё получается, наверное нужно побольше упорства!!!!

wipper · 22 жовтня 2014

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема.

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс

#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

jekass · 22 жовтня 2014

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс
#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

Хм, и правда получилось... а вчера ни в какую!

Что касается наличия товара. Вот код:

#content .stock {
    background: url("/image/stock.gif") no-repeat scroll left center transparent;
    margin-left: 21px;
    margin-top: 7px;
    padding-left: 28px;
    text-align: left;
}
#content .no-stock {
    background: url("/image/no-stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;
}
#column-left .stock,
#column-right .stock {
    background: url("/image/stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;

Пытался исправить, но не вышло, что посоветуете сделать? Заранее спасибо за помощь)

jekass · 22 жовтня 2014

Вы правы я думаю, смотрите код, тк двум состояниям прописан один и тот же класс
#content .stock {
background: url("/image/stock.gif") no-repeat scroll left center transparent;
margin-left: 21px;
margin-top: 7px;
padding-left: 28px;
text-align: left;

И еще кстати не нашел каким образом сделать фото товара по центру в каталоге товаров?

wipper · 22 жовтня 2014

Хм, и правда получилось... а вчера ни в какую!

Что касается наличия товара. Вот код:
#content .stock {
    background: url("/image/stock.gif") no-repeat scroll left center transparent;
    margin-left: 21px;
    margin-top: 7px;
    padding-left: 28px;
    text-align: left;
}
#content .no-stock {
    background: url("/image/no-stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;
}
#column-left .stock,
#column-right .stock {
    background: url("/image/stock.gif") no-repeat center left transparent;
    float: left;
    margin-top: 7px;
    padding-left: 28px;
    margin-left: 12px;
Пытался исправить, но не вышло, что посоветуете сделать? Заранее спасибо за помощь)

Так это стили, а вам нужно редактировать код модуля, отвечающего за вывод этих блоков - рекомендуемых и тд. Там должно быть условие если в наличии то класс .stock, а если не в наличии то .no-stock (ну вот как-то так)

wipper · 22 жовтня 2014

И еще кстати не нашел каким образом сделать фото товара по центру в каталоге товаров?

Вроде бы всё по центру :ugeek:

jekass · 23 жовтня 2014

Вроде бы всё по центру :ugeek:

В категориях фото товара сдвинуто влево...

На главной также возле наличии проставляется зеленая галочка, есть товар в наличии или его нет, а в категориях галочка стоит только возле товаров со статусом есть в наличии, такое ощущение что для галочки нет в наличии (серая) вообще не прописан код, даже зеленая не проставляется, где это можно исправить не нашел.

wipper · 23 жовтня 2014

В категориях фото товара сдвинуто влево...

.product-grid .image {
display: block;
margin-bottom: 0px;
text-align: center;
}

в stylesheet.css строка 1123

wipper · 23 жовтня 2014

На главной также возле наличии проставляется зеленая галочка, есть товар в наличии или его нет, а в категориях галочка стоит только возле товаров со статусом есть в наличии, такое ощущение что для галочки нет в наличии (серая) вообще не прописан код, даже зеленая не проставляется, где это можно исправить не нашел.

Нужно дописать код в шаблоне этих модулей

Что за шаблон у вас, название?

Измените это, а то логотип перекрывает букву Г (главная)

#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 3px; было так 0px 0px 0px 7px;
color: #000;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}

jekass · 24 жовтня 2014

Нужно дописать код в шаблоне этих модулей

Что за шаблон у вас, название?

Измените это, а то логотип перекрывает букву Г (главная)
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 3px; было так 0px 0px 0px 7px;
color: #000;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}

Изменил, получилось. Спасибо за помощь.

Шаблон называется - "Электроника для жизни"

wipper · 24 жовтня 2014

//////

Также есть небольшая проблема в самом коде шаблона. Если товар есть в наличии, напротив наличия стоит зеленая "галочка", а если нет в наличии должна стоять серая, но она почему то не проставляется, где-то не дописан код или не пойму в чем проблема.

Например берем файл модуля /catalog/controller/module/featured.php

Открываем и правим:

Находим

<div class="stock"><?php echo $product['stock'];?></div>

И меняем на

			        <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

jekass · 25 жовтня 2014

Например берем файл модуля /catalog/controller/module/featured.php

Открываем и правим:

Находим

<div class="stock"><?php echo $product['stock'];?></div>

И меняем на

			        <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

Не могу найти подобного кода в модуле, и нужно подправить код именно в каталоге товаров, там вообще проблемы с этим. Если в модулях галочку дублирует на все товары, то в каталоге товаров только на те что есть в наличии.

wipper · 25 жовтня 2014

Не могу найти подобного кода в модуле, и нужно подправить код именно в каталоге товаров, там вообще проблемы с этим. Если в модулях галочку дублирует на все товары, то в каталоге товаров только на те что есть в наличии.

Я незнаю почему вы не можете найти этот код, я скачал ваш шаблон он там есть, внимательней ищите.

Вот код для категории

Внимательно смотрите - высылаю пути файлов

/catalog/view/theme/electronics/template/product/category.tpl

Здесь находим код (у меня 143 строка)

      <?php echo $product['stock'];?>

меняем на

      <?php if (!$product['special']) { ?>
                                         <div class="stock"><?php echo $product['stock']; ?></div>
                            <?php } else { ?>
                                         <div class="no-stock"><?php echo $product['stock']; ?></div>
        <?php } ?>

Далее, если дублируется зеленая галочка в наличии, то идем по пути

/catalog/language/russian/product/category.php

Находим последнюю строку

$_['text_instock']      = '<div class = "stock">Есть в наличии</div>';

В ней оставляем только

$_['text_instock']      = 'Есть в наличии';

Сохраняемся.

Вот и всЁ. Теперь у вас должно быть так как на сайте http://opencart3.esy.es/index.php?route=product/category&path=25_28

Да забыл, картинки влево съехали, находим

/catalog/view/theme/electronics/stylesheet/stylesheet.css

.product-grid .image {
	display: block;
	margin-bottom: 0px;
	text-align: center;
}

Добовляем выравнивание по центру.

Разжевал подробней некуда, должно получиться :eek:

markimax · 25 жовтня 2014

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

Chenom0r · 26 жовтня 2014

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

есть и другие мнения :)

http://uniofweb.ru/analytics/1484/ - вторая часть статьи

markimax · 26 жовтня 2014

есть и другие мнения :)

http://uniofweb.ru/analytics/1484/ - вторая часть статьи

Ну мне все эти исследование больше "напоминают" социологические "опросы" и т.п.

Кто такие эти [censored] сайты, что проводили "исследования"?

Дело в том, что тут важен даже полутон кнопки! 60% людей не видят полутона (да каждый второй не различает салатовый и зеленый цвет, для них он один и тот же, а очень светло салатовый может быть для них вообще желтым и т.п.) , и если цвет кнопки "зеленый" будет не в том полутоне, они его могут видеть совсем в другом цвете! Поэтому здесь субъективные исследования и совершенно не упоминается про дальтоников и тех кто не видит полутона, отсюда вывод, я не верю им (извините но опыт 10 летний опыт работы шеф-дизайнеров чему-то да научил, и цвета очень важны в пром дизайне и веб дизайне. И есть свои табу и приоритеты а также менталитет региона (к примеру америкосы привыкли к оранжево- синей кнопке paypal, для них это ассоциация с оплатой, вот откуда могут быть "ноги" таких "исследований"), "светофоры тоже разные :)) ).

wipper · 26 жовтня 2014

Оранжевая кнопка не комильфо по юзабилити (подсознание работает как на светофор, догадайтесь сами, первую реакцию на почти красную кнопку)). В вашем варианте лучше зеленая, а hover - темно-зеленая или ярко-зеленая

Совершенно с вами согласен, оранжевая кнопка не вписывается в дизайн, наверняка лучше бы сделать или зеленую кнопку в цвет меню с салатовой подсветкой, или темносерую (ближе к черному) с зеленой подсветкой при наведении 8-).

Я бы сделал бы темно серую с зеленой подсветкой, и изменил бы розовую акцию на зеленую

И получится так

jekass · 26 жовтня 2014

Совершенно с вами согласен, оранжевая кнопка не вписывается в дизайн, наверняка лучше бы сделать или зеленую кнопку в цвет меню с салатовой подсветкой, или темносерую (ближе к черному) с зеленой подсветкой при наведении 8-).

Я бы сделал бы темно серую с зеленой подсветкой, и изменил бы розовую акцию на зеленую

special.png

И получится так

Imag88888e 1.png

wipper Хорошая идея! Стикер в цвет дизайна, цену основную зеленым, а акционную красной. Кнопку зеленой, но при наведении красной (оранжевой), мол остановись и купи) Как это все реализовать.

С галочкой возле наличия не получилось, можете посмотреть на сайте, к примеру здесь - http://shopping-ck.com.ua/sportivnoe-pitanie/kreatin/ получился хаос, плюс в некоторых случаях наличии сдвинулось в сторону.

Вхід

Изменение вида кнопки купить

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information