Call us now on 0115 9738074

Posts Tagged ‘Design’

Magento Q&A: How to place a search box in the header

Friday, March 12th, 2010

Difficulty: Easy

Modification: Template File

Q:

I am a newbie at Magento and i need help. Can anyone guide me how to display the search form at the header?

A:

Put this code:

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

Inside /app/design/frontend/default/your_skin/template/page/html/header.phtml. Then style it so that it appears exactly where you want it. It’s as simple as that!

Magento Q&A: Hide the price for a free product

Friday, February 26th, 2010

Difficulty: Easy

Modification: Template File

Q:

I’m new to magento, and I would like to know if there is a way to hide the price of a product when it is 0?

I have a few free virtual product, and they have 0 as price. so the customer can order them for free. But I would like to hide the 0.

A:

That is fairly easy to do. You will need to modify the template file /app/design/forntend/default/your_skin/template/catalog/product/view.phtml.

In there you need to look for the piece of code responsible for displaying the price and surround it with additional code:

<?php if($_product->price==0): ?>

<?php echo 'FREE'; ?>
<?php
else: ?>
<!-- code that is currently displaying the price in your template -->
<?php endif; ?>

Prepare your magento site for upgrade

Thursday, February 18th, 2010

You might have heard that there is a new version of magento out there. Magento Community Edition 1.4 has just been declared stable by its creators – Varien. If you want to upgrade you must bear in mind that by doing so you will overwrite all the modifications in your core files. Normally this should not be a problem, as there shouldn’t be any core modifications. However, it is not uncommon that magento developers and designers do some quick changes in the core and then forget to move them to the local code pool or local template. The only way to make sure that your site will not loose the extra functionality or some custom styling is to track all the changes that have been applied to your core files and either move them to the local code/design files before upgrading or reapply them after the upgrade (though we would really recommend that you keep your core files free from any modifications). Now to the most important part: How to do this?

In order to find the core changes you would need to download a clean copy of magento. Be sure to download exactly the same version that you are currently running (you can check your current version in the admin panel’s footer). After download you need to extract the ‘app’ folder and place it somewhere in your filesystem. For the purpose of this example, lets assume that you put the original app file in the magento root folder and rename it to app.org.

Now you will need to make use of the linux console. The tool you will use is diff. It is a standard program for comparing files that should be present in all linux distributions. The only parameter that would need to be added is -r which switches the tool to recursive mode. The final command looks as follows for:

diff -r magento_root/app/code/core magento_root/app.org/code/core > ~/core_code_modifications.txt

diff -r magento_root/app/design/frontend/default/default/ magento_root/app.org/design/frontend/default/default/ > ~/core_design_modifications.txt

After executing those two commands you will have two files created in your home directory:

  • core_code_modifications.txt, which will list all the modifications in your core code files
  • core_design_modifications.txt, which will list all the modifications in your default template

With that knowledge your job of upgrading magento will be much simpler. Again, after you have successfully upgraded your magento store to version 1.4, do take some extra time and move the changes to the local code pool and/or your custom template. This will save you a lot of time and trouble in future upgrades and will also ensure that your store is easier to maintain by your developers and designers.

Save time customizing Magento with template hints

Friday, January 29th, 2010

So you need to do a few quick changes to the way magento displays some page. Great, but where is this page located in the file system? Have you been there? I know I have spent way too much time looking for the right files to edit.

Fortunately there is a built-in Magento feature that is designed exactly to help any programmer/designer in this situation. The feature is called template hints. You can activate it in your shop’s configuration. It is a bit tricky, however, because it is not visible by default. You need to go to System->Configuration->Advanced->Developer and open the Debug tab. By default you will only see an option to enable the Profiler. If you choose your store view from the ‘Current Configuration Scope‘ box situated in the top left part of the page you will get two extra options – ‘Template Path Hints‘ and ‘Add Block Names to Hints‘. Enabling the first option will display a path to the source file inside each block on the frontend. The second option will also add a Block Name, but it is not that useful and I would advise to keep it off for the sake of clarity.

There is one more thing worth noting here. If you would like to enable template hints on your live server you have to somehow limit them, so that they are shown only to you and your developers and not your customers. Well, you’re in luck again, because this option is also built-in. Just above the tab where you can set the template hints you will find a block called ‘Developer Client Restrictions‘. In there you can insert the IP addresses of all the machines that are allowed to view template hints. This way you can prevent your customers from seeing those hints and inevitably getting confused with your web shop.