Category Archives: magento

Magento open source ecommerce platform

Magento – changing the body class by category

Magento updates the body class declaration on almost every page. If you look at the source code, the body class varies according to where you are on the website. This can be very useful if you wish to style different pages.

However, I was asked to produce different body backgrounds depending on the category the user was viewing. By default Magento adds body classes for categories based on the category name. So, you get something like the following for a parent category (caravan-motorhome-lighting):

<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-html category-caravan-motorhome-lighting”>

and the following for a child category (mr16-leds):

<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>

This makes styling a parent category & its child categories very difficult – since the class attributes change every time the user navigates to a child category. What was needed was a way of assigning a single class to a parent category and its children – say, ‘caravan-motorhome-lighting’.

I looked around for a solution but didn’t want to go to the bother of overriding any Mage classes, nor could I figure out how to achieve this using Magento’s layout.xml files. Then I thought about what category parameters or attributes I could add from the Admin ‘Manage Categories’ interface. This is when I lucked on the solution.

Within the Category ‘Custom Design’ is the ability to inherit or override the ‘Parent Category Settings’.  If this is set to ‘No’, you can then apply a ‘Custom Layout Update’ – which is essentially an xml snippet of the kind usually found in Magento’s layout.xml files.

By adding the following:

<reference name=”root”><action method=”addBodyClass”><className>caravan-motorhome-lighting</className></action></reference>

to the parent category, and then making each child category inherit or ‘Use Parent Category Settings’, I get the body class ‘caravan-motorhome-lighting’ added to every category/sub-category page for that category & its children.

magento layout update

Here we have set this parent category not to ‘Use Parent Category Settings’ & have added the layout update.

magento body class layout update

Now we set the sub category to ‘Use Parent Category Settings’, & it therefore gets the same body class attribute as its parent category.

The net result is now that parent and child categories share the same body class & I can then set a common background image for all of them to share. So the parent has this body class declaration:

<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-htmlcaravan-motorhome-lighting”>

while its child categories have the following:

<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>

So that both parent and child categories share a common class attribute of ‘caravan-motorhome-lighting’. Meaning I can style all these categories in the same way, while adding different background images for other categories.

You can see the technique in operation at the Aten Lighting website. If you looking for a Leicestershire magento developer, please get in contact.

Stupid css error!

Recently I was working on a Magento 1.5 project, customising a theme. On the front page the client wanted repeating rows of images to link through to the shop’s categories. I did this using Magento’s “widget” links, and then used css to style background images.

Within the css I used “sprites” to control the rollover state of the image. The css I used to style this effect is below.

a#yarns{background: url(../images/main-clickthroughs-wool.jpg)0px 0px no-repeat; min-height: 126px; width:232px; position: relative;}

a#yarns:hover{background: url(../images/main-clickthroughs-wool.jpg) -232px no-repeat; height: 126px;width:232px;color:#333333; }

While testing using Firefox & Chrome, all was well. Wrapping up I switched to testing IE7 & suddenly I had no category images on the home page! If I hovered I would see the hover image, but not the default background image.

After googling I found the problem – there should be a gap or space between the “)” and the next value, “0” in this instance. So the code should read as follows:

a#yarns{background: url(../images/main-clickthroughs-wool.jpg) 0px 0px no-repeat; min-height: 126px; width:232px; position: relative;}

a#yarns:hover{background: url(../images/main-clickthroughs-wool.jpg) -232px no-repeat; height: 126px;width:232px;color:#333333; }

It seems Firefox & Chrome are more tolerant but Internet Explorer isn’t. So, something to note for future reference!


Magento + Highslide

I have a Magento client who wanted the Highslide javascript library integrated in several places on his store. Highslide itself is relatively straightforward to integrate & to customise – it really is an excellent javascript thumbnail viewer library (its actually a lot more than that) & is well documented, with an excellent support forum.

image of highslide popup
Highslide products list page popup

Where I came unstuck was that the client wanted a product popup on the product list page – where all the products are listed. In the popup he wanted the large product image, the title, price & ‘buy’ button.


