Archive for the ‘Websites with Magento’ Category

Our Studio Blog has Moved

January 3, 2014

The Tinstar Graphic Design and Studio Blog has moved – we’ve brought it back under the wing of our main website. Come by any time.

Contemporary Furniture by COCCO – the new creation

January 19, 2013

Long-standing client and friend of Tinstar Design is The Contract Chair Company, which (operating out of a custom-build Hammersmith showroom) has been supplying restaurant furniture as well as furnishings for hotels, cafés, conference centres, airports and healthcare institutions since 1998 – just one year less than Tinstar’s foundation. That almost makes us twins.

The time had come to expand their stylish outfit by offering contemporary furniture to interior designers and private individuals for home and home office use. Thus was born COCCO Home Furniture, a website developed primarily with usability in mind – we wanted to make it as easy and intuitive as possible for the visitor to find their way around – and hopefully buy. Sure enough, within the first few hours of launch, COCCO had sold some unique Turi Turi Coffee Tables.

Contemporary Furniture

500 Error Messages, Magento Picture Zoom and Add to Cart Not Working

January 10, 2011

I just threw an entire weekend away (and with the nicest weather we have had for sometime) sitting staring at my laptop trying to figure out why my functioning local version of Magento refused to transfer to my remote host without breaking. It took long enough to transfer the files across (with the occasional one failing and needing to be re-submitted) – but then it took twice as long to find out why my picture zoom had broken (no matter what theme was active) and why the Add to Cart button led to a blank screen on Safari and a 500 error on most other browsers.

After foraging Google for answers, I got the impression that the js Javascript folder might need to be replaced, so I re-uploaded it. This fixed the zoom problem but not Add to Cart.

So another browse led me to assume that all the permissions had been messed up during the FTP transfer. Rather than attempt to change the permissions manually on thousands of files and folders, I was led to a very hand php script called magento_cleanup.php which, when run, will do exactly that – reset all the permissions to the correct format (755 for folders, 644 for files and 550 for pear scripts).

Copy the file to your main Magento directory and point your browser to it.

As satisfying as this was, it didn’t fix the problem. I resorted to Maglance, a place to post projects and recruit Magento freelancers. I thought I would put it in the hands of the experts. I got some helpful suggestions before anyone actually bid on the project, and one request was for me to:

  • Turn on system and exception logging in admin: System/Advanced/Developer: Log Settings.
  • Rename the file errors/local.xml.sample to local.xml
  • Delete the contents of the var folder

I did this and the site completely broke. I could no longer access the front or back end, and a MYSQL 5000 error kept telling me that the site couldn’t connect to my database. This led to a flurry of comments from the freelancers suggesting (understandably) that I must had done something the database or app/etc/local.xml file – even though I had done nothing of the kind.

By this time I had spent Friday night, all of Saturday until 3am and half of Sunday (interspersed with episodes of Pride and Prejudice to calm me down) struggling with the beast. I hadn’t wanted to delete everything and start again, but actually, that’s exactly what saved me.

The following steps led me to 11.30pm on Sunday night, got the site working and gave me a peaceful night’s sleep:

  1. Make a backup of the (working) local site in System/Tools/Backups – and download the database backup
  2. Create a new MySQL database with a different name and user name than the one used before and import the backup data into it
  3. Edit the two fields in the core_config_data table for web/unsecure/base_url and web/secure/base_url replacing them with the new (remote) location of your new Magento directory
  4. Upload (!) the entire website again to a new (differently named) directory
  5. Once uploaded (a couple of hours later, hopefully without errors) edit the app/etc/local.xml file with the new database details
  6. Delete the contents of the var folder (if you uploaded it – the obvious answer here is not to upload your old local cache files)
  7. Gaze in wonder and relief at your working site! Zoom, Add to Cart and everything else worked again.

Unzip Files on a Remote Server

January 9, 2011

A really handy timesaver is the the ability to upload a single zip file, rather than hundreds of tiny files, and then unzipping it remotely. This saves time on uploading and minimises the possibility of corruption or failed uploads for the odd file buried deep in an obscure directory.

  1. To achieve this, create a blank html file and save it as something like unzipfiles.php
  2. Between the <body></body> tags, paste the following: <?php system(‘unzip’); ?>
  3. Replace the with the name of your zip file and upload the new page and your zip file to the same directory
  4. Access unzipfiles.php through your browser and the decompression should take place, expanding the contents of your zip file into your remote directory

I tested this with a small zip file which worked fine. With a larger file however (the js directory of Magento), I got a “The operation couldn’t be completed’ message in the Activity window of the browser. When I checked the remote directory, it seemed to have unpacked itself anyway – but this only presented the structure of the directories without actuall unpacking the contents – so this didn’t work.

I suppose it ultimate depends on what host you are using. Small files good, big files bad.

How to Add a Content Managed Page to the Navigation in Magento

January 4, 2011

This one’s pretty simple luckily. To add a static page to the navigation bar (the term ‘static’ is misleading because all pages are technically content managed in Magento) the best way is to create a ‘Static Block’ in CMS/Static Blocks. Make this your new page and add the content you want.

The create a new category and set the Display Mode to ‘Static Block Only’ under Display Settings – then choose your new static block as the destination page.

As long as it’s active, this should now appear in the navigation bar.

How to Display the Content of the Left Column on the Popular Search Terms Page

January 4, 2011

Another morning and much of the afternoon has been spent frustratingly trying to discover why, when the Popular Search Terms page (and some others) load with a left column, the column is visible – but completely empty. However, the Advanced Search page shows the left column content correctly. Irritating, no?

More by luck than judgement I have found a simple solution.

In the catalogsearch.xml file (found in app/design/frontend/default/yourtheme/layout) at the bottom of the page there is the following reference to the Search Term option:

<catalogsearch_term_popular translate="label">
<label>Popular Search Terms</label>
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/2columns-left.phtml</template></action>
<reference name="content">
<block type="catalogsearch/term" name="seo.searchterm" template="catalogsearch/term.phtml"/>

All I did (more as a ‘hit-and-hope’ solution than anything) was comment out (or delete if you prefer) the following lines:

<remove name="right"/>
<remove name="left"/>

And what do you know? My left column content appeared on the Popular Terms page.

Migrating Magento from Local to Live or Live to Local

December 6, 2010

Changing the Magento Directory or Server Location

Knowing how slow Magento can be when working in the admin area, it’s preferable to work locally when updating the content of the store. The trick then is to upload the entire store and data to a live website.

Having finally achieved this, here’s how I managed it manually without having to change any information in the admin area (except for the initial product backup).

Make a backup in the admin area

In the admin area of your local site (assuming that you are migrating to a live site), visit System/Tools/Backups. Click the Create Backup button. A new backup should appear at the top of the list. Download it and decompress it by clicking on the gz or 7-Zip link.

Import the data to your destination server

Now open phpMyAdmin on your destination server. If you’re migrating to a local site and working on a Mac then installing MAMP is the best thing to do here. For PCs, visit this link for phpMyAdmin installation instructions.

Create a new database and user using exactly the same information you used when installing Magento for the first time. Select the database in phpMyAdmin and click the Import tab. Browse to your decompressed data file, select it for upload and click Go.

Edit the core_config_data Table

Find the table called core_config_data in the list of tables shown on the left of phpMyAdmin, click it and then click Browse. Remember that if you opted for a prefix for your tables then the table name will be yourprefix_core_config_data.

Find the field web/unsecure/base_url and change the associated value from your existing directory destination to your new one. Remember to include http:// at the start and a trailing / at the end.

Now find the field web/secure/base_url and change the associated value in the same way.

Edit the local.xml file

Finally you need to edit the new MySQL host and database details in the local.xml file. Open app/etc/local.xml.

Change the host and database details as appropriate if necessary. You might find that the details remain the same, but in my case I had changed the localhost to the new server name as well as the database name, user and password, all of which were assigned or restricted in length by my live server.

If you’ve performed a separate install on your destination server already and want to change the data, you need to also insert the appropriate website key here as well.

Check and remember your admin directory name for reference if you’ve changed it from the default admin.

Upload the amended file and that should do the trick.

How to remove the ‘Shop By’ box from the left column in Magento

December 1, 2010

To activate and deactivate widgets in Magento like the Newsletter option, it’s pretty easy. You just go to System/Configuration/Advanced and select ‘disable’ next to the ‘Mage_Newsletter’ item.

But what if you want to disable something that has no apparent widget control? I couldn’t find a widget that controlled the ‘Shop By’ option in the left column. If there is a widget that controls this, please let me know!

The first way to remove an item – edit the code from the referenced PHTML file

What I did was to first identify the name of the DIV that contained it .To do this, visit a page containing the item on your testing or live server, select ‘view source’, copy the source code in its entirety and paste it into a new, blank HTML Dreamweaver file. Working in Split View, you can click on DIVs in the Design Pane and see what they are called in the Code Pane.

I established that the code in question was within the “block block-layered-nav” DIV. In Dreameaver Files, select the app/design/frontend/base directory and perform a search for “block block-layered-nav” in the source code of all selected files. Click ‘Find All’.

The search showed that two files contained this css string – the view.phtml and left.phtml files. Upon inspection, the view.phtml file contained the ‘Shop By’ title, so this was the one to edit. You could either comment out all the PHP and HTML, or (as I did) empty the file after making a copy of it for later reinstatement if required.

Upload the file to app/design/frontend/default/yourtheme/template/catalog/layer and the item should disappear from the left column.

If you are wondering why we retrieved the view.phtml from the Base theme rather than your theme, it’s because sometimes not all the phtml files exist in a theme, and when this happens Magento defaults to the Base theme to find one. By uploading it to the same location in your theme, it overrides the default Base version.

Of course, if you have a view.phtml already in your theme, edit that one.

The second way to remove an item – edit the code from the referencing XML file

Now you know where the code resides, you can perform a new search of the app/design’frontend/base directory for the filename, ‘view.phtml’. This showed quite a few files referencing view.phtml, but only two which were referenced view.phtml in the layer directory: catalog.xml and catalogsearch.xml.

Just focusing on the catalog.xml file (which affects more pages), locate the reference of layer/view.phtml in the code. It appeared just once on line 115. Comment out the code that references the file, replacing this:

<reference name="left">

<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>


with this:


<reference name="left">

<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>



Save the catalog.xml file to the corresponding directory in your theme (if it doesn’t already exist): app/design/frontend/default/yourtheme/layout

Now the Shop By option should have left the site.

Magento 1.4 Ignores Products: “Your search returns no results.”

November 22, 2010

This bothered me for about 15 minutes until I found the solution online. Whilst building a site with Magento 1.4 (installed with no sample data), I added a product to test the system. However, when I tested the search feature, it returned no results whatsoever. I tried entering META keywords (which turned out to be on the wrong track entirely) and double-checked that the ‘Visibility’ option under Catalog/Manage Products was set to “Catalog, Search”.

The solution turned out to be this: Reindex Data

In the Admin Panel, go to System/Index Management. Select All items and then click ‘Submit’ next to ‘Actions: Reindex Data’. That should do the trick.

Creating a new Static Block in Magento

November 22, 2010

In Magento 1.4, it’s not immediately obvious (or, in fact, obvious after several hours of staring) how to add a customised static block of text, html or anything else into the website. Like all things, once you know how, it’s pretty straightforward.

This is how I added a static item (in my case, an HTML submenu in the header) into my Magento website using the admin panel and by editing the header.phtml file which can be found in:


If you find this page doesn’t exist in your theme, copy it (along with the relevant directories if necessary) from the frontend/base/default theme.

Creating a new Static Block in Magento using the Admin Panel:

Step 1

Create a new block in the admin area – CMS/STATIC BLOCKS. Give the identifier a simple name with no spaces. We’ll call it NameOfStaticBlock.

Enter THIS IS WORKING in the text editing area. This will be replaced by the html or other code that you want to appear here.

Step 2

Open header.phtml (or the page where you would like this to appear, such as footer.phtml or 3columns.phtml) and in the position that you want your block to appear, paste:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('NameOfStaticBlock')->toHtml() ?>

When you refresh your home page, THIS IS WORKING (or your html) should appear in the position specified.