1. in your media.phtml file, the big images are loaded via html. the image id is a collection of images from which only the first one is displayed initially, the other are waiting for the thumbail to be clicked. Simply add here the images collection from associated products,  each image being allocated a css ID built from product id and the increment

           <?//<associated product all images>
               if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
             foreach ($associated_products as $assoc)
               {
               $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
                $i=0; 
   
                if (count($assocProduct->getMediaGalleryImages()) > 0) {
                      foreach ($assocProduct->getMediaGalleryImages() as $_image)
                       {
                        $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                        $imageId=$assoc->getId() . "_" . $i++;?>
                         <div onclick="showZoom('<?=$imageFile?>')" class="jqzoom">
                 <img style="z-index:-1;display:none" id="image<?php echo $imageId; ?>"
                 width="340px"
                 height="250px"
                 src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail2', $_image->getFile())->resize(350, 250); ?>"
                 alt="<?php echo $this->htmlEscape($assocProduct->getName()) ?>"
                   jqimg="<?php echo $_image->url; ?>"></div>
               <?php
                        }
                   }
               }
               } //</associated product all images>
           ?>

2. in the same file, below, the images thumbnails are displayed in unordered lists. What you need to do here to create one unordered list per associated product, with a display none styling  :

               <?//<associated product all images>
               if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
             foreach ($associated_products as $assoc)
               {
               $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
               $i=0;
                if (count($assocProduct->getMediaGalleryImages()) > 0) { ?><ul id="teckLoom<?=$assoc->getId()?>" style="z-index:-1;display:none">   <?
                      foreach ($assocProduct->getMediaGalleryImages() as $_image)
                       {
                        $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                        $imageId=$assoc->getId() . "_" . $i++;?>
                        <li>
               <a href="#" onclick="jSelectImage('<?=$imageId ?>'); return false;">
               <img src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail', $_image->getFile())->resize(70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
           </a>         </li>
   
               <?php
                        }      ?></ul> <?
                   }
               }  }
                 //</associated product all images>   ?>

3. use the select color  function from our previous article to display the associated image set when an option is selected via image click :

   function selectColor(idAttribute, idProduct)
   {
   jQuery('#attribute76').val(idAttribute);
   spConfig.reloadPrice();
   displayProductConfigImage(idProduct);
   jQuery(".more-views ul").hide();
   jQuery(".more-views ul#teckLoom" + idProduct).show();
   }

4. add the following code to js/varien/product.js to let the effect work when an option is selected in the dropdown menu :

   var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
   //alert(jQuery("#image0").attr('src'));
   //$('image').attr("src", assocIMG[productNo]);
   displayProductConfigImage(productNo);
   jQuery(".more-views ul").hide();
   jQuery(".more-views ul#teckLoom" + productNo).show();

5. Have a look at the result on ruedesiam’s lovely designed multi color loom furniture : try  the chaise giulietta

Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 61: parser error : StartTag: invalid element name  in C:\aa_work\RueDeSiam\www\lib\Varien\Simplexml\Config.php on line 502

#0 C:\aa_work\RueDeSiam\www\lib\Varien\Simplexml\Config.php(502): mageCoreErrorHandler(2, 'simplexml_load_...', 'C:\aa_work\RueD...', 502, Array)
#1 C:\aa_work\RueDeSiam\www\lib\Varien\Simplexml\Config.php(489): Varien_Simplexml_Config->loadString('?????? ...', 'Mage_Core_Model...')
#2 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Adminhtml\Model\Config.php(102): Varien_Simplexml_Config->loadFile('?????? ...', 'Mage_Core_Model...')
#3 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Adminhtml\Model\Config.php(63): Mage_Adminhtml_Model_Config->_initSectionsAndTabs('C:\aa_work\RueD...')
#4 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Adminhtml\controllers\System\ConfigController.php(70): Mage_Adminhtml_Model_Config->getSections()
#5 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Core\Controller\Varien\Action.php(367): Mage_Adminhtml_System_ConfigController->editAction(NULL)
#6 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Core\Controller\Varien\Router\Admin.php(143): Mage_Core_Controller_Varien_Action->dispatch()
#7 C:\aa_work\RueDeSiam\www\app\code\core\Mage\Core\Controller\Varien\Front.php(158): Mage_Core_Controller_Varien_Router_Admin->match('edit')
#8 C:\aa_work\RueDeSiam\www\app\Mage.php(457): Mage_Core_Controller_Varien_Front->dispatch(Object(Mage_Core_Controller_Request_Http))
#9 C:\aa_work\RueDeSiam\www\index.php(66): Mage::run()
#10 {main}

