{"id":2108,"date":"2012-02-15T11:47:07","date_gmt":"2012-02-15T11:47:07","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=2108"},"modified":"2012-02-23T10:58:40","modified_gmt":"2012-02-23T10:58:40","slug":"opencart-and-support-for-javascript-disabled","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2012\/02\/opencart-and-support-for-javascript-disabled\/","title":{"rendered":"Opencart and support for javascript disabled"},"content":{"rendered":"

I realised recently that my Opencart installation<\/a> does not allow users to checkout if they have javascript disabled. It’s a little unfortunate because there’s no warning of this at all to the user – you can fill your basket OK, and then you’re stuck. This is a shame since otherwise I like Opencart, it’s pretty easy to configure once you’ve got the hang of its MVC architecture. These<\/a> threads<\/a> on the Opencart forum make it look like this isn’t likely to change.<\/p>\r\n\r\n

Now, not many people are going to have their js disabled, but do we really want to disenfranchise the few, or even one, that do\/does? I think not.<\/p>\r\n\r\n

There are two situations where Opencart uses javascript on navigation. The first is for a simple link:<\/p>\r\n\r\n

<a onclick=\"location = '<?php echo str_replace('&', '&', $back); ?>'\" class=\"button\"><\/pre>\r\n\r\n
This is simply fixed by making this:<\/p>\r\n\r\n
<a href=\"<?php echo str_replace('&', '&', $back); ?>\" class=\"button\"><\/pre>\r\n\r\n
The other situation is slightly more complex and happens where forms need to be submitted. As a default Opencart has, for example:<\/p>\r\n\r\n
<a onclick=\"$('#payment').submit();\" class=\"button\"><span><?php echo $button_continue; ?><\/span><\/a><\/pre>\r\n\r\n
The quick and dirty solution is to replace this link with a “normal” input<\/code> tag of type submit<\/code>. However, these are more difficult to style. Conseqeuntly, I’ve amended the html to:<\/p>\r\n\r\n
<span class=\"button hide_js\"><input class=\"hide_js\" type=\"submit\" value=\"<?php echo $button_continue; ?>\"\/><\/span>\r\n<a onclick=\"$('#payment').submit();\" class=\"button show_js\"><span><?php echo $button_continue; ?><\/span><\/a><\/pre>\r\n\r\n
with some simple jQuery, which I’ve added to ajax_add.js:<\/p>\r\n\r\n
\t$('.hide_js').hide();\r\n\t$('.show_js').show(); <\/pre>\r\n\r\n
and this css<\/p>\r\n\r\n
show_js{display:none}<\/pre>\r\n\r\n
So, for a user without javascript, the link which relies on javascript is hidden by the css and a simple input button is used instead. For a user with javascript enabled, on page load the input button is hidden and the javascript link displayed. Using OC 1.4.9.5 I found one situation where the form does not extend to include the div which contains the button – I just extended it so it did.<\/p>\r\n\r\n
With a bit of judicious css, the “non javascript” buttons can be virtually identical (not pixel perfect) to the javascript ones – that’s why I’ve wrapped the inputs in the span as shown above, and then extending the styling used for .button span<\/code> to include .button input<\/code>.<\/p>\r\n\r\n
Update 23 February:<\/strong> I subsequently spotted another issue with javascript disabled which is that it’s impossible to select the zone in an address since this is populated only by javascript. Fixing this is slightly more complex – see this post<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"
I realised recently that my Opencart installation does not allow users to checkout if they have javascript disabled. It’s a little unfortunate because there’s no warning of this at all to the user – you can fill your basket OK, and then you’re stuck. This is a shame since otherwise I like Opencart, it’s pretty […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[28],"class_list":["post-2108","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build","tag-opencart"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=2108"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/2108\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=2108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}