Painful PNGs

So my latest website I'm building is a portfolio site for a makeup artist. Cue lots of lovely photos of beautiful models in lovely frocks etc. I promised the designer we could do a slideshow of images behind a custom "scrolly" frame, thinking I'd use CSS absolute positioning to layer the transparent PNG frame over the top of the portfolio jpegs (incidentally being animated using jQuery)
However there have been a few problems with this approach:
The initial solution was to use a png image for the frame - but this appeared a slightly different colour on both IE7 and Safari (but only on the Mac) but fine on all other browsers. This different colour was only a few shades darker but made it stand out against the background colour of the page.

So I ditched the idea of pngs and changed to transparent gifs for the frame.
But this caused even more problems. Gifs don't take well to being sliced in directions other than horizontal or vertical - they leave horrid jagged pixelly edges. So I had to make an artistic decision (me - a developer too!) to ditch the funky asymetrical hole the designer had wanted to use a more square shape for the frame hole. Which worked for me.

No - designer not happy, so I went back to drawing board to see if I could find the source of the problem with the original Pngs.

The Problem with Pngs is that every browser and platform tries to interpret them differently.
I learnt this from the excellent article here:
http://morris-photographics.com/photoshop/articles/png-gamma.html

Basically when I was doing a "Save For Web..." from Photoshop it was adding in lots of extra info that was making the browsers think too much about how to display that PNG

The solution was to use a command utility called "PNGCrush" which allows you to remove the extra information - which should hopefully allow the processed png to appear more consistently across most browsers (note: I don't guarantee it will work for you!)
The source code for PNGCrush can be found here:
http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.7/pngcrush-1.7.7.zip/download

For people (like me) who don't know one end of a compiler from another you can download the Windows executable here (albeit a later version):
http://wareseeker.com/download/pngcrush-1.6.4.rar/356317

The moneyshot command you need to execute is:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

You can see the results in the (still work-in-progress) website here: www.bGorgeousMakeup.com

Storing FTP details for client sites - a breakthrough!

I don't know about you but I need passwords daily - hell even hourly. To login to clients FTP sites, to login to CMS's, PayPal accounts, MySQL databases.At any one time I have about 10 current passwords running round my head.
Then - boom - like a bolt out of blue I'll get a request for either some work on an old web site - or a client who's forgotten how to login to SagePay.
So what I would normally do is trawl through all of my old emails where they might have sent me a copy of their login credentials (and I might have had enough forethought to mark with a reg flag in my inbox so I knew it was actully something important) - but all in all it would take minutes of my precious time, and distract me from the matter in hand.

Imagin my horror when one of the agencies I work for asked for a spreadsheet of all the FTP logins, Zen Cart logine & hosting logins for their set of clients! Aaargh!! To collate that would take days.... I complained!

But do you know what? It didn't actually take that long at all. I sent them back an Excel spreadsheet, with each clients details on a separate tab, and each sheet contains every password, username & url link one could possibly need to manage their online sites.
So now I have done the same for ALL my current clients - everytime a new client signs up - he/she immediately gets a new tab and I can just copy and paste the relevant detail into their tab.
OK it doesn'lt always look pretty - but its always to hand - evidenced by the fact that its almost always open on my machine.
I have taken the basic security precaution of password protecting the spreasheet in case it fell into unwanted hands - but I think I can manage to remeber one password.

It would be interesting to know any other developers tips for managing this issue

Turn off Featured products etc across the Zen Cart site

Admin > Configuration > Index Listing
has options to turn off what sub-center boxes appear across the site - eg Featured, New, Upcoming & special products
So its not just for the main home page but it affects all the category pages & product pages too

List of European Country Codes

I've needed this in every ZenCart install so far to set up European specific country codes:

BE,BG,CZ,DK,DE,EE,IE,EL,ES,FR,IT,CY,LV,LT,LU,HU,MT,NL,AT,PL,PT,RO,SI,SK,FI,SE

Courtesy of : http://publications.europa.eu/code/pdf/370000en.htm

Let me know if anyone knows of any changes to this

Proof of Cyber Monday from Google Analytics

I was just checking out some recent stats on Google Analytics for a small e-commerce site - and I was quite surprised to see such a spike on Monday 30th November - so called "Cyber Monday"
You can see the site got more than double the number of hits and then it went back to normal.
See and I thought it was all a marketing ploy!

Manufacturers Landing Page in Zen Cart

I can't believe it hasn't been done yet - that there isn't a mod out there to add a nice landing page for each manufacturer that you get to from clicking the Manufacturer from the sidebox on a Zen Cart site.
But try as hard as I could I couldn't find that functionality anywahere - not hidden in the code of Zen Cart or in the forums.
So I thought I'd have a bash at it myself.
Warning the code is very basic - probably lots of room for improvement but for now it seems to be working.

1) Make sure that one or more of the Manufacturers in the Zen Cart Admin has an image associated with it (in my case the image needs to be no wider than 590px or it breaks the design)
2) We are going to be using the Manufacturer URL as the Description field - hey I don't want to be messing round with the databaase and the 255 chars we can add here will be good as a brief description for the Manufacturer

3) Edit the tpl_index_product_list.php (in templates) and at around line 18 add the following (inside php braces)

