Наклейки, бейджиНе принято

Добрый день.

Прошу, по мере загруженности попросить вашего дизайнера отрисовать красивые бейджи-наклейки на товары и интегрировать их в шаблон.

Спасибо.

8 ответов
a
Вячеслав Мехонцев
#
29 ноября 2018 14:58

Поддерживаю. Сейчас как-то не солидно...

Вообще, все доработки темы производятся программистом, судя по всему. Дизайнеру тоже стоит подключиться - есть что исправить, подправить или улучшить.

a
Евгений Леман
programmer
#
29 ноября 2018 20:09

Сейчас где-то плачет один дизайнер :)

Что есть "солидно"? Шипастые облачка? Возможно для вас да. Для других это пережиток прошлого и детский сад. Вы конкретнее говорите. Цвета вы можете и сами задать, shop-script позволяет. Да и цвета стандартных наклеек можно переопределить через user.css без особых проблем.

А вот менять дизайн уже созданных элементов крайне опасно. Люди не любят перемен. Даже если эти перемены к лучшему. Хотя я всё еще не понимаю куда и в какую сторону менять. В данный момент ярлыки выполнены в общем стиле, задача которого - оставаться более менее актуальным и спустя 10 лет. Я вот такие ярлыки:

это дешевый клипарт, который потерял свою актуальность еще лет 6-8 назад.


Дизайнеру тоже стоит подключиться - есть что исправить, подправить или улучшить.

Работы дизайнера почти в каждом обновлении больше, чем программиста. Это я как программист говорю. Просто многое из его работы вы не видите. Где-то отступы изменились и стали более правильными, где-то цвет/размер/картинка/иконка/переносы... В пределах одного обновления это трудно заметить. Но если через годик посмотреть на актуальную версию и на 1.0.0, то тогда разница будет очевидна.

a
Алексей Лебедев
#
30 ноября 2018 09:33

Евгений, спрошу как у специалиста.

Подскажите, как поставить иконку "палец вверх" справа от текста через пробел в теге span в файле product.badge.html

Спасибо.

<div class="cat-item__badge-item" style="background-color:#53dc27;color:#000;"><span>Хит продаж</span></di
a
Евгений Леман
programmer
#
30 ноября 2018 11:46

Видимо этот палец будет картинкой. Значит надо просто добавить эту картинку:

<div class="cat-item__badge-item" style="background-color:#53dc27;color:#000;"><span>Хит продаж <img src="/path/to/like.png" alt="" /></span></div>

a
Алексей Лебедев
#
30 ноября 2018 11:50

Извиняюсь, что не уточнил.

Иконку добавить из списка доступных иконок: http://incart.designmyshop.ru/help/11/spisok-dostu...

Если так сделать:

<span class="stock-icon"><svg class="icon"><use xlink:href="#icon-thumbs-up"></use></svg></span>
a
Евгений Леман
programmer
#
30 ноября 2018 14:54

С SVG не всё так просто. Там уже и CSS нужно подключать. Тут не подскажу.

a
Вячеслав Мехонцев
#
3 декабря 2018 10:11

Извините, конечно, может я что-то просмотрел или не понял... но сейчас в теме никаких бейджей нет вообще! У меня выводится просто текст на цветном фоне. Наверное, есть специальные классы для бейджей, которые надо вручную вписать в бейдж? Где их посмотреть? Где эта таблица?

Настроек ведь нет, позволяющих выбрать бейдж из списка готовых? Или есть? Где?

a
Вячеслав Мехонцев
#
7 декабря 2018 08:33

И всё таки, надеюсь, что дизайнер перестанет плакать и его посетит дизайнерская муза (и просто хорошее настроение). Вот примерно такое (хотя бы) хотелось бы видеть:

Это не дешевый клипарт из примера выше, но по моему, уже гораздо лучше, чем просто текст в цветном прямоугольнике. А всего-то подправлен цвет, шрифт, размеры, отступы, тени. Не сомневаюсь, что дизайнер сделает гораздо лучше! Именно это от него и хотелось бы.

Вот мои стили (если кому надо):

.cat-item__badge-item {
    background-image: linear-gradient(to top right, #f41e25, #e1439e);
    color: #fff !important;
    font-weight: 600;
}
/* бейдж снаружи */
.cat-item-badges {
    left: -7px !important;
}
.cat-item-badges .cat-item__badge-item {
    font-size: 110%;
    padding: 6px 18px 4px 18px !important;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.7);
    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.7);
}
/* бейдж внутри */
.cat-item-badges--item-page .cat-item__badge-item {
    font-size: 200%;
    padding: 12 px 26px 10px 26px !important;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.7);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.7);
}

Для тех, кто не знает - этот код надо вставить в user.css в шаблонах приложения "сайт". Затем в бейдже достаточно писать просто любой текст (без всяких классов). Или с доп. классом, в котором указать другие цвета...

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

Чтобы добавить комментарий, зарегистрируйтесь или войдите