0

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;"> 
`
Josua Marcel C
  • 3,122
  • 6
  • 45
  • 87
Sam Danger
  • 49
  • 1
  • 2
  • 10

3 Answers3

2

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.

Theodores
  • 1,209
  • 1
  • 11
  • 15
  • Thank IRIS. Sounds like just what I need. Could you point me to some example code? – Sam Danger Aug 31 '12 at 15:40
  • Not readily... Right now in current projects we are showing all the colour options on the cat pages not little swatches. We are also using ajax quickview for add to cart from cat pages. Google 'magento custom options category' and you'll have some code for putting a select drop-down on the page, possibly to update prices and possibly to ravage the db pulling stuff through... Anyway, such code, swap the select drop-down to some swatches. http://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley – Theodores Aug 31 '12 at 17:25
  • I edited my question with the code from my list.phtml. I neglected to mention that I also need the lightbox URL to update when the color is selected. – Sam Danger Aug 31 '12 at 22:41
0

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.

Joe
  • 1,330
  • 13
  • 15
0

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

inder
  • 1