Inside Magento : sidebar shopping cart explained

Described by multiple elements, the shopping cart display that appears on the right column in Magento's default layout is a complex issue. BAsically it is a good example of how blocks, layouts and templates work together to render the appropriate context sensitive information on the screen. The sidebar shopping cart display uses shopping cart information from PHP, and displays user cart content after a few conditionnal checks that occur in the template :

  • PHP class is defined  in magento/app/code/core/Mage/Checkout/Block/Cart/Sidebar.php
    Mage_Checkout_Block_Cart_Sidebar extends Mage_Checkout_Block_Cart_Abstract
  • HTML template is in app/design/frontend/default/default/template/checkout/cart/sidebar.phtml
  • position within the right sidebar is defined in the checkout.xml
    default\layout\checkout.xml

Read more

Nice unproductive experience : test multiple gallery scripts at once

silverstripegallerylightboxWe are quite proud here that our months old specific jquery gallery script for silverstripe -the best PHP opensource CMS  as of today, just out with a new release- is still, in my opinion, the best we could deliver to customers. In the meanwhile a troup of well intentioned contributors posted their own implementation of gallery for silverstripe cms : one of them is Aaron Carlino who has worked on upload scripts  that are very interesting for the customer experience. On Carl's gallery script, the image upload, ordering and labeling are all administered from the web site front end, which is nice. But also the gallery script he provides comes with 7 variations of the famous lightbox : in the admin you can  just choose between lightbox, shadowbox, thickbox, nyromodal, prettyphoto and fancybox, and once saved and/or published online; the front end will load the chosen lightbox variation. Interesting to try, not very useful for a customer who doesn't care which script is being used once it's properly configured.

Zoom and pan with Flash

flasshopanusing images to display products on e commerce applications can successfully be combined with jabvascript lightbox, itself including a flash zoom and pan application : flashden provides a few examples of commercial applications for a very reasonable price (10$ for this one), among which the XML configuration is an interesting way of configuring various parameters such as position of controls, initial zoom percentage and alignment, Easing value. Equally interesting is the free fla source code provided by  Kirill Edelman on his blog, that will give you a few keys if you want to investigate how everything works from the inside.

Magento CMS : 2 methods for static blocks

Magento's backoffice comes with a fairly simple CMS that can do a lot : single pages can be modified (content and layout) via the CMS / Manage Pages menu, and page parts can be shared and modified via the CMS / Static Block menu. Web developers who get a first sight inside templates might find it difficult to integrate a newly created block : we describe here two methods to integrate a block in your magento website.

How to create a CMS block : Go to Magento admin uder CMS -> Static Blocks and Add New Block. Insert Block Title, Identifier (for example: mycompany-newsblock), set Status to Enabled, insert block Content and Save Block.

How to add the CMS block to pages (exemple on the right column). You can choose one of these 2 methods

  1. LAYOUT block  modification: in layout/page.xml , find the default / right column block
    <block type="core/text_list" name="right" as="right" />

    and transform it by incorporating the newly created CMS block  :
    <block type="core/text_list" name="right" as="right">
    <block type="cms/block" name="ruedesiam.marge" as="ruedesiam.marge" after="-">
    <action method="setBlockId"><block_id>mycompany-newsblock</block_id></action>
    </block>
    </block>
  2. Template block addition : add the following code to
    app/design/frontend/YOURTEMPLATE/default/template/callouts/right_col.phtml

    <?= $this->getLayout()->createBlock('cms/block')->setBlockId('mycompany-newsblock')->toHtml() ?>

The solutionbelow explains how to add a template block : everything here is done via HTML files. (example for theleft column)

1. in layout/page.xml or in your page custom design, add the following code

<reference name="left">
<block type="core/template" name="productbrand" alias="productbrand" as="productbrand" template="catalog/product/brand.phtml"  />
</reference>

2. in template/callouts/ left_col.phtml, add the following :

<? $this->getChildHtml('productbrand') ?>

Note : you can avoid xml configuration by creating the core template directly within the phtml :

<?php  echo $this->getLayout()->createBlock('core/template')->setTemplate('callouts/rassure.phtml')->toHtml() ?>

Magento product page : how to display other products from same category

Magento comes with a lot of product relationship features :  implemented as selective lists maintained for each product by the shop owner, related / cross selling and up selling backend features allow some sort of manual product linking that displays product associations on the front end. For example related products are displayed by default in the product page right column, while upsell / crosssell products are displayed on the shopping cart page. These 3 types of product associations are well explained on inchoo's blog, and  on magento 's knowledge base you'll find user instructions on how to setup   product relationship in the backend.

What we aim here is to setup an automatic  display of related products on a product view page, via the categories they belong to. We build two loops : one that gets categories the product belongs to, and another one inside that gets products of each category.

How to setup category related products in Product view :

  1. add the following code somewhere in default\template\catalog\product\view.phtml
  2. Configure the category query according to your catalog by uncommenting the following :
    • ->setPage(1, 1) : selects only one category
    • ->addFieldToFilter('level',"3") : selects only 3rd level categories
    • ->addFieldToFilter('parent_id',"3") : select only child categories of no 3
    • ->setOrder("level") : combined by setPage, returns the lowest level category
  3. please that the product loop uses the $_product variable, which can be dangerous because this name is widely used. We use it here for comodity reasons because I just took toe display code from Magento's product list view

Magento Extension : Category product tab edit link

screenshoteditcategtoryprod

PoleOuest_CategoryProductEditLink Magento extension is a lightweight magento backend extension that allows store managers to edit products straight from the category admin page.

2012 update : This extension is compatible with all versions of MAGENTO community up to 1.6 

Browsing products by category in the admin : there are many examples of opensource ecommerce systems that can do that. Among them, Prestashop backoffice is built around this navigation paradigm, and even Oscommerce  displays products by category in its 5 years old backoffice. Of course none of those two have the flexibility that Magento allows in terms of category / product association in a multistore environment.

But in Magento you can't search product by category in the admin : can you imagine that this feature is missing in Magento !  As of version 1.4 (and now tested on 1.5 and 1.6!!!) this is still the reality, easily enhanced by the PoleOuest_CategoryProductEditLink Magento (see the page on Magento website).

 

INSTALLATION

  1. Buy (29$ via Paypal) the extension on our shop
    Note : purchasing the extension gives you unlimited website license and full access to PHP Code
  2. Download (TGZ)
  3. HOW TO INSTALL :
  4. unzip the file in your app/code/local, in order to get the structure below,
  5. create the xml module file PoleOuest_All.xmlin app/etc/modules with the following code :
  6. REMEMBER to flush magento's cache and log out / log in the admin
  7. go ahead, try it and let me know how to package this thing into a usable magento connect extension !

magentocategoryproductedit

Data protection : try server rewind

We are all looking for the best solution to ensure data integrity when hosting customers website : as advertised on A2 hosting website, data loss happens to the best of us. That's why A2 has come up with a backup solution called Server Rewind that automatically creates "snapshot" backups of a client's server and site every few hours. Server Rewind is integrated into popular control panel cPanel and comes free with all shared, reseller and semi-dedicated hosting accounts. It is also available for managed and dedicated hosting customers.

According to A2 Hosting, the new solution is very flexible, easily giving customers the choice to restore just a single file, a MySQL database, an entire site or even a whole server through a bare-metal recovery.

Ann Arbor, Michigan-based A2 Hosting is the latest company to increase its server backup options. According to web host industry review, another web hosting provider, Cirrus Tech (cirrustech.com) began offering dedicated server customers new remote backup plans including R1Soft's (r1soft.com) Continuous Data Protection software.

Magento simple ssh install

The magento wiki has a good article that details how to install Magento with the help of PEAR downloader. We don't need that, just want to install magento via ssh in a few commands, here is the detail. Before you install, make sure you check requirements, especially innoDB option for mysql.

 

  • go to your root folder and download magento :
     wget http://www.magentocommerce.com/downloads/assets/1.2.1/magento-1.2.1.tar.gz 
  • unzip tar and delete it :
     tar xvzf magento-1.2.1.tar.gz 
    rm magento-1.2.1.tar.gz
     
  • copy files back to your root folder, including htaccess, then remove the magento dir
     mv magento/* .  

    mv magento/.ht* .
    rmdir magento/

     

  • chmod / chuser files in order to let apache do its job
    chown magento:users * -R
     for i in $( find . -type d ); do chmod 755 $i; done  

     for i in $( find . -type f ); do chmod 644 $i; done

Not that you mightr have to specify your own permissions in the last command. If you've got there, That's it, you're ready to run the installer, GOOD LUCK. Core upgrades can be done via the Magento Downloader.

opensource commerce : bakesale is back in the game

Great news this morning in the email : bakesale, a CAKE PHP based opensource ecommerce application, is back online with a new version scheduled mid february. Of course we don't expect a small team to compete with Magento but CAKE PHP users or learners will be delighted to find this application delievered  in a production state. New features include Some of the major features include  User Groups/Categories,  Easier Static Pages, Plugin Installer,  Theme Installer,  Discount codes. Something standard for ecommerce but worth mentionning because bakesale was among AJAX precursors in the opensource ecommerce business. Glad to be back online ?

Automatic Toc building

ausoleilbreton

Remember Wikipedia's table of content, that creates anchors and links automatically from page titles : we've enjoyed the feature on MODX CMS, an old but still efficient opensource content management system for PHP / Mysql. Two plugins are available for this software, free of course :  The Automatic Page TOC Generator plugin and the  Automatic TOC and Navbar work the same way, via a simple process that parses H1 .. H6 tags, takes HTML within, builds the table of content, and  inserts the generated table of contents anywhere in your template. Many options are available that can specify explicitly the area to be indexed or put a navbar before the heading to get bazck up to the top of the page. The result can be as shown above on the ausoleilbreton.com web site (work in progress).