design magento

Understanding Magento Default Templates

Magento template system allows you to easily create custom html/css code according to design requirements. However, in some cases it would be a good idea to use some of the default magento templates. It may save some time spent on integrating new html structure with magento functionality.

For example, let's take a look at this location in standard magento structure: app\design\frontend\default\default\template\page. Here we have templates describing a basic structure of a page: 1column.phtml, 2colums-left.phtml, 2colums-right.phtml or 3colums.phtml. They all contain the same structure of the page (let's focus on the inside of 'body' section):

<div class="wrapper">

<!-- start header -->
        <div class="header">
            ...
        </div>
<!-- end header -->

<!-- start middle -->
        <div class="middle-container">
            ...
        </div>
<!-- end middle -->

<!-- start footer -->
        <div class="footer-container">
                <div class="footer">
                    ...
                </div>
        </div>
<!-- end footer -->

</div>

They differ only in part inside <div class=”middle-container”>, where a html code for specified layout is defined. As you can see, they present the most common way of building the pages – header, middle part, footer. So in most cases you can use those templates without any change in html and create only your own skin css, which will adapt the look of your page to your needs.

Of course, the more detailed a template is, the less chance that it can be used without change, but you can still start working on a default magento template and just modify the parts you need.

How to use Magento CMS feature to create multilingual content

Magento natively integrates CMS features.

Two types of objects are available to allow you to create content in Magento:

  • Pages, which allow you to display general information such as your terms of sale, contact information, store locations, et cetera.
  • Static blocks ( "static" is not quite the appropriate term as discussed below, it means that the content of these blocks is editable directly from the back-office, without modifying php source code), which allow you to enter information to be usually displayed on several pages, such as footers, headers, but also specific informations (predictive site shut down, promotions ...).

Note that these objects, static pages or blocks, may contain elements dynamically calculated and it is relatively easy to make create new ones for the webmaster (for instance to display current date and time, number of online customers, last item sold...).

Furthermore, these blocks and pages can also contain other blocks, static (ie, whose content is changed here) or not (block articles, bestsellers block ...).

Finally, these pages and blocks fit perfectly into the Magento architecture: for the same page or static block identifier, you can (but do not have to) create one version per View Store. It becomes very easy to create specific content for each language and the system will display the version corresponding to the language of the customer without you having wrote a single line of code.

Of course the system is not without fault and we can regret:

  • The lack of a rich text editing tool,
  • The inability to manage hierarchical content,
  • The lack of online form management.

We shall see very soon how to find a workaround these deficiencies.

Sharing informations between controllers and blocks in Magento

As we know magento has quite powerful templates system. The same thing we can say about logic part. In general magento consists of about 50 modules. There is module for checkout, for customer, for cms pages etc. Module consists of few parts - beside design parts there are: components, blocks, models and  helpers. Components contains all actions that happen when the module is used.  When we have url http://www.my-eshop.tld/index.php/a/b/c

it means that module a must run action c in controller b.

Blocks are responsible for preparing data for templates. Each template used must have it's block. Sometimes blocks are simple, sometimes they can be more complicated. Anyway in some situations it's useful to move data from controller to block so we won't have to calculate it few times in one request.

For that we can use possibility that magento gives us - registering data.

In controller we store our data in variable called $data, we can save it to register like this:

Mage::register('MyData',$dat);

Then in block file, you can get all this data, back using.

$data = Mage::registry('MyData');

It's a small feature that can be very useful sometimes.

Magento Top 10 Things to Know

