Question

我有一个名为免费送货的自定义属性的magento商店现在，这会在产品本身下方呈现免费送货图标

但我希望通过在产品本身顶部放置一个新按钮来使其更具吸引力。

以下是magento页面的php代码：

呈现页面的示例： http://www.theprinterdepo.com/lexmark-optra-t640-printer-20g0100

我需要修改gallery.phtml中的代码，将图标放在产品的顶部，右上角。我会将图像修改为透明。

这是gallery.phtml文件：

<?php $_width=$this->getImageWidth() ?>
<div class="product-image-popup" style="width:<?php echo $_width; ?>px;">
    <p class="a-right"><a href="#" onclick="window.close(); return false;"><?php echo $this->__('Close Window') ?></a></p>
    <?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
        <div class="nav">
          <?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
              <a href="<?php echo $_prevUrl ?>">&laquo; <?php echo $this->__('Prev') ?></a>
          <?php endif; ?>
          <?php if($_nextUrl = $this->getNextImageUrl()): ?>
              <a href="<?php echo $_nextUrl ?>"><?php echo $this->__('Next') ?> &raquo;</a>
          <?php endif; ?>
        </div>
    <?php endif; ?>
    <?php if($_imageTitle = $this->htmlEscape($this->getCurrentImage()->getLabel())): ?>
        <h1 class="image-label"><?php echo $_imageTitle ?></h1>
    <?php endif; ?>
    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $this->getImageFile()); ?>"<?php if($_width): ?> width="<?php echo $_width ?>"<?php endif; ?> alt="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" title="<?php echo $this->htmlEscape($this->getCurrentImage()->getLabel()) ?>" id="product-gallery-image" class="image" />
    <?php if($this->getPreviusImageUrl() || $this->getNextImageUrl()): ?>
        <div class="nav">
          <?php if($_prevUrl = $this->getPreviusImageUrl()): ?>
              <a href="<?php echo $_prevUrl ?>">&laquo; <?php echo $this->__('Prev') ?></a>
          <?php endif; ?>
          <?php if($_nextUrl = $this->getNextImageUrl()): ?>
              <a href="<?php echo $_nextUrl ?>"><?php echo $this->__('Next') ?> &raquo;</a>
          <?php endif; ?>
        </div>
    <?php endif; ?>
    <p class="a-right"><a href="#" onclick="window.close(); return false;"><?php echo $this->__('Close Window') ?></a></p>
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function(){
    var demensions = $('product-gallery-image').getDimensions();
    window.resizeTo(demensions.width+90, demensions.height+210);
});
//]]>
</script>

这是view.phtml

<?php $Deal = $_product->getResource()->getAttribute('deal')->getFrontend()->getValue($_product);?>
                                                <?php $onSale = $_product->getResource()->getAttribute('on_sale')->getFrontend()->getValue($_product);?>
                                                <?php $hotItem = $_product->getResource()->getAttribute('hot_item')->getFrontend()->getValue($_product);?>
                                                <?php $freeShip = $_product->getResource()->getAttribute('free_shipping')->getFrontend()->getValue($_product);?>
                                                <?php if($Deal == 'Yes'){ ?>
                                                    <img src="<?php echo $this->getSkinUrl('images/depot/icon-deal.gif') ?>" >
                                                <?php } ?>
                                                <?php if($onSale == 'Yes'){ ?>
                                                    <img src="<?php echo $this->getSkinUrl('images/depot/icon-sale.gif') ?>" >
                                                <?php } ?>
                                                <?php if($hotItem == 'Yes'){ ?>
                                                    <img src="<?php echo $this->getSkinUrl('images/depot/icon-hot.gif') ?>" >
                                                <?php } ?>
                                                <?php if($freeShip == 'Yes'){ ?>
                                                    <img src="<?php echo $this->getSkinUrl('images/depot/icon-freeship.gif') ?>" >
                                                <?php }?>

Answer 1

对Magento不太了解，但你所说的将需要CSS编码而不是PHP。理想情况下，您需要将两个图像输出到同一个容器DIV。

然后将图像设置为position: absolute，然后使用zindex将它们叠加在一起。请注意，容器div可能需要position: absoloute或position: relative才能使图像的位置正常工作。

有关详情，请参阅此处 - How can we overlap two images using css style?

使用php和html将图像放在另一个图像上

1 个答案: