Hey all… Here’s a brief update as to progress with Templating Magento. It’s definitely coming along smoothly. I’ll gather all my notes soon and post them to a Wiki or as supplementary documentation for any other material that gets published. I’m at work now… so this will be brief. I’ll elaborate more tonight.
LAYOUT / PAGE STRUCTURE
Your CORE Layout is defined by Default.XML. Located /app/design/frontend/default/layout/core/
This does 2 things:
1.) It definies the DEFAULT Layout for your store. By Default Magento uses a 3column layout, so it defines use of 3columns.phtml (Located in your template/page/ folder):
If you wanted to change your store to say, a 2column layout, you would change the line above to reflect the .phtml you’d like to use.
For example, If I wanted to change the store to a 2 column layout , I’d change the line read:
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
2.) Default.xml creates “block containers” filled with application data for output to your .phtmls. First, \ake a look at your standard 3column.phtml file you’ll see it calls a variety of “ChildHtml”:
(excerpt from 3columns.phtml - Starting at line 56):
<?=$this->getChildHtml('breadcrumbs')?> <!-- [start] left --> <div class="col-left side-col">
<?=$this->getChildHtml('store')?> <?=$this->getChildHtml('left')?> </div> <!-- [end] left -->
Each of these references point towards the “block containers” defined in your Default.xml and subsequent Module .xml files. You’ll notice a container for the “left” column, for the “right”, for “content”, and other standard areas. It serves up output for your .phtmls to use. Take a look at it:
So basically your Default.xml creates Data Blocks, your .Phtml Outputs that data where you want it. Hence, the names for left, right and so forth in your .phtml.
Even further, Your MODULES will UPDATE the available “block containers” with more specific content. For example, you’ll notice once you navigate pass the frontpage and click a Category.. The “Compare Box” appears, Once you click down further.. “The Layered Navigation” appears.
These blocks are made available via their specific initLayout.xml files. These initLayout.xml’s UPDATE your default layout with MORE specific blocks. So for the compare box to appear .. it is set to show once you click into the actual Catalog. So it’s located at layout/catalog/initLayout.xml
If you read the code.. and think about whats going on. It makes sense. <layoutUpdate> is UPDATING your code with new blocks. How does it know where to put the new blocks? Well remember in your default.xml you defined “block containers” for left, right, etc. So when it says <reference name = “right"> it’s telling Magento to insert the following block into the RIGHT column when you get into “Catalog” view. (Remember, its located at layout/catalog/) so it appears once you’ve entered the catalog. It also defines a TEMPLATE for the new block to use, so for the example above the compare box has its own template located at catalog/product/compare/sidebar.phtml (in your template folder).
I’ll elaborate a bit more later. But this should help a bit for some folks just getting started. It basically just like this:
core/Default.xml ---> Defines “Block containers” (left, right, content, footer) full of Application Data for your .phtmls to use
specific Module .xml’s ----> Update your Default layout with NEW blocks to use specific for them, OR change the layout entirely to fit their needs
Template .phtmls ---> Create the design layout for the application and define the exact areas where you want the above “block containers” full of data to be placed. Basically.. where you want the HTML output to be. (left column, right column, content, header, footer, etc)
Hope this helps! I’ll try and post more notes later.
Nick, please tell me if i can use your notes in current documentation that i’m writing now. Maybe we can meet on IRC and share our knowledge :D . What do you think ?
My documentation is very detailed because i wanted to show every possible method, action, reference etc. that we can use in our layout xml. Therefore the chapter 2 of Designing for Magento isn’t finished yet.
You’re doing great work so i think that working together will speed up the whole process of creating documentation.
PS. maybe IRC isn’t the best idea because of my working hours so if you prefer, please send an email () with your concerns, questions, resolutions etc.
AP,
Yeah DEFINITELY, I’d love to contribute. Use all the notes you want! I’ll send you an email and you can let me know where your at, and what you need help with. I’m definitely interested in helping though. Send me a PM, and maybe we can setup a time to chat (irc, gTalk, however).
through working on this ive been trying, starting to realize i need to brush up a bit on my css, Im getting all the pieces now, just having a struggle placing them together to form one idea of structure, slowly but surely
It’s gods gift to css if you ask me… as much as I love developing , I hate having to start from complete scratch on every new site. I started using Blueprint to build that general “structure"… then everything else flows from there. And it’s real great for e-commerce sites since it’s easy make any # of columns you need.
I’ve been plugging Magento into it and it’s looking good.
Mckooter,
The implementation isn’t too hard once you get the hang of it. Make a test page outside of Magento first to get yourself familiar.. then use it within Magento. Just look at the sample pages that come with the Blueprint package.
Actually, Now that I think about it. You only have to implement within your layout pages (3columns.phtml, 2columns.phtml etc) . Since those are the general layout files, I just used Blueprint to make my column framework and then plugged in Magento’s PHP statements.
I’ll post a demo soon of a customized Magento front-end, I think that’ll help too.
Mckooter,
The implementation isn’t too hard once you get the hang of it. Make a test page outside of Magento first to get yourself familiar.. then use it within Magento. Just look at the sample pages that come with the Blueprint package.
Actually, Now that I think about it. You only have to implement within your layout pages (3columns.phtml, 2columns.phtml etc) . Since those are the general layout files, I just used Blueprint to make my column framework and then plugged in Magento’s PHP statements.
I’ll post a demo soon of a customized Magento front-end, I think that’ll help too.
thanks NickL, ive been playing a bit, definately much easier than my mediocre css alone, hopefully ill get the hang of it soon, i would like to create a new skin just to show something different
Sales: Call 877.832.5289 (N America)|310.295.4144 (International)