The problem is that with Magento you do not have access to the large product image on the products list page. So I initially developed an ajax call to load the product, its large image & other data, & used the highslide hs.htmlExpand() method to display it. I then encountered the problem that highslide hs.htmlExpand() method has a hard coded (in the css) width – so, while the popup expands to the height of the product, the width is fixed. So, I was having scroll bars on landscape images but portraits were fine. Not acceptable.

Hilde on the Highslide forum suggested I use the hs.expand() method, which takes its height & width from the image itself, and place the title, price, buy button in the “caption” (<div class=”highslide-caption”>) area that can be attached to the popup image. However, that brought me straight back to the original problem that Magento does not make the large image available on the products list page!

image of the Magento products attributes management page
Magento product attributes

However, searching the Magento forums I eventually came across the solution. In Magento, almost everything associated with a product (price, title, images, etc) is an “attribute”. Within the admin system you are able to edit the attributes of these attributes (is it searchable, should it be “used in product listing”!, etc) , but not the attributes of the product images!


Changing eav_attribute properties
Changing eav_attribute properties

However, looking at the table “eav_attributes” the main product image can be edited so that it is available on the products list page. You must change the default value of the field “used_in_product_listing” from 0 (false) to 1 (true). Of course, you should backup your database before changing anything like this & always do this on a test system first!

Once this change has been made, you can then access the large product image on the products listing page. Voila! Now I was able to use the hs.expand() method & could abandon my ajax workaround too.

The resulting code in ../template/catalog/products/list.phtml is as follows:
<!--bof photo-->

<div><a href="<?php echo ( $this->helper('catalog/image')->init($_product, 'image'));?>"title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'image'))   ?>"onclick="return hs.expand(this, {showCredits:false,      outlineType:'rounded-white',transitions:{ expand: true},                    wrapperClassName: 'highslide-white-background',                    align:'center'})">

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(200, 200) ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"                 style="text-align:left;" align="left" /></a>

<div class='highslide-caption'><?php echo( $_product->getName());?> <br /> <?php echo $_coreHelper->currency($_product->getPrice()) ?> <?php if ($_product->isSaleable()): ?> <button onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('add to basket') ?></span></button>  <?php endif; ?></div>

</div><!-- eof photo -->

Remember, this is for Magento However, it now means I have a product popup on the products listing page that takes the main product image and scales the popup to the image’s dimensions, without any scroll bars.

Magento – multi currency display

Magento has multi currency capability built in. When it is configured and enabled, your customers will see a currency drop, like in the image below:

Magento multi-currency drop down
Magento multi-currency drop down

Where the currency drop down is displayed is determined by your template.

However, you won’t see the currency select control if you haven’t actually imported your currency exchange rates. You import your currency exchange rates within the Magento administration ui, under System/Manage Currency Rates. There you can use the “Webservicex” webservice, see below:

Magento - manage currency rates
Magento – manage currency rates

Only after these rates have been imported and saved will your customers be able to see the select currency control.

So, if you’ve setup multi-currency within your shop but the currency drop down is not visible on the front end, first make sure that you have actually imported and saved your currency rates.

MatrixRate Premium csv file

Magento – no shipping quote message

This is a common problem that gets raised in the Magento forums. You’re testing your checkout & when you select your shipping or delivery country, Magento responds with the message something like, “No shipping quotes are available for this country…”

This happened to me the other day. So, I checked that the country is question was one of those ‘allowed’ shipping countries, in both the default and store config. Still no joy. So, I then checked that this country was also enabled in the ‘Table Rates’ shipping method, & that this shipping method was enabled – all good but still no joy.

It was then that I twigged that my ‘Table Rates’ csv file was empty! Only after I’d exported my Table Rates csv file did I realise that I had not set up any actual values for the ‘Table Rates’ – doh! Adding these values & then uploading the csv fixed the ‘issue’.

You should also note that if  you ship using “weight vs destination” & the weight of an order is lighter than your minimum shipping weight, then you’ll also get the same ‘error’ message.

Magento Manage CMS Pages Issue

