Jump to content

Recommended Posts

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

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

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;
}

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Адрес магазина - 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;

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

Share this post


Link to post
Share on other sites
#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;

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

Странно

Share this post


Link to post
Share on other sites

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

#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;
} 

Вышло так

 

post-683955-0-41269000-1413980945_thumb.jpg

 

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

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

Вышло так

post-683955-0-23680000-1413980959_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

#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;

Share this post


Link to post
Share on other sites

 

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

#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;

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

Share this post


Link to post
Share on other sites

 

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

#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;

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

Share this post


Link to post
Share on other sites

 

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

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

#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  (ну вот как-то так)

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

  в stylesheet.css строка 1123

Share this post


Link to post
Share on other sites

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

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

 

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

 

 

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

#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;
}

Share this post


Link to post
Share on other sites

 

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

 

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

 

 

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

#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;
}

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

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

Share this post


Link to post
Share on other sites

//////

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

 

Например берем файл модуля  /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 } ?>

Share this post


Link to post
Share on other sites

 

Например берем файл модуля  /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 } ?>

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

/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:

post-683955-0-18017100-1414274838_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

post-683955-0-30994300-1414318288_thumb.png

 

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

post-683955-0-54368600-1414317333_thumb.png

Share this post


Link to post
Share on other sites

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

 

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

attachicon.gifspecial.png

 

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

attachicon.gifImag88888e 1.png

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

 

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.