Posts

Magento vs woocommerce vs prestashop comparison

There was a time when I was working on multiple solutions, thinking positively that a lot of time spent on each of them would give me a great insight of  all possibilities that a mix of solutions could offer. And year after year, solutions evolve and some get better and easier to maintain and develop, and some not. I have been using prestashop, magento and wordpress / woocommerce for years and here is a quick review of all these solutions, from the point of view of the developer but also of the website owner, and of course of the end user. Curiously you will find that all these point of view lead to the same conclusion : wordpress woocommerce for all !

Magento / WOOcommerce / Prestashop comparison

The developer point of view

Prestashop is very simple to setup and offers a very quick configuration process, especially when you are working in France, because it is a french product. I quickly found out that developing themes, extensions and modules for prestashop is a bit strange and dodgy, and forces you to learn and maintain some strange knowledge of an extra language from the old twentieth century : smarty templating language. Just as if learning CSS, HTML, Javascript, PHP and Mysql was not enough. In my opinion, the simple fact that prestashop is using smarty shows that its developers have forgotten the original purpose of PHP. And to finish on prestashop, I have a few very good shops running on it for years, without any problem and doing good sales, but I have one problem :  I am too afraid to perform a software upgrade. don't ask me why but that's a looser solution for me.

Magento is incredibly smart. When I mean smart I mean you'll need a few months before you can even understand how to access data from the database. you need serious ZEND specific OOP knowledge and a lot of time and expertise to code Magento. And that's expensive. Yes a developer with magento expertise can earn a lot, but who pays. check that below in the website owner section.

in comparison with the truck and the pickup above,  Wordpress at first glance looks like a horse carriage. In its default distribution package, wordpress is just a blogging platform. Well that's what is was a few years ago when I started using it just for blogging. And I was developing my own e commerce package and trying various CMS platforms like Modx or silverstripe. And suddenly  Wordpress evolved to a full featured CMS platform that I integrated with MAgento and prestashop websites for serious content management those two cannot afford. And suddenly e commerce plugins came to the market. I've tried a few and my preferred is woocommerce. As a developper I just love using the same platform for content management, shopping cart, order management, online payment. And I've never felt limited by the almost perfect customisation development that wordpress integrates : themes and plugins   just illustrate the perfect division of tasks for a web site developer. If you want to do OOP like Magento, you can. But you don't have too. If you want to use Smarty like prestashop you can, but there's really no point. And if you want to develop once and reuse code in various website projects, well you can mix all aspects of a website with wordpress. That's just magic I think, at the cost of a rigourous selection of plugins that will take you more than an hour to select and install.

The shop owner point of view

It all depends which kind of shop owner you are. If you can afford one or two full time senior developers, then Magento is all right for you. If not, you will find that unless you have a good friend developer,  magento is expensive. Too expensive for my customers. But Yes it comes with a lot of features, but not more than prestashop and woocommerce. At some early stage, Magento was a leader in bulk product editing, very useful when playing with categories and products. But it's now 4 years that WordPress does that job quite well (see our article on information management with wordpress)

Prestashop is not expensive : in fact it runs very well on shared hosting. It also comes all featured, and is much easier to configure and setup than magento, but it has less customisation, especially graphic, possibilities.

WordPress is in my opinion the best compromise between cost, usability and security. as a website owner, you will, just like your developer, love the unique administration platform with drag and drop image uploading, drag and drop content management (via plugins), easy maintenance and upgrades meaning reduced administration costs. Of course this comes at a price : default worpdress installation is not e commerce ready, you need a good professional partner to set you up. After this initial step is done (finding the right web site expert), you have the guarantee of a stable platform for all your web development need : content management , advertising, product management, customer management, newsletter, etc...

The end user point of view

Yes you are building e commerce presence : the end user is the first and last contributor to your project, because it brings the finance that will ensure durability of your online project. Well I might repeat myself now but after a few years of ecommerce development I always felt very frustrated but the lack of Content Management offered by native ecommerce platforms like magento and prestashop. Now that wordpress has its own ecommerce capabilities, it is a very sensible choice to move all your ecommerce data to a single platform. And as a e commerce buyer, I like a website with a lot of information not only on products but also on the company that distributes them. WordPress offers so many layout capabilities that your online customer with feel in good company before he goes to purchase your   product.

Conclusion : woocommerce only ?

did I miss something ? are there really some unique features on magento and prestashop that woocommerce cannot perform ?

 

Magento : set list sort order for categories and search

Big online shops have a lot of users, and as such they can afford to try features that most novice users won't even understand : that is the case for the sort order for lists, that in Magento displays name, price and relevance. It is very nice to have that feature but in my customer's case the default list was ordered by "best choice", which doesn't mean a lot to users. Of course, the magento configuration allows to set the list default order, but that only works for categories, not for search. And that is a big problem because search results should be ordered by relevance : that is the principle of the search.

I decided to work on search and installed the better store search plugin, which after a few hours of hard work on my magento install gave me full satisfaction. But to my surprise, it is not the plugin itself which gave me hard work, but magento 's undocumented feature of list sorting. Here is what I did to get my search results ordered by relevance descending always 

 

  • Magento configuration : I display onlists
  • view/lists.phtml  . removed the toolbar display
  • extension  : wrote my own Mage_Catalog_Product_List extension that overrides the session / default valur for the sort order :

    What's happening here ? as you can see I rely (very bad practise) on the good old php_self  variable to detect if we are in the processs of returning search results. If so, then we set the order to relevance desc, otherwise we go name ascending, you could go price ascending too if you wanted !!

  • Oh, last but not least, the config.xml  that overrides  Mage_Catalog_Product_List :

Magento configurable products : display images of sub product

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
  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  :
  3. use the select color  function from our previous article to display the associated image set when an option is selected via image click :
  4. add the following code to js/varien/product.js to let the effect work when an option is selected in the dropdown menu :
  5. Have a look at the result on ruedesiam's lovely designed multi color loom furniture : try  the chaise giulietta

Magento : find out which xml fails

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 :

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

Magento Configurable products : change product image on thumbnail option

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 more

Magento : how to learn from free templates

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 log cleaner

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 !

Magento email configuration pain and how to solve it

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

Magento / facebook : display new products on your wall

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 : display product image on invoice + shipping PDF

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 :

Magento one page checkout : display shopping cart details in sidebar

magentoonepagecheckoutorder

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 more

Magento / wordpress showcase : Rue de Siam

screenshot1

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 :

And a few tips :

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.

Magento product : display new product icon on product list

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

magento-new-product490

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

Magento custom attributes display on product page

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 more

Magento Specials prices

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.

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

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