the problem with this kind of error is that it doesn’t tell you which file is causing the error. To find out, work with your local installation

• set the developer mode in index.php : Mage::setIsDeveloperMode(true);
• open the app/code/core/Mage/Adminhtml/Model/Config.php and let the _initSectionsAndTabs tell you which xml is being loaded in the modules loop, just after $configFile is defined : echo $configFile;
• the last file that pops before the error is thrown out is likely to cause the breakout !!

• allows end user to choose color option by clicking on thumbnail
• change product image to associated product image

the technique above is inspired from Magento Wiki page that describes the javascript that catches the Options price select event to modifyu the product image. We’ve changed a few things though

1. this example is a color chooser. First thing is to create a folder in media/productColors with thumbnails of available colors, all stored in a file with the name of the color
2. follow the Magento Wiki tutorial carefully
3. instead of adding the code to view.phtml, create a new phtml file
   app/design/frontend/*/*/template/catalog/product/view/WebmasterBulletin_JsConfigColors.phtml with the following code

   <?
       $_helper = $this->helper('catalog/output');
       $_product = $this->getProduct();
   ?>
   <script type="text/javascript">
       var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
   
       var assocIMG = { // Added
       <?php
       if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
   
           foreach ($associated_products as $assoc)
               {$dados[] = $assoc->getId().":'".($assoc->image == "no_selection" || $assoc->image == "" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(365,400) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(365,400))."'";
               }
       } else {
           $dados[] =  "''";
       }
       echo implode(',', $dados );
       ?>
       }   
   
   function displayProductConfigImage(id)
   {
   jQuery('#image0').attr('src', assocIMG[id]) ;
   jQuery('#image0').attr('jqimg', assocIMG[id]) ;
   jSelectImage('0');
   }
   function selectColor(idAttribute, idProduct)
   {
   jQuery('#attribute76').val(idAttribute);
   spConfig.reloadPrice();
   displayProductConfigImage(idProduct);
   }
   var tipConfigImgThumb = "Choose your color :";
   </script>
   <?  $ii=0;foreach ($associated_products as $assoc)
            {
            $color=$assoc->getAttributeText("color");
            $w=100; $h=100;
            $imageColorSource =  "/media/productColors/" . strtolower($color) . ".jpg";
            $imageColorResized =  Mage::getBaseUrl() . "/media/phpThumb_1.7.9/phpThumb.php?src=" .  $imageColorSource . "&w=$w&h=$h&iar=1";?>
            <a href="javascript:selectColor(<?=$assoc->getColor()?>, <?=$assoc->getId()?>)" id="ConfigImgThumb<?=$assoc->getId()?>"><img src="<?=$imageColorResized?>" width="<?=$w?>" height="<?=$h?>" alt="<?=$color?>" border="0"></a>
   <script>new Tip('ConfigImgThumb<?=$assoc->getId()?>', tipConfigImgThumb + '<b><?=$color?></b>');</script><?
            }
        ?>

4. reference WebmasterBulletin_JsConfigColors.phtml in layout/catalog.xml, in the catalog/product_view block section :

       <block type="catalog/product_view" name="product.products_jsConfigColors" as="webmasterbulletin_products_js_config_colors" template="catalog/product/view/WebmasterBulletin_JsConfigColors.phtml" />

5. in the product.view.phtml you can now place your color chooser where you like

   <?if ($_product->isSaleable() && $this->hasOptions()) echo $this->getChildHtml('poleouest_products_js_config_colors');?>

Links : 25 free templates for Magento

• You can use a linux script to automatically modify magento email template files in your language / email folder
  • script 1
    http://www.osetemplates.com/?p=138
  • script 2 (slightly better because incorporates store specific vairables in the script)
    http://www.pridedesign.ie/content/magento-email-template-script
• You can also use the email template adapter extension to get the job done via magento’s administration interface

• Magento’s default layout is shipped with a rss page that requires activation in the admin, in the system->configuration, check rss feed to activate the /rss page that displays available feeds (check out our example on Rue de Siam)
• Import your feed to your facebook page or profile to get new produtcs or product special published automatically on your wall :
  1. Connect to facebook, and click  ”My Notes” from the navigational menu. If you have already entered notes on your page, then they will load for you to preview or edit.
  2. If you have not written an article, write one that announces the rss publication (e.g. new articles coming soon), in order to enable the settings menu. Select the “Import Blog” or “Edit Import Settings” link in the Notes Setting section. If you are already importing from a blog, the URL will appear here. Remeber that in the Notes applications, you can only import from 1 source at a time.  To change the url of the feed, click  ”Stop Importing”
  3. Enter the URL for the RSS feed in the box. Check the box next to the statement that you actually own the content.
  4. Click the “Start Importing” button. Facebook will import the content of the RSS feed for you to preview. If everything looks good, then go ahead and hit the “Continue” button. Now your RSS feed is automatically imported into your “Notes” section.
  5. Administrators note : Facebook RSS in articles application will not put a heavy load on your server , as they are pulled every 2 hours, but be careful of heavy loads if you have a larger reader base as images will be loaded from full article display in facebook

there is one folder for shipment, one for invoice, and one for credit. The product display occurs in the DEfault file where the Mage_Sales_Model_Order_Pdf_Items_Abstract is defined. What I did was simply instanciate a product object using the id from order / items, and get the image file using the following code in the draw function :

There are a lot of discussions going on about Magento’s one page checkout procedure : it is supposed to enhance customer payment experience by probviding ajax based single page order progress. But there are alos some discussions in the forum on how to enhance this process which is quite unusual and might discourage some customers. In a previous post I reviewed the code that produces sidebar shopping cart in default pages with right margin. The solution below explains how to add a full shopping cart display for the customer’s that trying to complete an order.

Full template vs AJAX based loading

The code that builds the one page checkout (checkout/onepage/) sidebar display is made of two separate components :

• the first loading of the page is a full template loading, meaning every component of the page is loaded at once, and returned to the browser via a standard HTTP request, returning HTML. The HTML produced at this stage for the right column is described in the checkout_onepage_index section of the layout/checkout.xml configuration file. I added the shopping cart display by  simply adding a block to the right :

         <reference name="right">
              <action method="unsetChildren"></action>
              <block type="checkout/onepage_progress" name="checkout.progress" before="-" template="checkout/onepage/progress.phtml"/>
              <block type="checkout/cart_sidebar" before="-" name="catalog.cart.sidebar"    template="checkout/cart/sidebarCheckout.phtml"/>
        </reference>

• Following steps are processed via AJAX calls (function reloadProgressBlock in opcheckout.js) that invoke the the checkout_onepage_progress section of the layout/checkout.xml configuration file. Below you’ll find the same code added to this section, that adds a cart block to the raw HTML returned by this AJAX call.

     <checkout_onepage_progress>
          <!-- Mage_Checkout -->
          <remove name="right"/>
          <remove name="left"/>
   <block type="checkout/cart_sidebar" output="toHtml"  name="catalog.cart.sidebar"    template="checkout/cart/sidebarCheckout.phtml"/>
  
          <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress.phtml">
              <block type="checkout/onepage_payment_info" name="payment_info">
                  <action method="setInfoTemplate"><method></method><template></template></action>
              </block>
          </block>
  
      </checkout_onepage_progress>

You will notice that we deliberately position the sidebar cart XML block , in the first case after, and in the second case before other blocks, so that this block always appears first on your one page chcekout right margin. What you finally need now in order for this to work is to code the sidebarCheckout template : take the checkout/cart/sidebar.phtml  template and modify the display to produce best reassuring order total for your customer before he finally decides to pay !

I’ve finally released my first Magento website, and it proves to be a  real SEO winner (100% increase in visits after 2 weeks). RuedeSiam is a furniture importer based in Brittany. Now you know why I bothered comparing commercial and opensource Flash based zoomers : Rue de Siam’s website site features an implementation of image  a flash based zoom within a prototype lightbox gallery  (check out this one) . Interesting too is the specific template for the “At your home” showcase category that uses products with  specific layout. Magento is really great for customising layouts, I suppose that’s partly a big feature of Zend Framework expressed at its best. One technique I used a lot is the css based text over image transparency effect that I detailed a while ago for Wordpress on this blog. Works fine with Magento images categories except that the background image really has to be adjusted perfectly so I used phpthumbs instead of Magento’s resizing helpers that seemed to complicated to understand at first.   I’ve also covered  various development challenges that I shared on this blog during the development :

• products special display on home page,
• display new product icon on product list
• how to display products from other categories on the product view page

And a few tips :

• Display custom attributes on product page
• Magento static blocks display

One advice : once you’re running a Magento production web site, be careful with upgrades. The Sales extension did not work with 1.3.0 on my development server and I’m sticking to 1.2.x for the moment.