Today I came across a Magento issue I’ve not seen elsewhere – when I clicked on the Mange CMS Page within the admin UI (version, I was bounced back to the dashboard rather than the CMS page grid.

After fruitlessly searching the forums I had an idea. Earlier I had attempted to delete a store & shop view.  When you delete a store, you can take a database backup at the same time. For some reason this produced an error (timeout?), so I’d gone into PhpMyAdmin and manually deleted the store_id in the tables ‘cms_store’ & ‘cms_store_group’.

Here was the origin of my CMS page problem – there were references to the deleted store in the following tables, ‘cms_page_store’ & ‘cms_block_store’. Once I’d cleaned these tables up by removing the orphaned store_ids, all was good.

So, there’s a potential little gotcha to look out for.

Show stock levels in Magento

Magento is a really good e-commerce platform yet there are a number of quirks or missing features that you come across as you start developing ecommerce websites.

One quirk, or ‘missing feature’,  is that there is no ‘show all’ functionality within the default pagination. From within the administration user interface you can set the number of products per page to show but not to show all (This is now available in the latest versions of Magento).

Another missing feature is that by default, the number of items within stock are not shown on the product page. The interface shows if the product is in/out of stock but not how many there are in stock. I know this may not be something you would necessarily want to show, but again you’d expect this to be a setting within the admin UI.

Showing stock levels on you product page within Magento is not particularly difficult for simple product types & I’ll show you how to achieve it. It means editing a template file within your Magento template, so you’ll need ftp access to your server.

1) The file you need to edit is app/design/frontend/default/default/template/category/product/view/type/simple.phtml

2) The code you need to replace is:

<?php if($_product->isSaleable()): ?>
<p><?php echo $this->__('Availability: In stock.') ?></p>
<?php else: ?>
and replace with this:
<?php if($_product->isSaleable()): ?>
<p><?php echo $this->__(‘Availability: ‘) ?>
->loadByProduct($_product)->getQty() ?>
<?php echo $this->__(‘ in stock.’) ?> </p>
<?php else: ?>
Show Stock Levels in Magento
Show Stock Levels in Magento

What this means is that if the product is in stock, the customer sees how many items are in stock. Not what everybody wants, but our client did. You can see the result in this image.

Leicester ecommerce website relaunch

Leicester ecommerce agency Fresh Web Services, have migrated (& redesigned) from zen-cart to the Magento ecommerce platform. As part of this process we migrated all products, customers and orders, as well as redesigning the site along the way. sells a range of feminine hygiene (organic tampons and panty pads, etc) and sanitary disposal bags to consumers and businesses throughout the world.

The decision to move from Zen-Cart to Magento was based on the belief that Magento offers a better platform for expanding their online sales and reach. Improved customer sales tools will help identify where best to focus their marketing and promotional resources.

Magento New Order Emails

Recently I had an issue with Magento emails. While searching for a solution I came across loads of people wanting to know why new order confirmation emails were not being sent to customers or to the shop owner.

Some of the confusion around this issue is a misunderstanding about the order workflow. From 1.4.0, Magento only sends an order email once payment has been received from the payment gateway such as Paypal.

A second cause of confusion is that you have to configure Magento to actually send out emails. By default, email notifications are turned off. To turn emails on you need to do the following:

1) Log into the Admin UI, and select Configuration/Advanced/System.

magento configuration
Magento Advanced/System tab

2) In this tab you’ll find ‘Mail Sending Settings’. Make sure that the ‘Disable Email Communications’ drop down is set to ‘No’.

Magento Disable Email Communication
Magento Disable Email Communication

So, before you start to hack at core files to make new order confirmation emails work in Magento, make sure that you are aware of the order workflow & the need to enable emails within Magento.

Magento Ecommerce Website Live

Leicester web design agency, Fresh Web Services are pleased to announce the launch of several websites in recent weeks.

First, is the Magento powered Goldmark Books, selling the beautifully produced books published by the Uppingham art gallery and publisher. This is the first of a series of Magento powered ecommerce websites we will be rolling out for Goldmark Art Gallery.

Our most recent project is a Properties Manager holiday cottage rentals software service, appropriately called LookB4UBook. Those searching for UK holiday cottages can view videos of the cottages and the surrounding area, as well as viewing pictures and reading descriptions, etc.

Last, but not least, Northampton Probation Trust website is live. Powered by the award winning Joomla! content management system, we were responsible for the design, hosting, training and implementation of the northants web design project.