Метки На Товарах New, Hit, Sale Итд
#1
Отправлено 25 Июнь 2013 - 13:49
Метки на товарах как в приложенном файле с надписями NEW, HIT и метки скидок. Метки выставляются в зависимости от того к какой категории относится товар (в новинках, хитах и акциях). Причем если акция, то метка показывает размер скидки (10, 20 30 %) и для каждой скидки будет отдельная картинка, на которой будет менятся только число кратное 10 (10,20,30,40,50,60,70 думаю больше не надо).
Эти метки будут показываться в каталоге, на странице товара и на главной странице ( причем сделать так чтобы товары по обьединенные по категориям не отображались на главной, а отображать через категорию товары на главной, но на товарах тоже присутствовали эти метки).
Вот так:
#4
Отправлено 25 Июнь 2013 - 15:13
lelik538@gmail.com (25 Июнь 2013 - 13:49) писал:
Метки на товарах как в приложенном файле с надписями NEW, HIT и метки скидок. Метки выставляются в зависимости от того к какой категории относится товар (в новинках, хитах и акциях). Причем если акция, то метка показывает размер скидки (10, 20 30 %) и для каждой скидки будет отдельная картинка, на которой будет менятся только число кратное 10 (10,20,30,40,50,60,70 думаю больше не надо).
Эти метки будут показываться в каталоге, на странице товара и на главной странице ( причем сделать так чтобы товары по обьединенные по категориям не отображались на главной, а отображать через категорию товары на главной, но на товарах тоже присутствовали эти метки).
Вот так:
primer.jpg пример 2.jpg пример3.jpg
{% FOR index_page_favorites_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Код:
<div class="stiker2"> </div>
Для новинок
После кода:
{% FOR index_page_new_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Добавить:
<div class="stiker1"> </div>
Добавить код:
В конец файла "main.css" добавить код:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}stiker1.png'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}stiker2.png'); background-size:100% 100%; }
Вот файлы с стикерами, их можно добавить в Редактор шаблонов.
stiker2.zip 6,64К 155 Количество загрузок:
#5
Отправлено 25 Июнь 2013 - 15:34
В файле "Товары". После кода:
<!-- Список товаров. Таблица --> <table> <tr> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Добавить код:
{%IF goods.IS_NEW = 1%} <div class="stiker2"> </div> {%ELSEIF goods.IS_TOP = 1%} <div class="stiker1"> </div> {%ELSE %} {%ENDIF%} {%IF goods.MAX_DISCOUNT > 0 %} <div class="stiker3"> <span>{goods.MAX_DISCOUNT}</span> </div> {%ENDIF%}И в файл стилей нужно добавить стили для товаров в акции:
.stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; opacity: 0.4; /*background: url('тут адрес к стикеру');*/ background-size:100% 100%; } .stiker3 span { color: black; font-weight: bold; text-align: center; vertical-align: middle; }
#6
Отправлено 25 Июнь 2013 - 15:35
Koderhan (25 Июнь 2013 - 15:13) писал:
{% FOR index_page_favorites_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Код:
<div class="stiker1"> </div>
Для новинок
После кода:
{% FOR index_page_new_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Добавить:
<div class="stiker2"> </div>
Добавить код:
В конец файла "main.css" добавить код:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; opacity: 0.4; background: url('тут адрес к стикеру'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; opacity: 0.4; background: url('тут адрес к стикеру'); background-size:100% 100%; }
вы написали после кода
{% FOR index_page_favorites_goods %}
<td class="goodsListItem">
<div class="goodsListItemBlock withBorder cornerAll">
вставить Стикер1 для хитов и стикер 2 для новинок. После одного и того же кода, так что вставлять? Пока что результата не видно
#7
Отправлено 25 Июнь 2013 - 15:50
lelik538@gmail.com (25 Июнь 2013 - 15:35) писал:
{% FOR index_page_favorites_goods %}
<td class="goodsListItem">
<div class="goodsListItemBlock withBorder cornerAll">
вставить Стикер1 для хитов и стикер 2 для новинок. После одного и того же кода, так что вставлять? Пока что результата не видно
Разница тут в переменной.
{% FOR index_page_favorites_goods %}
Сообщение выше отредактировал.
#8
Отправлено 25 Июнь 2013 - 16:08
Koderhan (25 Июнь 2013 - 15:50) писал:
Разница тут в переменной.
{% FOR index_page_favorites_goods %}
Сообщение выше отредактировал.
Вроде все получается)))поднять их чуть выше, чтобы они как будто висели на рамке товара)
И как сделать так, чтобы на главной не отображались категории НОВИНКИ и ХИТЫ, а отображались те товары которые я добавил в категорию ТОВАРЫ НА ГЛАВНОЙ, и они показывались с метками, которые мы сделали)
#9
Отправлено 25 Июнь 2013 - 16:21
lelik538@gmail.com (25 Июнь 2013 - 16:08) писал:
И как сделать так, чтобы на главной не отображались категории НОВИНКИ и ХИТЫ, а отображались те товары которые я добавил в категорию ТОВАРЫ НА ГЛАВНОЙ, и они показывались с метками, которые мы сделали)
В файле "main.css" код:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}hit.png'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}new.png'); background-size:100% 100%; } .stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; } .stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }Заменить:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}hit.png'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}new.png'); background-size:100% 100%; } .stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; } .stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }И теперь для того чтобы выводить все эти товары в общим каталогом на главной странице а именно в категории "Товары на главной".
Можно удалить категории "Хиты продаж" и "Новинки" в файле "HTML". Это код:
И "Новинки":
<table> <tr> {% FOR index_page_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Добавить:
{%IF index_page_goods.IS_NEW = 1%} <div class="stiker2"> </div> {%ELSEIF index_page_goods.IS_TOP = 1%} <div class="stiker1"> </div> {%ELSE %} {%ENDIF%} {%IF index_page_goods.MAX_DISCOUNT > 0 %} <div class="stiker3"> <span>{index_page_goods.MAX_DISCOUNT}</span> </div> {%ENDIF%}
#10
Отправлено 25 Июнь 2013 - 16:37
Koderhan (25 Июнь 2013 - 16:21) писал:
В файле "main.css" код:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}hit.png'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}new.png'); background-size:100% 100%; } .stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 0px; opacity: 0.8; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; } .stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }Заменить:
.stiker1 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}hit.png'); background-size:100% 100%; } .stiker2 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}new.png'); background-size:100% 100%; } .stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 20px; top: -2px; opacity: 1; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; } .stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }И теперь для того чтобы выводить все эти товары в общим каталогом на главной странице а именно в категории "Товары на главной".
Можно удалить категории "Хиты продаж" и "Новинки" в файле "HTML". Это код:
И "Новинки":
<table> <tr> {% FOR index_page_goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll">Добавить:
{%IF index_page_goods.IS_NEW = 1%} <div class="stiker2"> </div> {%ELSEIF index_page_goods.IS_TOP = 1%} <div class="stiker1"> </div> {%ELSE %} {%ENDIF%} {%IF index_page_goods.MAX_DISCOUNT > 0 %} <div class="stiker3"> <span>{index_page_goods.MAX_DISCOUNT}</span> </div> {%ENDIF%}
А можно сделать чтобы на главной отображались товары в виде таблицы, а не в виде списка, как это было с новинками и хитами продаж? И почему то процент скидки не отображается на метке со скидкой на главной.
Так же подскажите пожалуйста как сделать те же метки на странице товара, только больше размера)
А можно сделать чтобы на главной отображались товары в виде таблицы, а не в виде списка, как это было с новинками и хитами продаж? И почему то процент скидки не отображается на метке со скидкой на главной.
Так же подскажите пожалуйста как сделать те же метки на странице товара, только больше размера)
#11
Отправлено 25 Июнь 2013 - 17:47
Теперь можно попробвать добавить такой же стикер на страницу товара.
В файле "Товар".
После кода:
<table class="goodsDataMain"> <tr> <td class="goodsDataMainImageBlock"> <!-- Большое изображение --> <div class="goodsDataMainImage">Добавить код:
{%IF GOODS_IS_NEW = 1%} <div class="stiker2"> </div> {%ELSEIF GOODS_IS_TOP = 1%} <div class="stiker1"> </div> {%ELSE %} {%ENDIF%} {%IF GOODS_MAX_DISCOUNT > 0 %} <div class="stiker3"> <span>{GOODS_MAX_DISCOUNT}</span> </div> {%ENDIF%}
В файле "main.css".
Добавить в конец файла код:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; }
#12
Отправлено 25 Июнь 2013 - 18:07
Koderhan (25 Июнь 2013 - 17:47) писал:
Теперь можно попробвать добавить такой же стикер на страницу товара.
В файле "Товар".
После кода:
<table class="goodsDataMain"> <tr> <td class="goodsDataMainImageBlock"> <!-- Большое изображение --> <div class="goodsDataMainImage">Добавить код:
{%IF GOODS_IS_NEW = 1%} <div class="stiker2"> </div> {%ELSEIF GOODS_IS_TOP = 1%} <div class="stiker1"> </div> {%ELSE %} {%ENDIF%} {%IF GOODS_MAX_DISCOUNT > 0 %} <div class="stiker3"> <span>{GOODS_MAX_DISCOUNT}</span> </div> {%ENDIF%}
В файле "main.css".
Добавить в конец файла код:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; }
Все работает, только почему то бирка скидки на страницах товара не отображается(
и еще скажите как сместить чуть ниже число скидки на бирке?
#13
Отправлено 25 Июнь 2013 - 18:21
lelik538@gmail.com (25 Июнь 2013 - 18:07) писал:
и еще скажите как сместить чуть ниже число скидки на бирке?
В файле "main.css".
Код:
.stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 4px; top: -2px; opacity: 0.9; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; }Заменить:
.stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 4px; top: -2px; opacity: 0.9; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; padding-top: 12px; margin-bottom: -52px; }
В файле "Товар" код:
GOODS_MAX_DISCOUNTЗаменить:
GOODS_MOD_MAX_DISCOUNT
#14
Отправлено 25 Июнь 2013 - 18:33
Koderhan (25 Июнь 2013 - 18:21) писал:
В файле "main.css".
Код:
.stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 4px; top: -2px; opacity: 0.9; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; }Заменить:
.stiker3 { height: 40px; position: relative; margin-bottom: -40px; background-color: #DFDFDF; width: 50px; left: 4px; top: -2px; opacity: 0.9; background: url('{ASSETS_IMAGES_PATH}saleee.png'); background-size:100% 100%; padding-top: 12px; margin-bottom: -52px; }
В файле "Товар" код:
GOODS_MAX_DISCOUNTЗаменить:
GOODS_MOD_MAX_DISCOUNT
все получилось, только вот на странице товара скидка смещена влево.
и как сделать чтобы на всех бирка кроме числа отображался значок "%"
#15
Отправлено 25 Июнь 2013 - 18:39
lelik538@gmail.com (25 Июнь 2013 - 18:33) писал:
и как сделать чтобы на всех бирка кроме числа отображался значок "%"
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; }Заменить:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; text-align: center; }
Процент можно добавить в файле "Товар" после переменной которая выводит скидку.
{GOODS_MOD_MAX_DISCOUNT}
#16
Отправлено 25 Июнь 2013 - 21:47
Koderhan (25 Июнь 2013 - 18:39) писал:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; }Заменить:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; text-align: center; }
Процент можно добавить в файле "Товар" после переменной которая выводит скидку.
{GOODS_MOD_MAX_DISCOUNT}
Все получилось)
Только проблема со страницей товара с биркой со скидкой, при смещении процента смещается бирка относительно изображения товара)
#17
Отправлено 26 Июнь 2013 - 02:38
.stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }
и заменить на
.stiker3 span { color: white; display: block; font-weight: bold; height: 40px; line-height: 32px; text-align: center; }
#18
Отправлено 26 Июнь 2013 - 18:06
Сake (26 Июнь 2013 - 02:38) писал:
.stiker3 span { color: white; font-weight: bold; text-align: center; vertical-align: middle; }
и заменить на
.stiker3 span { color: white; display: block; font-weight: bold; height: 40px; line-height: 32px; text-align: center; }
так же все
#19
Отправлено 26 Июнь 2013 - 18:49
lelik538@gmail.com (26 Июнь 2013 - 18:06) писал:
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; text-align: center; }Заменить:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -57px; text-align: center; }
#20
Отправлено 26 Июнь 2013 - 19:02
Koderhan (26 Июнь 2013 - 18:49) писал:
В файле "main.css".
Найти код:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -50px; text-align: center; }Заменить:
.goodsDataMainImage > div { width: 70px; height: 50px; margin-bottom: -57px; text-align: center; }
теперь изобажение немного обрезалось сверху, чем больше число подставлять тембольше обрезается
Темы с аналогичным тегами значок скидка хит, new, Значок, sale, hit, скидка, метка
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Какаду →
Акции →
Опрос Акции Со Скидками 0%Автор Гость_Кенгуру_* , 20 марта 2020 Скидка, Акция, 0% |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лазурь →
Оформление заказа →
Скидки И КупоныАвтор Гость_Маргарита Пандар_* , 09 авг. 2016 скидка, купон, лазурь |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Весна →
Акции →
Информация О СкидкахАвтор Гость_zoovmeste_* , 12 мая 2016 скидка |
|
|||
Повышение продаж, продвижение →
Платное размещение в поисковиках →
Купоны Яндекс .директАвтор Гость_ArtemNagorny_* , 06 мая 2016 яндекс, реклама, директ, кампания и 2 еще... |
|
|||
Вопросы работы сервиса StoreLand →
Предложения по улучшению сервиса →
Система СкидокАвтор Гость_denK_* , 24 февр. 2016 скидка |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных