In a previous article, I explored a technique that displays the first image of a sub product when selected in Magento’s configurable product page. This time we go one step further by changing the set of thubmnails to display all images associated with the selected sub / simple product. this tutorial requires completion of the the previous one  including the magento wiki ‘Change Product Image on View Page to Associated Product’s Image’ before you go ahead :

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

If you’ve been working with Magento extensions or layout, you might have encountered the frustration of trying to find out which XML generates the following error, potentially harming the whole magento installation :

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 !!

This article describes a  color chooser for magento product page, a technique that automatically use product attributes from a Magento admin to display color thumbnails that

• 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. Read the rest of this entry »

The power of Magento is great but it requires long days of learning and suffering to get through relative simple features, such as the now common front page slide banner. I had a quick look at magento free templates on google and was conquered by Magento ’s classic theme, the kind of  stuff that’s really given free of charge when I would have paid for it. It actually comes with an interesting development of Magento’s block systems, and demonstrates how to add a custom block between navigation and content : the prototype glider that scrolls images is defined a cms static block, which is then called in the home page CMS  custom xml definition, with a reference to the slider block that’s positionned in phtml files and declared in the xml layouts as a core/text_list type . Impressive stuff : that’s pure  magento design and illustrates how versatile the system is.

Links : 25 free templates for Magento

Magento, in earlier versions, does not seem to handle log cleaning very well. A lot of configuration options are vailable under the configuration  / Advanced / System menu, that seem to have an impact on the cron.php process. But trying to remove logs this way is a complicated task that involves full log counting (select count on mage_log_visitor) and the result is not always there, don’t know why. A full truncate on log tables seems more appropriate, as described on the knowledge base, to use with caution obviously : Magento Maintenance Script was posted a few days ago but I tried it and it’s pretty efficient. Let us know how it performed on your install, on mine it works well. Go ahead after you’ve performed the appropriate backups !

It’s nice to setup a magento shop, but one particular task is painful and time consuming : the modification  of automatic email templates . By defautl, email tempaltes in Magento are well designed as a sample given out to the developer, but when you expect to have your shop running in a few hours  time, it is really a pain to go through all emails jsut to change phone numbers, shop name, and opening times especially when this information could be centralized in the database.  The subject is not new and here a few hacks to let you work faster when setting up a shop

• 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

Using the RSS feature of Mangeto to update your wall automatically is an easy task that you can finish in ea few inutes tuime, when you know where to go.

• 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

Magento’s wiki has a few articles on the subject of Magento’s PDF generation, which is not very efficient in its default version : one of the main critics I’ve seen is the size of the generated PDF, which can fly to more than 1MB, where a simple font replacement can bring the weight to less than a few KBs ! The subject of the article below is to illustrate how to display images on each line of the generated invoice and shipping PDF.
The product line display occurs in specific PHP classes within  the app/code/core/Mage/sales/Model/order/pdf folder

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.

Read the rest of this entry »

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.