if (isset($_GET['manufacturers_id'])) {
$manufacturer_info_sidebox_query = "select m.manufacturers_id, m.manufacturers_name, m.manufacturers_image, mi.manufacturers_url
from " . TABLE_MANUFACTURERS . " m
left join " . TABLE_MANUFACTURERS_INFO . " mi
on (m.manufacturers_id = mi.manufacturers_id
and mi.languages_id = '" . (int)$_SESSION['languages_id'] . "')


where m.manufacturers_id = " . (int)$_GET['manufacturers_id'] ;

$manufacturer_info_sidebox = $db->Execute($manufacturer_info_sidebox_query);

if ($manufacturer_info_sidebox->RecordCount() > 0) {

$content = "";

if (zen_not_null($manufacturer_info_sidebox->fields['manufacturers_image']))
$content .= '

' . zen_image(DIR_WS_IMAGES . $manufacturer_info_sidebox->fields['manufacturers_image'], $manufacturer_info_sidebox->fields['manufacturers_name']) . '

';
;
if (zen_not_null($manufacturer_info_sidebox->fields['manufacturers_url']))
//$content .= '

' . sprintf(BOX_MANUFACTURER_INFO_HOMEPAGE, $manufacturer_info_sidebox->fields['manufacturers_name']) . '

' . "\n" ;
$content .= '

'.$manufacturer_info_sidebox->fields['manufacturers_url'].'

' . "\n" ;

echo $content;
}
}

Save & Upload this.
What you should find now is that when you go to a page with a manufacturers_id query string it will look in the db to see if there is an associated image and or url (in this case description) and display that

As a final touch you may want to update the Manufacturers page in the Admin section so that the label Manufacturers Url is changed to Description - and that a textarea box is shown rather than the small input field

1) Edit the file admin/manufacturers.php
2) At about line 255 replace this line

$manufacturer_inputs_string .= '
' . zen_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']) . ' ' . zen_draw_input_field('manufacturers_url[' . $languages[$i]['id'] . ']', '', zen_set_field_length(TABLE_MANUFACTURERS_INFO, 'manufacturers_url') );

with this line

$manufacturer_inputs_string .= '
' . zen_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']) . ' ' . zen_draw_textarea_field('manufacturers_url[' . $languages[$i]['id'] . ']', 'soft', '50', '6','');

3) Just below that replace

$contents[] = array('text' => '
' . TEXT_MANUFACTURERS_URL . $manufacturer_inputs_string);

with

$contents[] = array('text' => '
Manufacturers Description (max 255 chars)'. $manufacturer_inputs_string);
}

4)A bit further down (line 290 ish) replace

$manufacturer_inputs_string .= '
' . zen_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']) . ' ' . zen_draw_input_field('manufacturers_url[' . $languages[$i]['id'] . ']', zen_get_manufacturer_url($mInfo->manufacturers_id, $languages[$i]['id']), zen_set_field_length(TABLE_MANUFACTURERS_INFO, 'manufacturers_url'));

with

$manufacturer_inputs_string .= '
' . zen_image(DIR_WS_CATALOG_LANGUAGES . $languages[$i]['directory'] . '/images/' . $languages[$i]['image'], $languages[$i]['name']) . ' ' . zen_draw_textarea_field('manufacturers_url[' . $languages[$i]['id'] . ']', 'soft', '50', '6', zen_get_manufacturer_url($mInfo->manufacturers_id, $languages[$i]['id']));
}

5) And just below that replace

$contents[] = array('text' => '
' . TEXT_MANUFACTURERS_URL . $manufacturer_inputs_string);

with this

$contents[] = array('text' => '
Manufacturers Description (max 255 chars)'. $manufacturer_inputs_string);

There you have it a simple way of creating a Manufacturer's Landing Page in Zen Cart!

See it in action here:
Billabong Landing Page on SurfsideOnline

Comments, suggestions, improvements always welcome though!

Installing Simple SEO URL module for ZenCart

Well I've finally done it - installed the Simple SEO URL module for Zen Cart!

And I thought I'd better document it here before I forget the steps I've done and need to do it again for another cart.

I had avoided doing on previous carts as its a bit fiddly to set up and if you get it wrong it completely breaks your cart (those unhelpful Internal Server Error 500 messages!) But its SO useful for SEO that I thought it worth persevering.
So here goes:

1) Download module from http://wiki.rubikintegration.com/zencart/modules/ssu/installation (or search on ZenCart's Modules page)
NOTE: For PHP4 installs the latest stable release is 2.9 - not 3.x

2) Download & install the Zen Cart Module Manager from here (http://code.google.com/p/zencart-module-manager/downloads/list) (Before installing the above module, ok?!)

3) Ensure Module Manager is installed by going to Admin > Tools > Module Manager
4) Now upload the files for the SEO module then install by going to Admin > Extras > Simple SEO URL Manager

NOTE: this is NOT enabled yet just installed.

Look at your .htaccess file - VERY IMPORTANTLY make sure that the Rewrite Base line reflects the site you're on - if the shop is in a subdirectory change the name here - if its in the root is should just be /

5)Upload the .htaccess file
6)To enable the module go to Admin > Configuration > Simple SEO URL and the last setting is "Set SSU status" - which defaults to false. Change it to true - and have a look at the live site.
If its working, well done - go have a celebratory cup of coffee!
If you get 500 errors, double and triple check your .htaccess file.
Still not working? Try reuploading your SEO mod files again and re-do steps 3 onwards

There's help online in this thread here:
http://www.zen-cart.com/forum/showthread.php?t=86353

I have noticed a performance drop but will persevere with it as I think it does mean the customer will see far nicer URLs

Let me know how you get on!

UPDATE: As is the zooms on additional product images stop working - all you have to do is go to Configuration > Simple SEO URL and in the field called Exclude List add "popup_image_additional"