Magento Help – osCommerce Help

How do you add a static block into the header area of Magento?

Turns out, it’s not too hard.

If you would like to easily change the appearance of your header area in your Magento Commerce website, embedding code into the header to create a static block is probably the easiest way, so anytime you like, right from the Magento admin, you can simply update the info and baddabing-baddaboom, new content in the header.

Start off by going into Magento Admin and go to “CMS>Static Blocks”

Click the “Add New” button.

Make the Block Title something that makes sense, maybe “Header Area Main Store”

In the identifier field, enter “header_block”. (Of course do not include the quotation marks.)

Select the store view you want this to be available in.

Change the status to “Enabled”.

Put in your content. I would use a copy of some other Magento sample code in here and play with that to help familiarize yourself with the formatting if you don’t know how else to do this.

Click “Save Block”

Next, ftp to your server to the “/app/design/frontend/default/YOURTEMPLATE/layout/page.xml” file.

IMPORTANT: Make a copy of this file and save it for BACKUP!

Open the original file now with a proper text editor and find the section that defines the “html_header”.

The section I’m referring to will read something like this:

<block type=”page/html_header” name=”header” as=”header”>

<block type=”core/text_list” name=”top.menu” as=”topMenu”/>

</block>

Now add the code to call the static block. Your new code will look something like this:

<block type=”page/html_header” name=”header” as=”header”>

<block type=”cms/block” name=”header_block”><action method=”setBlockId”><block_id>header_block</block_id></action></block>

<block type=”core/text_list” name=”top.menu” as=”topMenu”/>

</block>

Next, navigate to “/app/design/frontend/default/YOURTEMPLATE/template/page/html/header.phtml”.

Make a backup copy of this file.

Open the original and find the area that designates the header content you want to manage. Usually, it’s going to contain the word “logo” in this bit of code.

Our code looks like this:

<h1 id=”logo”><a href=”<?php echo $this->getUrl(”) ?>”><img src=”<?php echo $this->getLogoSrc() ?>” alt=”<?php echo $this->getLogoAlt() ?>”/></a></h1>–>

<!– <h1 id=”logo”><img src=”<?php echo $this->getLogoSrc() ?>” alt=”<?php echo $this->getLogoAlt() ?>”/></h1>

<img src=”<?php echo $this->getSkinUrl(’images/media/truck-equipment-contact.gif’) ?>” alt=”Work Truck Equipment – Truck Hardware – Accessories” class=”side-logo-promo”/>

Comment out this section of code and insert this in it’s place:

<?php echo $this->getChildHtml(’header_block’) ?>

Save this file and the other file we just edited.

If you are looking for the correct way to change how many columns your products are displayed in “grid view” in Magento, the solution is actually quite simple. Navigate down to your catalog.xml file in your theme under the “app” side of Magento and open that file.

Then, what I did to make it simple is did a text search for the number of columns  displayed, in this particular case, the column count is 4. The actual line of code looks like this:

<action method=”setColumnCount”><count>4</count></action>

Change that line to read:

<action method=”setColumnCount”><count>2</count></action>

Save the file. Then go into your Magento Admin section under “System>Cache Management”, select “Refresh”, then click “Save Cache Settings”.

Now refresh your Magento catalog page in your browser and you should now see your products in “Grid View” appearing in 2 columns instead of 4, or whatever number you changed the catalog.xml file to.

As we all know, the Magento E-Commerce System is a very powerful e-commerce tool. To achieve that power, it seems some simplicity must go away.

In one of our recent posts, we described how to do multiple stores in Magento utilizing symlinks and a few other tricks. Along those lines, there are a few more changes that need to be done to the code to truly give the additional Magento sites their unique individuality.

You may already know that you’ll want to assign a unique theme to each individual Magento store. If you’re using the modern theme and like it, simply rename a copy of the theme files and folders and place them in the appropriate directory. Now in Magento admin, assign these unique themes to the new store.

Once you’ve done that, you can go in to these theme files and make changes to individualize them. The only problem is, if you’re going to use CMS static blocks in Magento (and you should), you’re going to need the hard coded files within the new theme to call up those static blocks.

As an example, we have a truck accessories retail site utilizing Magento Commerce. This is our main site and all other sites use the method described in the “How To Do Multi Stores in Magento“. We also have a power tools retail site utilizing Magento E-Commerce, but of course that is a child of the main site. The footer on the main site has a link that says “About Summit Equipment”. This is a static block created in the Magento admin under CMS>Static Blocks with and identifier called “footer_links”. This is a stock Magento static block, which can be modified right in admin. But if we look at the power tools site, the footer links read the same. So how do we change the link to read “About Power Tools” instead. If we modify it in Magento admin, then it will be changed for all sites. So what we have to do is create a new static block with a unique name. In our example, we created a new static block in Magento admin and named the identifier as “footer_links_tools” and put the content in that block we wanted. Problem is, the hard coded files in Magento are still calling up “footer_links”!

So now, this is where the challenge comes. Which files within Magento control what static blocks are called up? Turns out, after a little research, we found a couple of files that control this little bit of code and changes must be made to both. On your server, go to the “/app/design/frontend/default/yourthemename/layout/cms.xml” file. Open that file, and for this example, you will see some code something like: name=”cms_footer_links. Modify that code, in our case to look like this: name=”cms_footer_links_tools. A bit further down in our code we see: <block_id>footer_links. We change that bit of code to read: <block_id>footer_links_tools.

Save that file.

Then, navigate on your server to “/app/design/frontend/default/yourthemename/template/page/html/footer.phtml”.

Find some code like: getChildHtml(’cms_footer_links

And change that code to: getChildHtml(’cms_footer_links_tools

Now, one last little bit. Go to Magento admin and go to System>Cache Management and refresh your cache. If you don’t do this, you wont see your changes.

If you follow these steps, you should now be seeing your new footer links on your Magento e-commerce site!