1

我创建了一个包含 10 个选项的自定义属性（mix10、mix20 .... mix100）。我想要做的是当我选择 mix10 时，将“mix10”作为产品缩略图图像上的自定义标签。我不知道如何将此自定义属性添加为产品缩略图上的小 CSS。

4

2 回答 2

0

首先，您必须查看 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;
}
于 2013-08-01T20:56:07.703 回答
0

假设您想将此标签贴在类别列表中的缩略图上。打开/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 文件中使用的所有标签选项添加样式，然后确保您的图像已加载到服务器。

于 2016-08-16T02:26:00.527 回答