Magento: атрибут продукта как стикер

Question

Я создал собственный атрибут с 10 параметрами (mix10, mix20 .... mix100). То, что я пытаюсь сделать, - это когда я выбираю mix10, чтобы получить «mix10» в качестве пользовательской наклейки на миниатюрном изображении продукта. Я не знаю, как добавить этот пользовательский атрибут в виде небольшого CSS на миниатюрное изображение продуктов.

Answer 1

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

Создание простой DIV над изображением продукта

<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>"> 
<img YOUR PRODUCT IMAGE/> 
</div> 

Тогда для CSS стиль вам нужно сделать что-то похожее на

#mix-sticker { 
z-index:500; 
width: 400px; 
height: 400px; 
} 

.mix-sticker_1 { 
background:url(../images/mix1.png) top left no-repeat; 
} 

Answer 2

Давайте предположим, что вы хотите поставить эту наклейку на миниатюр в вашей категории. Откройте /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml и найдите раздел, который выводит ваши уменьшенные изображения. Это, вероятно, выглядеть так:

<li> 
    <a> 
    <img /> 
    <a> 
    ... 
</li> 

Что вам нужно сделать, это вставить код прямо в <a> ссылке:

   <?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?> 
      <div class="sticker">    
       <?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; } 
        elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; } 
        elseif ... 
       ?> 
      </div> 

Добавлены все варианты, как elseif заявления.

Затем в вашем файле CSS добавьте стили для этих наклеек. Этот файл, вероятно, будет расположен на /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:

.sticker { 
    position: absolute; 
    left: -5px; 
    top: -5px; 

} 
.sticker > span { 
    font-size: 0; 
    text-indent: -77777px; 
    width: 75px; /*image size*/ 
    height: 75px; /*image size*/ 
    background: url(../images/mix10.png) no-repeat left top; /*image location*/ 
    display: block; 
} 
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px} 
... 

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