基于自定义选项交换Magento产品图像


Swap Magento Product images based on custom option

我的产品以网格格式显示,并直接从该页面购买。它们是带有自定义选项的简单产品。每个选项都是一种颜色。有没有一种方法可以为每个产品/颜色组合分配一个图像,并在选择相关颜色的下拉菜单时显示该图像?

 ` <?php $_collectionSize = $_productCollection->count() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if ($i++%$_columnCount==0): ?>
        <ul class="products-grid">
        <?php endif ?>
            <li class="productthumb" item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(600); ?>" rel="lightbox" title="<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>" />
               <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(220); ?>" width="220" height="160" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                <h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
                <?php if($_product->getRatingSummary()): ?>
                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                <?php endif; ?>
                <?php echo $this->getPriceHtml($_product, true) ?>
                <form action="<?php echo Mage::getBaseUrl(); ?>checkout/cart/add/" method="post" style="display:block; clear:both;"> 
`

有几个商业模块在产品页面上承诺提供此功能,但在类别页面上没有。因此,没有现成的简单选择。

由于SKU数量、从类别页面订购以及数据库可维护性的原因,可配置产品可能不是这里的选择。

一个简单的解决方法是创建media/swatch/red.jpg、media/swatch/orange.jpg、media/switch/redgreenstripes.jpg等。然后在前端代码中,调出与所需选项匹配的样例。对于每个颜色选项,你需要对代码进行结构化,将其与get-base-dir媒体样本连接起来,并将其弹出到图像标签中。

Blutak和字符串解决方案?是的,但你不需要花一整天的时间写一个模块。

使用可配置的产品。然后可以为每个组合指定一个图像。

为此:

  • 为每个产品创建一个可配置的产品
  • 为每个产品创建一个简单的产品+颜色组合,确保它们与正确的可配置产品相关联
  • 为您刚刚创建的每个简单产品分配一个图像

然后,在您的网格中,显示可配置的产品,但在选项下拉列表中显示关联的简单产品的颜色属性,选择后切换到正确的图像。

如果您不熟悉可配置产品,请参阅本页。它们比简单的产品更复杂,但值得学习。

要为每个产品/颜色组合分配一个图像并在商店中显示该图像,请通过此演示链接使用Encoresky/CustomOptionimage扩展访问http://mage.encoreskydev.com/custom-option-image