Things I’ve learnt today:
IE wont let you layer <a> tags absolutely over images – even IE8.
I have a flowchart diagram I’m trying to layer over a couple of hotspots in a WordPress page.
Easy I think. I’ll add the image as a <img> and then absolutely position some tags over the top that are set to display:block.
Worked like a charm in Firefox – but I just couldn’t get it to work in IE (IE6, IE7 and IE8)

What happened was the blocks would display but they would only work as a link at the very edges of the block – or, if the text was showing, right over the text itself – not anywhere else within the a block area.
No matter what I changed could I get this to behave.

Solution:

Give up on the idea of using an <img> block and just have a <div>
with a background image of the flowchart – then absolutely position my anchor tag blocks over the top – works like a charn in ALL versions of IE

But I’ll never get that half an hour of my life back, will I Bill Gates?

Been tearing my hair out for 24 hours about how to copy a Magento site from one server to another so thought I should document it. It got so bad that I ended up trying to just install a vanilla Magento site, just to prove it runs on these new servers.

To install a vanilla Magento site:

1) Upload the zip of the Magento install pacakage to hosting & unzip in situ
2) Create a blank db (you dont need sample data unless you’re a complete Magento newb)
3) Ask the nice people at Heart Support to allow allow ‘CREATE TEMP TABLE’ permissions on the database (turned off by default for security reasons)
4) Run the magento cleanup file that seems to sort out your permissions nicely (http://www.magentocommerce.com/wiki/groups/227/resetting_file_permissions)
5) You should be ready to go to your magento folder in a browser and start running the install

Note: I had a 500 error after the first page (before it asked me the locale questions) but then I went back after 20 mins and it had sorted itself out again (see that why I just dont trust magento!!!)

But saying that I haven’t had any weird 500 errors that I got on 1&1 shraed hosting – so this might be a keeper after all.

Right will post back when I have found out a way of using the working Magento site I have on this new hosting – cos at the moment its just showing a blank screen; no errors, just a white screeen – aaaagh!!

Kudos to this post for pointing me in right direction – but I didn’t need to do all the steps it seems:
http://www.markrushworth.com/install-magento-heart-internet/

UPDATE: Ok my copied Magento site is now working!
Things I had done before:
1) Uploaded & unzip full files from old site
2) Cretead a new MySQL db and exported the SQL dump from old db into it
3) Changed the app/etc/local.xml to reflect the new db name & password
4) Ran the magento-cleanup.php file to set permissions on all files/directories correctly

 Things I did to get it to work:
1) Remember I was getting a blank screen? Well I opened the main index.php of the root of Magento and un commented the line

Now when I looked at the site I got the error:

2) I googled this error and found this post:
http://www.magentocommerce.com/boards/viewthread/52785/

Which told me to run the following SQL statements on my database:

3) This seemed to do it – no more error on the index,php page. Although in my case it did keep switching from the subdomain I had installed it into to the main site url. Turns out I had the wrong info in my core_config_data MySQL table (where the URL of the site is stored – I’d moved it into a subdomain amidst all my faffery). However even after I changed this, the site still kept switching back to the old root URL.
4) Then I  rememebered about deleteing all the files in the cache folder in the var subdirectory, which I did – and it worked!
Woo hoo! Finally a copy of my Magento site – that I can now use as dev practice site.
Think I need a lie down now….

I’ve been searching the past few days for a good plugin to generate a jquery based expandable vertical menu of pages in WordPress, but there just doesn’t seem to be one out there.
So I  thought I’d document how I created my own.

(Thanks for initial idea from http://www.mathachew.com/sandbox/collapsible-menu/)

In functions.php: wp_enqueue the jquery file (the proper way to add jquery to WordPress!):
function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( ‘jquery’ );
        wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’);
        wp_enqueue_script( ‘jquery’ );
    }
}   
add_action(‘init’, ‘my_init_method’);

In header.php add the following jQuery:

