There is a feature that prsetashop comes with in its default installation, that is cruelly missing in Magento : the ability to display specials on the website, either on the margin of the home page and category pages, or inside a specifi page. But as always, there are already many discussions going on about this subject, and a community extension has been released, does the job fine but the whole subject  needs more investigation.

• The Catalog Sale Item community extension comes with its own xml layout page,  phtml design template, and Mage_Catalog_Block_Layer_View / Mage_Core_Block_Template class extensions. It creates a new page that displays all products currently on sale.
• Activecodeline publishes some code that extends the product list view to enable sorting products by specials price.
• Inchoo publishes an alternative category list view that displays only products in promotion or with special price, to be selecetd from the category / custom design menu.
• Magento’s forum has a dedicated “special price products” discussion that exlains how to use the product collection with specific query attributes to select only proucts with special price.

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

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’) ?>

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

 

We are proud at poleouest to annouce our very first community magento extension.

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.2.1 this is still the reality, easily enhanced by a few lines of code that you will find below in a extension that I am desperately trying to package for magento connect. So for those in a hurry here goes the extension GZ file that contains the config.xml in which I define the  Mage_Adminhtml_Block_Catalog_Category_Tab_Product  class extension that provides a _prepareColumns function that creates the edit link in the product tab of category edit page.

[UPDATE] extension seems to work now, have fun with magentoconnect (GET EXTENSION KEY)

MANUAL INSTALLATION

1. Download (TGZ) : categoryproducteditlink-13
2. HOW TO INSTALL  : 
3. unzip the file in your app/local, in order to get the structure below, 
4. add PoleOuest_All.xml in app/etc/modules with the following code : 

   <?xml version="1.0"?>

   <config>

       <modules>

           <PoleOuest_Adminhtml>

               <active>true</active>

               <codePool>local</codePool>

           </PoleOuest_Adminhtml>

   <PoleOuest_Catalog>

               <active>true</active>

               <codePool>local</codePool>

           </PoleOuest_Catalog>

    

       </modules>

   </config> 

   

    

5. go ahead, try it and let me know how to package this thing into a usable magento connect extension !

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.

We will today work on a nice and easy fetaure of temlpate design : adding javascript and static images, with the objective of implementing a simple prototype based image rollover. We chose the simple unobstrusive rollover script by Herryanto Satiano.

• download the zip and place the rollover.js file in your js/prototype folder (or in you js skin folder)
  
• edit app/design/../layout/page.xml and add the following line in the header block :
  <action method=”addJs”><script>prototype/rollover.js</script></action>
  Note that you can also add your javascript in your own magento skin via the following block action :
  <action method=”addItem”><type>skin_js</type><name>js/prototype/rollover.js</name></action>
• add the rollover instanciation in you rpage/head.phtml file :

    <script type="text/javascript">
      window.onload = function() {
        new Rollover('nav');
      }</script>

• test on tow imagse with _over suffix.

In a previous article, We’ve briefly explained the four concepts behind Magento’s rendering system. The last 3  entities are  perfectly understandable for web developers :

• template (in app/design/frontend) stores HTML code for a series of twenty page types and page components, such as  catalog, navigation, shopping cart, checkout, cms.
• Skin (in skin/frontend) stores the css stylesheets,
• Locale stores language specific strings, in CSV format

Instanciating your own template out of Magento’s default install is a child game. Our introduction article covered the automatic installation of packaged themes from Magento Connect : to perform the same task manually, you’ll just have to perform a simple cut & paste operation of two basic folders :

• template : copy / duplicate app/design/default/frontend  to app/design/frontend/YOURTHEME
• skin : copy /duplicate skins/frontend/default to skins/frontend/YOURTHEME
  Notice at this stage that two skins are copied : you’ll have to specify the skin you want in the backend System / configuration /design form, as shown below

The first entity, though, is a bit harder to understand. It is called Layou and  is coded out of raw XML format, and explained on Magento’s Designer Guide.

Well you’ve finally decided you’re going to switch to Magento for building ecommerce website. While new versions of Magento coming up regularly make the learning curve easier to climb, be prepared for at least a few days before you can use magento’s features to its best. This article explains the few tricks and tips that will start you off with variations on the basic design of magento’s default installation.

Read the rest of this entry »

Promotions are always a result of  complex  marketing strategies : making them real on ecommerce involves either analytic programmation, or default product features : most ecommerce application come with product promotions schema, based on percentage or price reduction. In Magento, complex rules can be implemented from within the interface, that cover a wide variety of busines cases : based on shopping cart total, shipping method, product / attribute combination, or product characteristics, Magento offers various promotion modes, such as percentage of the original price, fixed reduction, fixed destination price… Well done Magento for this new implentation of a generic feature that will answer a lot of business needs.