Posted by: james | September 30, 2009

Design in Magento

getChildHtml, change in design of layout and block in magento, change design of

<?=$this→getChildHtml(’topLeftLinks’)?> – The getChildHtml() function is the most important function used in our

template. It calls particular block defined in XML file and renders it as HTML , then outputs it to the browser. We

can call blocks from everywhere and from corresponding XML files.

To use getChildHtml(’topLeftLinks’) we must have defined first the child “as” so take a closer look at page.xml

(layout/ folder). Here’s what you should see:

<block type=”page/html_toplinks” name=”top.left.links” as=”topLeftLinks”/>

As we see, getChildHtml(’topLeftLinks’) uses its alias “as” and calls it from the XML. The getChildHtml() function

only allows Magento to call a block if that block was defined in the corresponding XML file.

We can also override this mechanism by using another function call:

<?=$this→getLayout()→getBlock(’top.left.links’)→toHtml()?>

This structure will call the top.search block (based on its name, not its alias “as”) from anywhere in any of our

templates so we do not need to define it everywhere in our XML files. Remember to use the “name” attribute instead of

the “as” attribute with this workaround.

We must be aware that every phtml file and every function will always refer to the corresponding XML file or files.

We can identify used phtml files simply by searching for the following:

<action method=”setTemplate”><template>wishlist/sidebar.phtml</template></action>

Design in Magento, Layout and Blocks in Magento.

first of all there are 3 blocks..
first is structure template, second is content template and last is layout.

The php method getChildHtml(’right’) does not refer in any way to right.phtml. “right” is simply an identifier in

order for templates and the layout file to interact with each other in order to structure and bring content to the

page. Remember, changing the layouts of a page in Magento means no longer relying on manual XHTML inclusion in one

large structural block template such as col_right.phtml. Think of it this way:

There are now three parts to modifying page layout. One is the structural templates, two, content templates, and

three is what Magento calls “layouts”.
Structure templates are templates that simply creates the structural layout of a page – such template exists only to

designate real estate for content inclusion. A sample structural template would look something like the following:
<div><?=$this->getChildHtml(‘header’)?></div>
<div><?=$this->getChildHtml(‘left’)?></div>
<div><?=$this->getChildHtml(‘content’)?></div>
<div><?=$this->getChildHtml(‘right’)?></div>
<div><?=$this->getChildHtml(‘footer’)?></div>

You can see how the XHTML used in a skeleton template is only there to build structural.

A layout arranges the content blocks such as product tags, category listing, mini cart, mini wishlist..etc, then

delivers it to the structural block to be parsed in the assigned order.
All this in human language is basically “Grab all the mini cart, grab the compare products, grab the poll and the

grab the newsletter sign up box, and put all this inside the <div>.” The one that orders this whole

operation, is the layout. Each of the mini-cart, compare products..etc are the content blocks. The <div

class=”col-right”></div> is the structural block.

The layout only knows where to include all the content blocks via the getChildHtml() method used in the structural

template. Using the assigned identifier called “right” as in getChildHtml(’right’), the layout knows where to put all

the content blocks it gathered – inside the <div></div>

For each design theme, you have a default layout, and the subsequent layout updates. The default, is what sets the

default layout for the whole store, and the layout updates is the layout that modifies(updates) the default layout

per store page. So if the default layout says, use 3 columns, but you want your product info page to use 2 columns

only, you’d update the <catalog_product_view> “handle” inside your xml file to reflect this.

ex. if you want to remove compare product block then make comment in this code.
<block type=”core/template” name=”catalog.compare.sidebar”

template=”catalog/product/compare/sidebar.phtml”/>

2. if you want to remove newsletter subscription block then make commment in this code..
<reference name=”right”>
<block type=”newsletter/subscribe” name=”right.newsletter” template=”newsletter/subscribe.phtml”/>
</reference>

3. if you want to remove community poll block then make comment in this code.

<reference name=”right”>
<block type=”poll/activePoll” name=”right.poll”>
<action method=”setPollTemplate”><template>poll/active.phtml</template><type>poll</type></action>
<action method=”setPollTemplate”><template>poll/result.phtml</template><type>results</type></action>
</block>
</reference>

something about page.xml..

So basically your page.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.

page.xml manages the layout and content blocks for all pages in your store, so all the updates you need to

make to a page layout can be done from the page.xml file.

setTemplate

Action method setTemplate allows us to change the default .phtml file used in particular block. For example by

navigating to app/design/frontend/default/default/layout/catalog/product/view.xml we can see the reference:

<reference name=”root”>
<action method=”setTemplate”><template>page/2columns-right.phtml</template></action>
</reference>

and by using another <template> value we are allowed to change default .phtml file used on our products

