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

For those who are running small servers and wish to accelerate their worpdress installation, we recommend the installation of eaccelerator but also the wp-super-cache plugin. There is just a small hack for wordpress 3.0 menu users : the cache should be totally refreshed when a menu is modified, and this is performed via the wp_update_nav_menu action, instantiated in the wp-cache-phase2.php / wp_cache_phase2 function

add_action("wp_update_nav_menu" , 'wp_cache_clear_cache' );

Read the rest of this entry »

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 »

Besides the famous CFORMS plugins, opther plugins exist that forward user input directly to posts

• TDO Mini Forms : comes with a lot of options that specify who can publish what and how new posts are moderated
• FV Community News

Yes it is possible to host multiple sites for multiple customers with Wordpress. The Multi User feature we expeted in wordpress 3.0 will satisfy bloggers only but we need something more specific. The technique I describe here is similar to the one described here in the sense that it directs the database configuration constants to specific databases instead of table prefixes as seen a lot. The advantage obviously is that you keep a single install of wordpress and only have one codebase to manage , while databases remain independant.

• create wp-domains folder, and inside one folder for each domain, example wp-domains/mysite.com
• add the following code to wp-config.php : this coding allows a defualt domain to remain active even when the configuration file does not exist, at the expense of a loss in performance. But It is useful to show what’s missing.

$domain = strtolower( str_replace( “www.”, “”, $_SERVER["SERVER_NAME"] ) );
$domain = preg_replace(’[^a-z0-9\.-]‘, ”, $domain );
$domainDirectory=”/wp-domains/” .$domain;
$domainConfig= dirname(__FILE__) . $domainDirectory . “/db-config.php”;
if ( file_exists( $domainConfig ) ) {require_once( $domainConfig );} else {
$dbuser=”defaultdomaindatabase”;
$dbpwd=”password”;
if ($domain!=”defaultdomain.com”) echo “missing ” .$domainConfig;}

• replace definitions with variables in wp-config.php

define(’DB_NAME’, $dbuser);
define(’DB_USER’, $dbuser);
define(’DB_PASSWORD’, $dbpwd);

Once this is working with your default  domain, setup virtual hosts  in Apache and try a new domain. Remember on a new install to setup the upload folder in wordpress admin settings.

Multi site config for Wordpress : Compatible plugins

I’m running the following plugins and they work perfectly

• WP Super Cache : works fine because the cache filename coding alogrithm includes the domain name

the implementation of jquery photo gallery is better performed when the thumbnail is dynamiccaly generated via some  magic library such as the old phpthumb. But this method doubles the amount of  images to load, especially the big ones that we want to pop in on thumbnail click. And that’s where comes Ariel Flesler’s jquery preload plugin, that allows some various configuration using jquery selector to specify which images should be preloaded. Another jquery plugin takes all images from css files and preload them, can be useful on all websites that rely on background images in styles.

Love flash but hate compiling ? here comes frontal, an intuitive markup and scripting language that generates Flash and enables you to create interactive content, sites or apps  with a few lines of code. Still slow on some browsers (crahed flash plugin on chrome), the library has a lot of available widgets for photogalleries, slideshows…

Link  : http://www.frontalcode.com

Love going mobile but always worried about your servers? here comes iphone based linux monitoring, including SSH access ! The Server Remote Iphone (4$) application allows you to monitor multiple servers the easy way.

The expertise around Flash / Flex based CMS is building up a new area for content management. We haven’t had the pleasure to try out the software but the building of wysiwyg interfaces is a promising business, as long as the HTML and Search engine optimization features of pure text are guaranteed : this is where we’d like to know more about FlashMoto’s HTML publishing features, which uses the HTML version technique; meaning the flash based web site is also available as HTML for search engines and non flash browser. This technique is also used by Silex RIA, another Flash based CMS.

What distinguishes FlashMoto from a range of other flash content management systems is that it is the first Flash CMS based on ActionScript 3 and realized as RIA on Flex.   The websites powered by FlashMoto are controlled just like a standard CMS but with the extras that Flash offers.  FlashMoto provides a set of SEO tools what makes the Flash CMS website completely crawlable and seen by search engines.

Flash CMS from FlashMoto is characterized by a range of other features:
- ability to add unlimited number of pages;
- convenient WYSIWYG page and pop-up editor;
- rich media library;
- infomodule component;
- video and image gallery component;
- video and MP3 players component;
- deep linking and Google Analytics integration;
- comprehensive documentation and tutorials.

Fuzzle CMS is a promising Flash CMS delevoped by a group of Russian programmers. The system is claimed to be an extra easy way for creating Flash website thanks to visual content management. Note, Fuzzle’s website is also made with this CMS. Fuzzle brings you advantages of Flash and HTML in one system and affords you create and maintain your website’s content without knowing anything about programming. Flash web sites are differ from regular HTML sites mainly by their presentational abilities: Flash technology allows incorporating complex animations and reach multimedia content. However, Flash sites are considered to have such disadvantages as longer time of development (therefore more cost), harder updating, bad search engines ranking. Fuzzle is breaking these stereotypes!
Main Fuzzle features are: :
- multilinguality;
- simple management (convenient visual editing based on blocks placement and multiple selection of blocks );
- design integration from a draft within 5 minutes;;
- SEO support (HTML version auto generation, DeepLinking support);
- continuously replenished Widget Store availability;
- availability of an open simple API for external developers.