This tutorial explains briefly how to display one product on sale on the right column of thehome page, but that could be any page in fact.The code below is inspired from the front page featured product tutorial. Read the rest of this entry »

If you’re working on Magento Ecommerce layouts and template design, you might have had a look at some nasty bugs, such the sort by price bug that’s occuring on Magento’s latest release (1.2..1). If you’ve spent a few minutes reading the fix for that bug on Magento’s forums, you know what product collection means. Product Collection in Magento means an easy way of listing products for specific blocks : the big drawback is that product collections store arrays of products, and products inside don’t always come fully loaded of details. That’s why the few hacks below are useful to get the very basic attribute of every product on a decent ecommerce store : is that product new or not, and should I tell my customer which products are new ???

How to load new attribute : in Magento the new attribute is defined by two database fields (or attributes) : new from and new to .

• Using these parameters in list.phtml requires you to modify the attribute set returned by the Mage_Catalog_Block_Product_List class to be found in app\code\core\Mage\Catalog\Block\Product\List.php
• in function _getProductCollection, paste the following line
  $this->_productCollection
  ->addAttributeToSelect(’news_from_date’)
  ->addAttributeToSelect(’news_to_date’);
• obvisouly this comes just after the product collection definition around line 75 of the List.php
  $this->_productCollection = $layer->getProductCollection();
• your list.phtml template now has access to the data and checking that a product is new is as simple as performing PHP based date comparisons. We provide here basic comparison that will only work for products where both news_from and news_to have been filled. Add the following PHP code somewhere in your productcollection loop and the work is done !
  $now = date(”Y-m-d”);
  $newsFrom= substr($_product->getData(’news_from_date’),0,10);
  $newsTo=  substr($_product->getData(’news_to_date’),0,10);
  if ($now>=$newsFrom && $now<=$newsTo)
  {?> <h3 class=”nouveauteProductList” >NEW PRODUCT!<h3><?};
  ?>

This hack will be used on RueDeSiam’s website (to be released next month,bookmark it now!)

The flexibility created by the attribute feature in Magento allows limitless possibilities : vairous product types can be created and each of them can go with specific attributes, meaning specific form fields for the admin, that are inserted in the product view (template/product/view.phtml) for public display. The functions availble for each user defined attributes are very simple to guess : they are dynamically created for each attribute create using , as explained in the Pratthost developer zone blog…
Read the rest of this entry »

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

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

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  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.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>
   	  </modules>
   </config>

6. 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.