page.Possible values are:

1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml dashboard.phtml

As we see in app/design/frontend/default/default/layout/checkout/cart.xml , there also additional 2 values for empty

and non-empty cart

<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>
<action method=”chooseTemplate”/>

The method chooseTemplate is used to set a template (setCartTemplate / setEmptyTemplate) depending on quantity of

items in our cart. If we have more than 0 than the

<action method=”setCartTemplate”><value>checkout/cart.phtml</value></action>
is used.
If we have no items in cart then the following will be used.

<action method=”setEmptyTemplate”><value>checkout/cart/noItems.phtml</value></action>

The function provided by the Model is shown below:

public function chooseTemplate()
{
if ($this->getQuote()->hasItems()) {
$this->setTemplate($this->getCartTemplate());
} else {
$this->setTemplate($this->getEmptyTemplate());
}
}

That should clarify how we can use this particular switch. Depending on our needs we can write custom functions in

our blocks and than assign a template depending on parameters returned by a function.

addCss

This method allows us to add an additional CSS file to our page on per-page basis or globally for our template. If we

use a reference name “head” and action method addCss by using

<reference name=”head”>
<action method=”addCss”><link>style.css</link></action>
</reference>

then our page will have an additional line of code to attach the CSS file, for example:

<link rel=”stylesheet” type=”text/css” media=”all”

href=”http://www.ourstore.com/skin/frontend/default/default/css/style.css&#8221; ></link>

As we can see, the <link> path refers to the /skin/frontend/default/default/css/ folder.

addJs

The above method allows us to attach a .js script in the same way as we attached a CSS file. The script path refers

to the /js/varien/ folder but we can change it to suit our needs. FIXME How is that done?

<reference name=”head”>
<action method=”addJs”>varien/script.js</action>
</reference>

It will add a script to our page with src attribute of

<script src=”http://www.ourstore.com/js/varien/product.js&#8221; />
Adding custom CSS and JS files to a layout (part II)

There are 2 ways of adding custom js and css files to our template. The recommended way is by extending the head

section in the default XML file. But you also have the ability to add the files directly in the particular root

template file.

<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/js.js” ></script>
<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/form.js” ></script>
<script type=”text/javascript” src=”<?=$this->getJsUrl()?>varien/menu.js” ></script>

if you want to make any block before or after or left or right then you can do that bu just adding this keywords.
ex.
on product page community pole is at last in right bar but if you want to move that block at upper side then you

can follw this changes.

first of all go to admin panel and enable path hint, so you will get it easily that from where that side bar

come.so after that you can view that that side bar come from checkout.xml so now copy that block name.

<reference name=”right”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” template=”checkout/cart/sidebar.phtml” before=”-“>
</block>
</reference>
here copy cart_sidebar — block name and paste it in poll.xml with tag before. so now our poll.xml will look like

this..
<reference name=”right”>
<block type=”poll/activePoll” name=”right.poll” before=”cart_sidebar”>
<action method=”setPollTemplate”><template>poll/active.phtml</template><type>poll</type></action>
<action method=”setPollTemplate”><template>poll/result.phtml</template><type>results</type></action>
</block>
</reference>

here i add before in default so on every page it will look at top in side bar.

thus these are main changes for magento design.. using this keywords before,after,left,right.

if you want to display any block at first or at top of level then use before=”-” this.
if you want to display any block before some block then use before=”block_name of under”
if you want to display any block after some block then use after=”block_name of upper”
if you want to display any block in right side then use right in reference name.
for ex. <reference name=”right”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” template=”checkout/cart/sidebar.phtml”

before=”-“>
</reference>

here this block will display in right bar and also at the top. same as use left if you want to display block at left

direction.

now all the headers change can be done from header.phtml and from xml..
all the change for footer links can be done from footer.phtml. and in the footer the upper three links of About Us

and Customer Service and Mobile come from static block so to modify it go to admin panel and make changes.
and other all links come from different xml so to make changes in that go to respected xml file.

the another major part is 1-column.phtml,2-column.phtml or 3-column.phtml means there you can define layout for every

page that that page is either 1-column or 2-column or 3-column. if you want to make change in whole site then go to

page.xml and in that in deafult tag change template as you wish.

whenever you make foreign key at that time before making foreign key that key must be unique key means u have to

define that key as index or indices…

Advertisements

Responses

  1. I don’t know If I said it already but …Excellent site, keep up the good work. I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks, 🙂

    A definite great read..Jim Bean

  2. Hey, I found your blog in a new directory of blogs. I dont know how your blog came up, must have been a typo, anyway cool blog, I bookmarked you. 🙂 🙂

    • hi@Online Stock Trading,

      May i know in which directory you see this blog..?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: