Сообщение #1 Vitaly » 24.08.2016, 20:38
Сделал простенький, автоматический вывод меток к товарам для версии Lite
Выводятся ХИТЫ, АКЦИЯ - если есть старая цена, и НОВЫЙ - 30 дней от даты создания.
Из плюсов:
Реализовано на уровне шаблона, хотелось максимально простое решение.
Не нужно править код шаблона, только добавить маленький кусочек.
Можно "регулировать" сколько дней товар будет новым.
У меня всё на CSS, без изображений, но при желании можно заморочиться. Со стилями не парился, это тоже на вкус и цвет...
В файл
\design\default_lite_1\html\tiny_products.tpl (учтите название вашего шаблона) дописываем в низу код:
Код: Выделить всё
<div class="metki">
{if $product->featured}
<div style="background: #f17a3c;">ХИТ</div>
{/if}
{if $product->variant->compare_price}
<div style="background: #f24941;">АКЦИЯ</div>
{/if}
{if $product->created|date_format:'%Y-%m-%d' > "-30 days"|date_format:'%Y-%m-%d'}
<div style="background: #57bac7;">НОВЫЙ</div>
{/if}
</div>
И в шаблоне подключаем стиль:
Код: Выделить всё
<style>
.metki {
position: absolute;
top: 8%;
left: 16px;
z-index: 1;
}
.metki div + div {
margin-top: 2px;
}
.metki div {
text-align: center;
color: #fff;
font-size: 15px;
font-weight: 400;
padding: 0 10px 0 5px;
width: 75px;
clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}
</style>
У меня выглядит это так -
http://piccy.info/view3/10200294/536611af87b72d91e9d5a4d84b2437ab/orig/UPD: Вывод метки со скидкой в процентах:
Заменяем строку <div style="background: #f24941;">АКЦИЯ</div>
на код
Код: Выделить всё
{if $product->variant->compare_price > $product->variant->price}
<div style="background: #f24941;">-{100-($product->variant->price/$product->variant->compare_price*100)|string_format:"%d"}%</div>
{/if}
Сделал простенький, автоматический вывод меток к товарам для версии Lite
Выводятся ХИТЫ, АКЦИЯ - если есть старая цена, и НОВЫЙ - 30 дней от даты создания.
Из плюсов:
Реализовано на уровне шаблона, хотелось максимально простое решение.
Не нужно править код шаблона, только добавить маленький кусочек.
Можно "регулировать" сколько дней товар будет новым.
У меня всё на CSS, без изображений, но при желании можно заморочиться. Со стилями не парился, это тоже на вкус и цвет...
В файл [b]\design\default_lite_1\html\tiny_products.tpl[/b] (учтите название вашего шаблона) дописываем в низу код:
[code]<div class="metki">
{if $product->featured}
<div style="background: #f17a3c;">ХИТ</div>
{/if}
{if $product->variant->compare_price}
<div style="background: #f24941;">АКЦИЯ</div>
{/if}
{if $product->created|date_format:'%Y-%m-%d' > "-30 days"|date_format:'%Y-%m-%d'}
<div style="background: #57bac7;">НОВЫЙ</div>
{/if}
</div>[/code]
И в шаблоне подключаем стиль:
[code]
<style>
.metki {
position: absolute;
top: 8%;
left: 16px;
z-index: 1;
}
.metki div + div {
margin-top: 2px;
}
.metki div {
text-align: center;
color: #fff;
font-size: 15px;
font-weight: 400;
padding: 0 10px 0 5px;
width: 75px;
clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}
</style>
[/code]
У меня выглядит это так - http://piccy.info/view3/10200294/536611af87b72d91e9d5a4d84b2437ab/orig/
UPD: Вывод метки со скидкой в процентах:
Заменяем строку <div style="background: #f24941;">АКЦИЯ</div>
на код
[code]{if $product->variant->compare_price > $product->variant->price}
<div style="background: #f24941;">-{100-($product->variant->price/$product->variant->compare_price*100)|string_format:"%d"}%</div>
{/if}[/code]
Последний раз редактировалось
Vitaly 25.08.2016, 15:18, всего редактировалось 3 раза.