Web Design and Build

Opencart 1.5 Mobile Theme – 1 Last updated:28 June 2012

Following on from earlier efforts to create a mobile theme for my existing Opencart 1.4.9.5 store, I’m currently working on creating a mobile theme that will work with Opencart 1.5.

I’m trying to be a little more comprehensive this time and account for most options. The biggest challenge so far is the Opencart 1.5 checkout page which runs on about 840 lines of jQuery (ugh!) on the default theme. I spent some time last week investigating whether this could be made to work without javascript – and have concluded that while this is possible it’s very very unpleasant, so have accepted that I’ll have to assume javascript in this case (unlike 1.4.9.5 where it is relatively straightforward to make the use of javascript an enhancement rather than a necessity). I spent this morning functionalising the jQuery somewhat – so the five separate pieces of code to display name and address field validation errors are now replaced by a single function. I still have 690 lines of javascript though…

At the moment this exercise is of somewhat academic exercise, but if a mobile theme is of any interest to you, let me know via a comment below.

jQuery fadeOut in Firefox 10 Last updated:20 June 2012

Having an odd week this week.

While viewing a client’s site today in Firefox 10 I noticed that the crossfade on the site, loaded just before Christmas, wasn’t quite right – the images should crossfade into one another (using this script), but what happened was the image faded to black and then the next image appeared. I observed the same effect on the malsup cycle plugin, used elsewhere on the site.

Now the same script works fine in Opera 11 and Chrome, and it works fine in Firefox 10 on my demo page listed above. So what’s the difference? The only difference is that one image has a border, and one doesn’t. Add the border and the crossfade works fine, take it away and it doesn’t. Here’s a cut down illustration – the left hand image has a border and fades to transparent, the right hand image has no border and fades to black then transparent.

Having checked a couple of other sites I’ve built, if the image is wrapped in div, all seems to be OK as well, it’s just an issue with images.

This is only an issue in Firefox 10 as far as I can see. FF9 is fine.

I’ve logged this as a bug with jQuery. If you’ve come across the same issue please leave a comment below, or, if you’ve got a spare second and Firefox 10, have a look at the test page and let me know if you see the same thing. Apparently it’s OK on Mac/OS X. I’m on W7 Pro 64-bit.

Update 10 February Thanks to Oblik for the updates below – this is reported as a Firefox bug as well. It also seems that applying background-color to the image also solves the problem. I’ve further noted that this does not affect a different machine running W7 Home with FF10 – the links suggest it may be related to the graphics card.

Update 18 February This looks like it’s mostly likely to get resolved by a Firefox update to me. I’ve noticed the problem today on another couple of sites. It’s now being logged under this ticket.

Update 24 April Still not fixed in FF11…I’ve noticed the problem a lot on a wide variety of sites. Looks like it might be scheduled for a fix in FF13.

Update 20 June Fixed in FF13!!

WordPress wp_ajax returning 0 error Last updated:19 June 2012

This morning I spent a little time constructing an ajax call from a front-end page (not an admin page) using wp_ajax. As is my wont, I tested this in Firefox and all was well. I used the WP codex.

Then I tried it in Opera and it failed, no response whatsoever, just a 0 in the ajax response. Seemed odd that Opera should have a problem, tried it in Chrome, same thing. Lots of Googling later, saw loads of similar questions being asked, no answers…

I then looked at the code in wp_ajax, and all became clear…

I had entries in my functions.php as follows:

 add_action('wp_ajax_myfunction', 'myfunction');
 
 function myfunction() {
    //stuff
 }

So if I pass an action of ‘myfunction’ to wp_ajax it should call the hook at the top of the above code, which in turn calls myfunction(), right? Only if you are logged on to WordPress at the time! If you aren’t logged in, wp_ajax calls the hook wp_ajax_nopriv_myfunction. And that’s why it worked for me in Firefox, because I was also logged on through Firefox. Nowhere is this mentioned in the codex, that I can see.

Having identified this it’s then simple to add another hook to your functions.php:

 add_action('wp_ajax_nopriv_myfunction', 'myfunction');

Hope this saves someone an hour or so…

How to add an image to a page in Drupal 7 Last updated:12 June 2012

About three years ago I tried messing about with Drupal to investigate its possibilities. After several hours trying to add an image to a page I gave up.

Today I tried again, using Drupal 7 this time. Here’s what I did…

  • Loaded Drupal
  • Created a new “Basic Page” and added some words….fine so far
  • No way of adding image…checked Modules, nothing likely
  • Went to Add Module, found WYSIWYG editor.
  • Downloaded module to PC, uploaded and enabled module
  • Went back to Add Content, no editor visible….
  • Googled…
  • Went into WYSIWYG Configuration, enabled various buttons including Image
  • Back into Add Content, Image Button, Hurrah!!! No upload capability…
  • Searched modules, found likely looking Media module
  • Downloaded module to PC, uploaded and tried to enable module, couldn’t, it needs another module called cTools
  • Downloaded cTools, uploaded and enabled it
  • Enabled Media modules
  • Back into Add Content, absolutely no joy whatsoever
  • Uninstalled Media and cTools module
  • Googled…
  • Downloaded IMCE and IMCE WYSIWYG modules, uploaded and enabled
  • Back into Add Content, still no luck
  • Back into WYSIWYG configuration, enabled IMCE button
  • Back into Add Content, new button available, it works….
  • Laughed hysterically for several minutes
Drupal screenshot with an image

Ta daaaa…

This whole process took marginally less than an hour. How can it possibly be this difficult? I consider myself pretty technically savvy, and it takes me this long? Cannot imagine letting a client loose on this.

So, for anyone who may have stumbled across this, here’s what I should have done:

Hope this helps someone…

Corollary about a week later: Tried to log on again for some further experimentation and repeatedly got “Access Denied” to the login page (as in, didn’t even get as far as viewing the login fields). Spent about half an hour reading posts from others on the same problem, with no success, then just deleted the entire installation. I’ll stick with WordPress…

Creating a mobile version of an Opencart shop – 5 Last updated:16 March 2012

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.