Simon Battersby

Nearly finished this stage now I think. I’ve now worked through all the pages (I think…) and updated them. This morning I realised that although the site works mostly OK without javascript, without it the zones (counties in the UK) are not populated, so it’s impossible to enter an address. Ugh. Resolving this needs the following adding to /catalog/controller/account/create.php, /catalog/controller/account/address.php, /controller/checkout/address.php and /controller/checkout/guest_step_1.php

$this->load->model('localisation/zone');
		
$this->data['zones'] = $this->model_localisation_zone->getZonesByCountryId($this->data['country_id']);

And the following editing in /catalog/view/theme/[your theme]/template/create.tpl, /catalog/view/theme/[your theme]/template/address.tpl, /catalog/view/theme/[your theme]/template/address.tpl and /catalog/view/theme/[your theme]/template/guest_step_2.tpl:

<select name="zone_id">
   <option value="FALSE"><?php echo $text_select; ?></option>
   <?php foreach ($zones as $zone) { ?>
     <?php if ($zone['zone_id'] == $zone_id) { ?>
     <option value="<?php echo $sone['zone_id']; ?>" selected="selected"><?php echo $zone['name']; ?></option>
     <?php } else { ?>
        <option value="<?php echo $zone['zone_id']; ?>"><?php echo $zone['name']; ?></option>
     <?php } ?>
   <?php } ?>          
</select>

(It would be nice if the code used functions a little more for repeated things like the address form.) This then allows selection of zone even with javascript disabled. There’s still a much more minor problem, which is that if the country is changed, with javascript disabled the zone list is not refreshed. This resolves itself when the form is submitted since the zones are then correctly populated by the posted data, but is less than perfect. We get very few orders from outside the UK anyway, so I’m going to park that one for now. The solution, I think, would be to add a button to let the user manually refresh the page, minus the validation, after changing the country.

Anyway, back to the mobile site specifics. I showed it to the client (to whom, coincidentally, I’m married…) yesterday, and she is happy so far. Hoorah! Next step is to test it with some tame users I think.

Concerns I have at the moment: not sure about scrolling the menu on the home page; I wonder whether clicking through from the category page to the product page is too difficult (although in fact most of our sales come direct from the category page not the product page); think the general text might be a bit small. We’ll see.

So, the mobile pages are now live! You can see the live site here. Please bear in mind this is a live site, please don’t enter customer data unless you actually want to buy something!

I’ve put together a summary of the changes made to the theme, plus the files here.

With a bit of help from some friends, I’ve now had the site tested on a couple of real mobile devices, with pretty positive feedback. The exception however was the button styling. The image below shows the button on the main (non-mobile) site, then the button on the mobile site, and finally the button as displayed on an iPod:

My first thought was that somehow, the image from the main site was being superimposed on the coloured background from the mobile site. But it wasn’t anywhere in the css. Very puzzling. I finally twigged that it isn’t the main site background image, it’s the default input button used by Mobile Safari unless explicitly removed. Applying this css got rid of it:

input{-webkit-appearance:none;}

Needless to say, this problem didn’t show up in any emulator I used….

Next step I think will be to launch this and invite comments from users. Should be interesting.

I should have said, if anyone’s reading this and would like to have a look at the test site, it’s currently available at:

m.testshop.simonbattersby.com

Note you won’t be able to checkout at the moment as it’s pointed at the Paypal sandbox. At the moment at least I’m more concerned with the usability of the site anyway. If you do view the site then any and all comments are welcome. If you see a problem, do let me know – it would be helpful to know the model of phone with which you viewed it. Thanks!

OK, so today I’ve reworked the header links to include a Home link but remove the Logout link – I’ve moved the latter to sit under My Account.

I’ve also redone (again..) the category page, having given up trying to fit everything onto one line, quite pleased with the result.

I also copied across all the products from the base store to the mobile store, using, for example, this SQL:

CREATE TEMPORARY TABLE tmp SELECT * FROM oc_product_to_store WHERE store_id = 0;

UPDATE tmp SET store_id=2 WHERE store_id = 0;

DELETE FROM oc_product_to_store WHERE store_id=2.

INSERT INTO oc_product_to_store SELECT * FROM tmp WHERE store_id = 2;

This needs repeating for oc_category_to_store as well. My initial thoughts on categories was to create some different categories to avoid masses of scrolling, but I’m thinking in fact that this may be handled just as well by the inbuilt pagination.

I’ve also added a “back to category” link to the product page and restyled that, removing all the tables.

And finally, styled the home page links so they look a bit nicer. Not sure at the moment whether having those links full width will get in the way of scrolling the page up and down. Results below:

Looking at these screenshots I realise I now have space to make the button on the category page larger again, also wonder whether the links on the My Account page should be buttons like the home page.