In the sidebar.php add the following (assuming a left hand vertical menu which gets just the hierachy of pages around the current one in that branch)

Note; I’m using the fold_page plugin for WordPress but you could *probably* use wp_list_pages()

#leftMenu {
    padding:0px;
    margin:0 0 0 0px;
    float:left;
    width: 200px;
    border:1px solid #fff;
}
#leftMenu ul{
    list-style:none;
    font-size:0.9em;
    margin:0;
    padding:0;
}

#leftMenu ul.level0{
    border-top:5px solid #00C4F5; /*CVP Bright Blue*/;
    border-bottom:5px solid #00C4F5; /*CVP Bright Blue*/;
}
#leftMenu ul li{
    display:block;
    position:relative;
}
#leftMenu ul li a{
    display:block;
    height:30px;
    line-height:30px;
    padding: 0 10px;
        border-top:2px dotted #00C4F5; /*CVP Bright Blue*/;
       
}
#leftMenu ul li ul li a{
    padding: 0 10px 0 30px;
        height:25px;
    line-height:25px;
}
#leftMenu ul li.current_page_item > a,#leftMenu ul li a:hover{
    background-color:#D1EEF9; /*CVP Pale Blue*/;
}
#leftMenu ul a.btn {width:13px; height:13px;display:block;clear:both;position:absolute; padding:0;
right:10px;top:10px;border:0; overflow:none;}
#leftMenu ul a.btn:hover{ background-color:transparent;}
#leftMenu ul li.expanded a.btn {background-image:url(images/bgArrowDown.png); background-position:-6px -15px;}
#leftMenu ul li.collapsed a.btn {background-image:url(images/bgArrowLeft.png); background-position:-6px -15px;}

You’ll also need a down arrow & left/right arrow icon. Clearly you can change the styles to suit your theme, but you can get the basic idea.
Note: I only need this to show 2 levels of drop downs – I’m sure it can be customised to have an infinite hierarchy – let me know how you do it if you succeed!
(link to live site to follow soon…)

While Magento has some great features – it is very resource hungry, meaning it doesn’t play well with shared hosting providers who have low php memory thresholds on their packages.
For example 1&1, who I use, only offer a php memory limit of 40Mb by default on their shared hosting while Magento require a Memory_limit no less than 256Mb (preferably 512)

From my brief research into shared hosts – I’ve found none that offer this (well for the budget my client has in mind)

For the current site I’m doing the only way this limit really manifests itself is by a horrible error when logging into the admin interface. “HTTP 500 Internal Server Error”
A few presses of F5 to refresh it seems to work ok and the client can access the Dashboard.
Otherwise the whole site seems to function ok.

Imagine my joy (yes it was joy!) to discover I could change the default start page so it bypasses this horrid error:
Go to : 
System > Configuration > Advanced > Admin
And change the start up page to “Sales > Manage Products” (for example)
Now when the user logs in – they get taken to the products list to start with – and even better, when they click to  get taken to their dashboard – it doesn’t produce this error!
RESULT!

Just thought I’d share something cool I found out in Magento.
The client wanted to show a short tagline to describe a product that was to appear on the home page (within a static block) – but both the descrition & Short Description fields were already taken.

After searching around for ages looking for an easy way of doing this, I decide to create a new Attribute for the product called “tagline”.
I made it a text field and made it have Global scope and visible from the front end.

Next I scratched my head trying to find ways of actually extracting the value of this attribute. There seemed to be no definite answer in how to get an attribute value.

Then I stumbled across a post which suggested that getATTRIBUTENAME() would do the trick – which seems to go against every instinct I have as a developer.

But lo and behold using $product ->getTagline() did actually work and retrieve the new attribute “tagline” I had created.
Magento is marvellous – completely baffling most of the time but marvellous!
Update : 11th jan 2011
Talking to a colleague about this – he mentioned that this was a feature of the Zend Framework on which Magento is built. So maybe not as mind-blowing as I first thought. Still pretty cool though…