Try the Demo

Magento

eCommerce Software for Online Growth

Magento Forum

Our new hosted solution for small & emerging businesses
   
Page 1 of 2
Product Thumbnails in Grouped item
 
daviddawson
Jr. Member
 
Total Posts:  14
Joined:  2008-07-24
 

Hello.

I have many questions!  Just working on this one at the moment though.

I need to be able to include small thumbnail images next to each of my grouped products that differentiate the colours with a small colour swatch.

I have attached 2 images so that you can get a better understanding of what I mean.

The image called want.jpg is what I need to have.

The image called have.jpg is what I currently have.

Image Attachments
want.jpghave.jpg
Click thumbnail to see full-size image
 
 
Posted: August 27 2008
   |  top
 
Magento Community Magento Community
Magento Community
Magento Community
 
daviddawson
Jr. Member
 
Total Posts:  14
Joined:  2008-07-24
 

No one got any idea’s on how to achieve this?

 
 
Posted: August 28 2008
   |  top  |  # 1 
 
Magento Community Magento Community
Magento Community
Magento Community
 
daviddawson
Jr. Member
 
Total Posts:  14
Joined:  2008-07-24
 

Ok no responce on here :(

My customer did however manage to get an answer from the person that made the first site…

That one was tricky for me too Here’s what you need to do.
First, when creating the simple products under main image add the image of the color you want to display.
Then, after adding the simple products to the group product, go to your templates folder, and edit /catalog/product/view/type/grouped.phtml
You will need to add an image on each row, next to each product. The url for the image can be computed like this:

$url = trim(Mage::getModel('core/url')->setType('media')->getHostUrl(),'/');
$url .= Mage::app()->getStore()->getConfig('catalog/images/product_upload_url');
$url .= $_item->getStockItem()->getProduct()->getData('small_image');

Hope this helps.
Good luck with your store.

I’m still still very lost.  I don’t know ANY php.  I’m a graphics person really.

Could anyone explain this process please?  As if you were talking to a 5 year old that just managed to figure out how to turn a monitor on.

There is a copy of the file that needs editing attached.

File Attachments
grouped.phtml  (File Size: 8KB - Downloads: 394)
 
 
Posted: September 4 2008
   |  top  |  # 2 
 
Magento Community Magento Community
Magento Community
Magento Community
 
daviddawson
Jr. Member
 
Total Posts:  14
Joined:  2008-07-24
 

Is this so complicated that no one knows how do do it?

Or so simple that no one can be bothered to explain it?

 
 
Posted: September 5 2008
   |  top  |  # 3 
 
Magento Community Magento Community
Magento Community
Magento Community
 
corradomatt
Sr. Member
 
Total Posts:  161
Joined:  2008-09-01
San Diego, CA
 

This is a modification I am very interested in. I will probably begin to tackle this soon since I need the same exact mod for my new store.

I also want to be able to allow for a click through to the individual product on the listing so that customers might be able to see more info about the particular product. This could be done by creating a link to the product out of the “Product Name” area of the grouped product.

 Signature 

-Matt

 
 
Posted: September 18 2008
   |  top  |  # 4 
 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  77
Joined:  2008-03-26
france moselle
 

in grouped.phtml, replace table with this code or copy/paste what inside BEGIN END comments :

<table class="data-table grouped-items" id="super-product-table" style="float: left; position: relative;">
    <col />
    <col />
    <col width="1" />
    <thead>
        <tr> 
        <!--BEGIN CHANGE : SEE IMAGE ///////////////////////////////////////////////////////////-->
        <th><?php echo $this->__('Image')
            ?></th>
            <!--END CHANGE : SEE IMAGE ///////////////////////////////////////////////////////// -->
            <th><?php echo $this->__('Product Name')
            ?></th>
            <th class="a-right"><?php echo $this->__('Price') ?></th>
            <?php if ($_product->isSaleable()): ?>
            <th class="a-center"><?php echo $this->__('Qty') ?></th>
            <?php endif; ?>
        </tr>
    </thead>
    <tbody>
    <?php if (count($_associatedProducts)): ?>
    <?php foreach ($_associatedProducts as $_item): ?>
        <?php $_finalPriceInclTax = $this->helper('tax')->getPrice($_item, $_item->getFinalPrice(), true) ?>
        <tr>
       <!--BEGIN CHANGE : SEE IMAGE////////////////////////////////////////////////////////////////////// --> 
       <td>
        <?php 
echo '<A  href="'.$this->helper('catalog/image')->init($_item, 'image').'" ><img src="'.$this->helper('catalog/image')->init($_item, 'thumbnail')->resize(77, 77).'" width="77"><a>'; 
?></td>
<!--END CHANGE : SEE IMAGE //////////////////////////////////////////////////////////////////////////////-->
            <td><?php echo $this->htmlEscape($_item->getName()) ?></td>
            <td class="a-right">
                <?php echo $this->getPriceHtml($_item, true) ?>
                <?php echo $this->getTierPriceHtml($_item) ?>
            </td>
            <?php if ($_product->isSaleable()): ?>
            <td class="a-center">
            <?php if ($_item->isSaleable()) : ?>
                <input name="super_group[<?php echo $_item->getId() ?>]" value="<?php echo $_item->getQty()*1 ?>" type="text" class="input-text qty" />
            <?php else: ?>
                <p class="availability"><span class="out-of-stock"><?php echo $this->__('Out of stock.') ?></span></p>
            <?php endif; ?>
            </td>
            <?php endif; ?>
        </tr>
    <?php endforeach; ?>
    <?php else: ?>
       <tr>
           <td colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>"><?php echo $this->__('No options of this product are available.') ?></td>
       </tr>
    <?php endif; ?>
    </tbody>
</table>

Resize is ok if you have resize module : http://www.magentocommerce.com/extension/153/direct-resize
It works fine for me, see attachment.
I modified too bundle products “radio” and it shows now image for each option in bundle products. As i modified one line in he core, i don’t post result here. Tell me.

Image Attachments
grouped.jpg
Click thumbnail to see full-size image
 
 
Posted: January 4 2009
   |  top  |  # 5 
 
Magento Community Magento Community
Magento Community
Magento Community
 
sofian
Jr. Member
 
Total Posts:  9
Joined:  2008-12-27
 

Please rrroulio,

Could you tell me how did you do to display image for each option in bundle products?

Thx

 Signature 

Sofian

 
 
Posted: January 17 2009
   |  top  |  # 6 
 
Magento Community Magento Community
Magento Community
Magento Community
 
Vicky H
Sr. Member
 
Total Posts:  84
Joined:  2008-02-27
 

Thanks for posting that code rrroulio.  That’s really helpful.  Just want I need!

 Signature 

Using Magento 1.5.1.0

 
 
Posted: January 26 2009
   |  top  |  # 7 
 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  77
Joined:  2008-03-26
france moselle
 
sofian - 17 January 2009 02:29 PM

Please rrroulio,

Could you tell me how did you do to display image for each option in bundle products?

Thx

sorry, my file for bundle products is now too modified (i add code in order to automaticly disabled radio buttons and “add to cart button” when total cart is not X euros (free gift to choose in a list).

But the way is similar than in my previous post

 
 
Posted: February 1 2009
   |  top  |  # 8 
 
Magento Community Magento Community
Magento Community
Magento Community
 
MalT
Member
 
Total Posts:  70
Joined:  2008-09-07
Poland
 

How to show the image horizontally

Image Attachments
grupa.jpg
Click thumbnail to see full-size image
 Signature 

Magento krok po kroku...

 
 
Posted: March 16 2009
   |  top  |  # 9 
 
Magento Community Magento Community
Magento Community
Magento Community
 
thegatner
Jr. Member
 
Total Posts:  21
Joined:  2009-03-19
 

thankyou very much came in handy.

 
 
Posted: May 2 2009
   |  top  |  # 10 
 
Magento Community Magento Community
Magento Community
Magento Community
 
jmwaniki
Jr. Member
 
Total Posts:  9
Joined:  2009-03-17
 

I would like to open product url rather than large image, when i click on thumbnail. What do i need to change in the above code.

 
 
Posted: November 30 2009
   |  top  |  # 11 
 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  77
Joined:  2008-03-26
france moselle
 

For bundle products i have change things in code ! Be carrefull with updates . You can too, create this page in local folder.
You have to use radio boutons in admin product bundle optioons. Only! Because it changes things with <td>.Image is in this add td

in /app/code/core/Mage/Bundle/Block/Catalog/Product/View/Type/Bundle
Option.php

I have commented code i have change.

class Mage_Bundle_Block_Catalog_Product_View_Type_Bundle_Option extends Mage_Bundle_Block_Catalog_Product_Price
{
    public function getProduct()
    {
        if (!$this->hasData('product')) {
            $this->setData('product', Mage::registry('current_product'));
        }
        return $this->getData('product');
    }

    public function getSelectionQtyTitlePrice($_selection, $includeContainer = true)
    {
        $price = $this->getProduct()->getPriceModel()->getSelectionPreFinalPrice($this->getProduct(), $_selection);
        return $_selection->getSelectionQty()*1 . ' x ' . $_selection->getName() . ' <td> ' .
           // ($includeContainer ? '<span class="price-notice">':'') . '+' .
  ($includeContainer ? '<span class="price-notice">':'') . '' .
            $this->formatPriceString($price, $includeContainer) . ($includeContainer ? '</span>':'');
    }

    public function getSelectionTitlePrice($_selection, $includeContainer = true)
    {
        $price = $this->getProduct()->getPriceModel()->getSelectionPreFinalPrice($this->getProduct(), $_selection, 1);
      //  return $_selection->getName() . ' &nbsp; ' . ($includeContainer ? '<span class="price-notice">':'') . '+' .
  return $_selection->getName() . ' <td> ' . ($includeContainer ? '<span class="price-notice">':'') . '' .
            $this->formatPriceString($price, $includeContainer) . ($includeContainer ? '</span>':'');
    }

    public function setValidationContainer($elementId, $containerId)
    {
        return '<script type="text/javascript">
            $(\'' . $elementId . '\').advaiceContainer = \'' . $containerId . '\';
            $(\'' . $elementId . '\').callbackFunction  = \'bundle.validationCallback\';
            </script>';
    }

    public function formatPriceString($price, $includeContainer = true)
    {
        $priceTax = Mage::helper('tax')->getPrice($this->getProduct(), $price);
        $priceIncTax = Mage::helper('tax')->getPrice($this->getProduct(), $price, true);

        if (Mage::helper('tax')->displayBothPrices() && $priceTax != $priceIncTax) {
            $formated = Mage::helper('core')->currency($priceTax, true, $includeContainer);
            $formated .= ' (+'.Mage::helper('core')->currency($priceIncTax, true, $includeContainer).' '.Mage::helper('tax')->__('Incl. Tax').')';
        } else {
            $formated = $this->helper('core')->currency($priceTax, true, $includeContainer);
        }

        return $formated;
    }
}

Next thing to change is in your template.
/app/design/frontend/default/parfum_nature/template/bundle/catalog/product/view/type/bundle/option
radio.phtml
(in the nexte post)

 
 
Posted: February 8 2010
   |  top  |  # 12 
 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  77
Joined:  2008-03-26
france moselle
 

next part....
Be carreful with ajax to zoom image. It’s not by default. Adapt with your own or unzip attached zip in your /skin/js folder. I’m not sure it’s ok with it!? add css in your boxes.css
alt text for images is short description, you can change it. Remember, you have to coose radio for your bundles options
columns titles in french, adapt them.

<?php $_option = $this->getOption() ?>
<?php $_selections = $_option->getSelections() ?>
<?php $_default = $_option->getDefaultSelection() ?>
<?php $_showSingle = (count($_selections) == 1 && $_option->getRequired()) ?>
<dt><span class="qty-holder">
        <?php if ($_default): ?>
            <?php $_defaultQty = $_default->getSelectionQty()*1 ?>
            <?php $_canChangeQty = $_default->getSelectionCanChangeQty() ?>
        <?php else: ?>
            <?php if (!$_showSingle): ?>
                <?php $_defaultQty = '0' ?>
                <?php $_canChangeQty = false ?>
            <?php else: ?>
                <?php $_defaultQty = $_selections[0]->getSelectionQty()*1 ?>
                <?php $_canChangeQty = $_selections[0]->getSelectionCanChangeQty() ?>
            <?php endif; ?>
        <?php endif; ?>
        

        
        
        
        
        
      <label for="bundle-option-<?php echo $_option->getId() ?>-qty-input"><?php //echo $this->__('Qty:') ?>&nbsp;</label><input onkeyup="bundle.changeOptionQty(this)" <?php echo $_canChangeQty?'':'disabled="disabled"' ?> id="bundle-option-<?php echo $_option->getId() ?>-qty-input" class="input-text qty<?php echo $_canChangeQty?'':' qty-disabled' ?>" type="hidden" name="bundle_option_qty[<?php echo $_option->getId() ?>]" value="<?php echo $_defaultQty ?>" />
    </span> 
   
</dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <?php if (count($_selections) == 1 && $_option->getRequired()): ?>
        <?php echo $this->getSelectionTitlePrice($_selections[0]) ?>
        <input type="hidden" name="bundle_option[<?php echo $_option->getId() ?>]" value="<?php echo $_selections[0]->getSelectionId() ?>" />
    <?php else:?>
        <ul class="options-list">
        <?php if(!$_option->getRequired()): ?>
            <li><input type="radio" onclick="bundle.changeSelection(this)" class="radio" id="bundle-option-<?php echo $_option->getId() ?>" name="bundle_option[<?php echo $_option->getId() ?>]"<?php echo ($_default && $_default->isSalable())?'':' checked="checked" ' ?> value="" /><?php //} ?>
            <span class="label"><label for="bundle-option-<?php echo $_option->getId() ?>"><?php echo $this->__('None') ?></label></span>
            </li>
        <?php endif; ?>
        
        
         <table class="data-table grouped-items" id="super-product-table-<?php echo $_option->getId() ?>" style="float: left; position: relative;">
    <col />
    <col />
    <col width="1" />
    <thead>
        <tr> <th>Choix</th>
            <th style="text-transform:uppercase; width:70%;"><?php echo $this->htmlEscape($_option->getTitle()) ?><?php if ($_option->getRequired()) echo '<span class="required">&nbsp;*</span>' ?></th>
           <th>Prix</th>  
           <th>Image</th>
        </tr>
    </thead>
    <tbody>       
        
        <?php foreach($_selections as $_selection): ?> 
            <tr>
        
            <td><input type="radio" onclick="bundle.changeSelection(this)" class="radio<?php echo $_option->getRequired()?' validate-one-required-by-name':'' ?>" id="bundle-option-<?php echo $_option->getId() ?>-<?php echo $_selection->getSelectionId() ?>" name="bundle_option[<?php echo $_option->getId() ?>]"<?php echo ($_selection->getIsDefault() && $_selection->isSaleable())?' checked="checked" ':'' ?><?php echo !$_selection->isSaleable()?' disabled="disabled" ':'' ?>value="<?php echo $_selection->getSelectionId() ?>" /></td>
            <td> 
            <label for="bundle-option-<?php echo $_option->getId() ?>-<?php echo $_selection->getSelectionId() ?>"><?php echo $this->getSelectionTitlePrice($_selection) ?>
            <?php if($_option->getRequired()): ?>
                <?php echo $this->setValidationContainer('bundle-option-'.$_option->getId().'-'.$_selection->getSelectionId(), 'bundle-option-'.$_option->getId().'-container') ?>
            <?php endif; ?>
          <td>
         
         
         <?php echo '<A class="highslide" href="'.$this->helper('catalog/image')->init($_selection, 'image').'" onclick="return hs.expand(this)"><img src="'.$this->helper('catalog/image')->init($_selection, 'thumbnail')->resize(50, 50).'" width="50" height="50"  title="'.$this->htmlEscape($_selection->getShortDescription()).'"><a>'; 
?> 
        <?php endforeach;?>
      
        <span id="bundle-option-<?php echo $_option->getId() ?>-container"></span>   </td>
       </tr>
    <?php endif; ?>
    </tbody>
</table>
<script type="text/javascript">decorateTable('super-product-table-<?php echo $_option->getId() ?>')</script>

File Attachments
highslide.zip  (File Size: 130KB - Downloads: 204)
 
 
Posted: February 8 2010
   |  top  |  # 13 
 
Magento Community Magento Community
Magento Community
Magento Community
 
rrroulio
Sr. Member
 
Avatar
Total Posts:  77
Joined:  2008-03-26
france moselle
 

for my 2 last posts, be carreful, code is for 1.3.2
try to change only commented lines or modified lines in a first time and test.

 
 
Posted: February 8 2010
   |  top  |  # 14 
 
Magento Community Magento Community
Magento Community
Magento Community
 
amanda
Jr. Member
 
Total Posts:  8
Joined:  2008-12-02
 

rrroulio - would you consider updating code for 1.4?  I’ve tried to figure out how I’d mod your code for 1.4, but I’m pretty lost. I’d like to add both a thumbnail for the grouped items and link the title of the product to the product itself.  I’m sure this would be a mod of great community value as I can’t be the only person with this idea.

 
 
Posted: June 25 2010
   |  top  |  # 15 
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 2
 
display grouped additional on frontend
Nav bar issue with flash banner
 
© Copyright 2012 Magento Inc.
Privacy Policy|Terms of Service Magento Community Count
704132 users|1582 users currently online|499588 forum posts