Creating a mobile version of an Opencart shop – 3

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:

Reworked home page Reworked category page Product page Reworked My Account page

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.

Tags: ,

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.