Question

как на картинку из каталога наложить еще одну картинку в виде лейбла, который висит на углу основной картинки товара "new", "sale", "-30%" и т.п..?
вот пример:
http://www.magicgold.ru/catalog/pendant-red_gold-fianit/podveska-s-fianitami-121988/
там на картинке висит лебл "new"...вот он мне и нужен.
хочу это сделать для товаров из $TOP_VIEW$, $TOP_SOLD$...но как? генерируемого кода для этих переменных я не вижу и не знаю какие классы в CSS нужно править? подскажите идею.

Answer 1

Вот к примеру:  Страница товара

<?if($ENTRY_SOLDS$>10 && $ENTRY_SOLDS$>1)?>
 <!-- Ярлык "Хит продаж" -->
 <div class="xxxxxxx">Здесь код вывода фото товара</div>
 <!-- Ярлык "Хит продаж" -->
 <?endif?>

В CSS

.xxxxxxx:after {
 position: absolute;
 z-index: 5;
 display: block;
 content: "ХИТ";
 left: -22px;
 top: -9px;
 padding: 20px 0 0 0;
 width: 60px;
 font: 12px/16px 'Open Sans';
 color: #fff;
 text-align: center;
 background: #FF8F00;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

С расположением поиграйтесь

Comments

опробовал Ваше решение..немного его модернизировал и вот что у меня получилось (на главной странице виден результат):
http://elka2015.ucoz.ru/
спасибо.

---

На мой взгляд красиво вышло

Answer 2

К примеру сделать как вы говорите лейблу - Новый товар.

 

Переходим в Панель управления - Главная - Интернет-магазин - Управление дизайном модуля - Вид товара в каталоге, далее находим код который отвечает за отображение изображения товара:

 <img alt="" src="<?if($THUMB$)?>$THUMB$<?else?>http://site.ru/img/noimg.gif<?endif?>" class="gphoto" onclick="_bldCont(this.getAttribute('idx'));" id="ipreview" idx="0" style="width:150px;height:150px;" title="Кликните для увеличения изображения">

 Заменяем на:

 <?if($ADD_DATE$='20.02.2014')?><div class="new_shield">Новый Товар</div><?endif?>  

 <img alt="" src="<?if($THUMB$)?>$THUMB$<?else?>http://site.ru/img/noimg.gif<?endif?>" class="gphoto" onclick="_bldCont(this.getAttribute('idx'));" id="ipreview" idx="0" style="width:150px;height:150px;" title="Кликните для увеличения изображения">

Как видите выше в коде для даты установлено условие:

<?if($ADD_DATE$='20.02.2014')?><div class="new_shield">Новый Товар</div><?endif?> 

Для примера я установил дату - 20.02.2014 все товары с данной датой добавления товара будут помечены лейблом NEW. 

 

Подстраивайте под себя ту дату которая вам нужна в любой момент изменяем.

 

Стили для кнопки New(поместить в таблицу стилей CSS):

.new_shield {

margin: 0 24px;

width: 75px;

height: 72px;

position: absolute;

z-index: 99;

text-indent: -9999px;

background: url(http://www.magicgold.ru/d2013/img/shields/new.png);

}

Стили так же можете изменять под свой вид материалов.

Comments

опробовал предложенный вами вариант. конечное решение сделал на CSS без использования картинок.
http://elka2015.ucoz.ru/
на главной странице виден результат.
спасибо.