0

I want to configure the swap images while selecting the swatches in the product listing page. I created the color option for each product with their images. It works fine in the list view of products. Currently getting the small_image while switching the color swatches. How can I change the small_image to thumbnail image?

My list.phtml code is

            <?php
            /**
             * Product list template
             *
             * @see Mage_Catalog_Block_Product_List
             */
            /* @var $this Mage_Catalog_Block_Product_List */
            ?>
            <?php
                $_productCollection=$this->getLoadedProductCollection();
                $_helper = $this->helper('catalog/output');
            ?>
            <?php if(!$_productCollection->count()): ?>
            <p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
            <?php else: ?>
            <div class="category-products">
                <?php echo $this->getToolbarHtml() ?>
                <?php // List mode ?>
                <?php if($this->getMode()!='grid'): ?>
                <?php $_iterator = 0; ?>
                <ol class="products-list" id="products-list">
                <?php foreach ($_productCollection as $_product): ?>
                    <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
                        <?php // Product Image ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                            <?php /* Based on the native RWD styling, product images are displayed at a max of ~400px wide when viewed on a
                                    one column page layout with four product columns from a 1280px viewport. For bandwidth reasons,
                                    we are going to serve a 300px image, as it will look fine at 400px and most of the times, the image
                                    will be displayed at a smaller size (eg, if two column are being used or viewport is smaller than 1280px).
                                    This $_imgSize value could even be decreased further, based on the page layout
                                    (one column, two column, three column) and number of product columns. */ ?>
                            <?php $_imgSize = 300; ?>
                            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                                 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                        </a>
                        <?php // Product description ?>
                        <div class="product-shop">
                            <div class="f-fix">
                                <div class="product-primary">
                                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                                    <?php if($_product->getRatingSummary()): ?>
                                    <?php echo $this->getReviewsSummaryHtml($_product) ?>
                                    <?php endif; ?>
                                    <?php
                                    // Provides extra blocks on which to hang some features for products in the list
                                    // Features providing UI elements targeting this block will display directly below the product name
                                    if ($this->getChild('name.after')) {
                                        $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                                        foreach ($_nameAfterChildren as $_nameAfterChildName) {
                                            $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                                            $_nameAfterChild->setProduct($_product);
                                            echo $_nameAfterChild->toHtml();
                                        }
                                    }
                                    ?>
                                </div>
                                <div class="product-secondary">
                                    <?php echo $this->getPriceHtml($_product, true) ?>
                                </div>
                                <div class="product-secondary">
                                    <?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
                                        <p class="action"><button type="button" title="<?php echo $this->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                                    <?php elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
                                        <p class="action"><a title="<?php echo $this->quoteEscape($this->__('View Details')) ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a></p>
                                    <?php else: ?>
                                        <p class="action availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                                    <?php endif; ?>
                                    <ul class="add-to-links">
                                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                                        <?php endif; ?>
                                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                                        <?php endif; ?>
                                    </ul>
                                </div>
                                <div class="desc std">
                                    <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
                                </div>
                            </div>
                        </div>
                    </li>
                <?php endforeach; ?>
                </ol>
                <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

                <?php else: ?>

                <?php // Grid Mode ?>

                <?php $_collectionSize = $_productCollection->count() ?>
                <?php $_columnCount = $this->getColumnCount(); ?>
                <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
                    <?php $i=0; foreach ($_productCollection as $_product): ?>
                        <?php /*if ($i++%$_columnCount==0): ?>
                        <?php endif*/ ?>
                        <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                                <?php $_imgSize = 210; ?>
                                <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                                     src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"
                                     alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                            </a>
                            <div class="product-info">
                                <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                                <?php
                                // Provides extra blocks on which to hang some features for products in the list
                                // Features providing UI elements targeting this block will display directly below the product name
                                if ($this->getChild('name.after')) {
                                    $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                                    foreach ($_nameAfterChildren as $_nameAfterChildName) {
                                        $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                                        $_nameAfterChild->setProduct($_product);
                                        echo $_nameAfterChild->toHtml();
                                    }
                                }
                                ?>
                                <?php echo $this->getPriceHtml($_product, true) ?>
                                <?php if($_product->getRatingSummary()): ?>
                                <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                                <?php endif; ?>
                                <div class="actions">
                                    <?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
                                        <button type="button" title="<?php echo $this->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                                    <?php elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
                                        <a title="<?php echo $this->quoteEscape($this->__('View Details')) ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
                                    <?php else: ?>
                                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                                    <?php endif; ?>
                                    <ul class="add-to-links">
                                        <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                            <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                                        <?php endif; ?>
                                        <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                            <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                                        <?php endif; ?>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <?php /*if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
                        <?php endif*/ ?>
                    <?php endforeach ?>
                </ul>
                <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
                <?php endif; ?>

                <div class="toolbar-bottom">
                    <?php echo $this->getToolbarHtml() ?>
                </div>
            </div>
            <?php endif; ?>
            <?php
            // Provides a block where additional page components may be attached, primarily good for in-page JavaScript
            if ($this->getChild('after')) {
                $_afterChildren = $this->getChild('after')->getSortedChildren();
                foreach ($_afterChildren as $_afterChildName) {
                    $_afterChild = $this->getChild('after')->getChild($_afterChildName);
                    //set product collection on after blocks
                    $_afterChild->setProductCollection($_productCollection);
                    echo $_afterChild->toHtml();
                }
            }
            ?>
0

If I understand correctly - you are using some custom module for creating swatches? Please confirm - which one? And list all blocks of that module here.

Probably some Block or Model of that module contain code like

->addAttributeToSelect('small_image'

or just

'small_image'

and that can be replaced with 'image'

  • Actually, I'm using the basic RWD theme in Magento. The default image in switching is the small_image. So I need to replace the small_image with the basic image. While clicking on the swatch, the image will change to the desired one, but it's a small_image. I need to change this. – Shafeeque S Apr 11 '16 at 12:46
  • I don't think that Theme itself can contain Swatches functionality. It should be some module which doing this. But if you can provide catalog/product/list.phtml of your theme - I can review it more – Neklo.com Apr 11 '16 at 13:06
  • Code in list.phtml updated in the question – Shafeeque S Apr 11 '16 at 13:12
  • Still hard to tell where exactly swatches are printed in that file and which module/template used for them. Now we can look for line "name.after" in your there "/layouts" folder. Or look got line "init($_product, 'small_image')" in app/code/local and app/code/community folders. Maybe this way we will find exact place which choose small_image for swatches – Neklo.com Apr 11 '16 at 13:24
0

When you click on swatch icon, you get the image change. This is image, assigned as Base to certain associated product, due to Magento logic. So if each of your associated products has base image assigned, this very image will show when you click on corresponding swatch icon. Although, if some images are assigned to main configurable product, either small or base, but labelled as '-swatch' they may display when you press some color swatch. Check this, may be you have both - main and associated products images assigned.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.