Magento Top 10 things to know: Magento software has made quite a buzz since the version 1 release in 2008 and revolutionized the world of e-commerce solutions. The reasons for this enthusiasm about Magento websites are numerous, here are 10 of them.

  1. Opensource Software, Solid Company

    Written in PHP, based on the Zend framework, Magento is an opensource solution.
    This means that source code is public: everyone has access to it, for free. Contributions from anyone are welcome and speed of integration of new features is increased, as it was the case for example for VAT management: the first official release was not adapted to European market but the openness of the code helped solving this problem within a few weeks.
    However, Magento was developed by a for-profit company, Varien, ensuring uniformity and consistency in functionality and continuity in developments, with over sixty persons working on it .

  2. Turnkey Software

    Download Magento, unzip the archive on your Apache / PHP / MySql server, run the automatic installation script, go to the admin panel to customize Magento configuration and you're ready to sell!
    Having that done, updating the system when new releases comes out can be easily done by going back to the administration panel, clicking only twice on your mouse, no more.
    Of course, you would still have to customize the look of your store and integrate your catalog content.

  3. Highly Customizable Data Model, Long Feature List

    Whether you are selling shoes, socks, clothes, curtains, wine, hotel rooms or virtual downloadable products, Magento data model is designed and thought to fit your needs, while offering the standard features that you are entitled to expect from an e-commerce website: product customizable attributes (sizes, colors ...), configurable products, Cross-Sell, Up-Sell, et cetera.
    Moreover, version 1.3 introduced the concept of flat catalog that provides an excellent compromise between performance and customizability.
    Among the many standard features available, you will find tools for managing price and promotions.

  4. Advanced Management for Template Design

    Magento Design system allows you to manage the template of your Magento website.
    Supplied with a basic graphic design, Magento allows you to lay out your shop as you want to, while allowing you to benefit from future releases. (See Creating templates for your Magento website.)

  5. Designed for Search Engine Optimization

    Allowing URL rewriting, meta-data fields, Google Site Map management, etcetera, Magento gives you all the tools you need for Search Engine Optimization.
    (See Magento et le référencement naturel)

  6. Global Software

    Thanks to Magento your store is ready for global sales, with the possibility (but not the obligation) to define for each area or country:

    • its own currency,
    • its own language (many languages are available),
    • its own graphic design,
    • its own sub-catalog,
    • its own shipping rules,
    • et caetera .

  7. Payment Modules

    Magento currently knows how to handle over 200 payment systems , including:

    • ATOS / Sips,
    • CyberMUT Paiement / Paiement CIC,
    • CyberP@iement,
    • FIAT-NET ReceiveAndpay,
    • Google Checkout,
    • Ogone,
    • Check,
    • Paybox,
    • PayPal,
    • SPPLUS,
    • et caetera .

    It is also easy to add new ones.

  8. Shipping modules

    Magento currently knows how to handle over 60 shipping systems , including:

    • Free shipping management,
    • Chronospot,
    • Colissimo,
    • DHL,
    • FedEx,
    • TNT, relais colis,
    • UPS,
    • et caetera .

    It is also easy to customize a module to suit your logistical constraints and your pricing policy, or even create new ones.

  9. Connecting to Your System

    Magento provides standard modules import / export that allows you to import files to Magento.
    These modules can be easily automated and customized to fit in your existing system. (See Importing files into Magento)

  10. Robust Software, Reliable Solution

    With today hundreds of e-Store running on Magento , some of which containing over 300,000 records (three hundred thousand) Magento is now recognized as a reliable and trustworthy software, whatever your needs are.

Creating templates for your Magento website

Creating a template for your Magento website is an important step in setting up your online store. Indeed, the visual apect of an e-store is as important as a shopwindow: it is the first thing the would-be customer will see. This shopwindow will retain a customer or on the contrary, make him leave.

(Of course there are other ways to bring prospects directly inside your store, using search engines for instance, but this will described in another article.)

Knowing this, the whole Magento design system was conceived and designed to help you creating pages on your Magento website, organizing them and decorating them as you wish. (And of course without specific developments which would prevent you from installing future Magento releases.)

In order to build a Magento design package, three types of objects are needed:

  1. templates
  2. skins
  3. layouts

Understanding how these three types of objects work together is essential in order to be able to create your deisgn package.

Templates

Templates are a set of blocks that will display your shop.

For instance, these blocks will:

  • display a product detail,
  • display the customer shopping cart,
  • display featured products,
  • display navigation menus,
  • display content informations such as "Terms of use",
  • et caetera .

Magento provides a default template that contains a variety of standard blocks. It is possible, using inheritance, to override blocks design, to create new ones, and so on...
Moreover, Magento being based on the Zend Framework, which provides components for the MVC design pattern, the business rules are defined elsewhere, allowing complete independence of your graphic with the core system.

Skins

Skins contain all the CSS files of your site and describe how the block should be displayed (colors, images, fonts...). Separated from the templates, it becomes extremely easy to customize the graphic style without changing the blocks.

Changing all or parts of the graphic can be easily achieved, for instance:

  • for specific parts of the website (specific category, refurb ...)
  • for a period of time (Christmas, sales ...),
  • for a particular category of user (committees, VIP ...),
  • et caetera .

Layouts

Layouts will determine which blocks will appear on which page (catalog page, product page, checkout page, customer account page ...) and define their attributes. In other words, they are the definition of the overall structure of your site. Again, a standard layout is proposed and it is easily customizable.