CODEWITHSUNDEEP
phpimagemagentocollectionsproduct
Sam Danger
Sam Danger

Reputation: 49

Swap Magento Product images based on custom option

My products are displayed in a grid format, and purchased directly from this page. They are simple products with custom options. Each option is a color. Is there a way to assign an image to each product/color combo and display that image when the drop down for the associated color is is selected?

 ` <?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;"> 
`

Upvotes: 0

Views: 4015

Answers (3)

inder
inder

Reputation: 1

To assign an image to each product/color combo and display that image on your store use Encoresky/CustomOptionimage extention visit through this demo link http://mage.encoreskydev.com/custom-option-image

Upvotes: 0

Theodores
Theodores

Reputation: 1209

There are several commercial modules promising this functionality on the product page but not the category page. Therefore there is no off the shelf easy option.

For reasons of SKU count, ordering from the category page and database maintainability, configurable products may not be the way to go here.

A simple workaround is to create media/swatch/red.jpg, media/swatch/orange.jpg, media/swatch/redgreenstripes.jpg and so on. Then in the frontend code, pull up the swatch matching the option required. For each colour option you'll need to strtolower the code, concatenate it with get-base-dir-media-swatches and pop it in an image tag.

A Blutak and string solution? Yes, but you won't need to spend all day writing a module.

Upvotes: 2

Joe
Joe

Reputation: 1340

Use configurable products. Then you can assign an image to each combination.

To do this:

  • Create a configurable product for each product
  • Create a simple product for each product+color combination, make sure they are associated with the correct configurable product
  • Assign an image to each simple product you just created

Then, in your grid, display the configurable products instead, but show the color attributes of the associated simple products in the options drop-down, switching to the correct image when selected.

If you are not familiar with configurable products, see this page. They're a bit more complicated than simple products alone, but worth learning about.

Upvotes: 0

Related Questions