Debugging in OpenCart, MVC, JSON, Ajax

The primitive way of debugging php code often consists of combining checking the php error log and writing results out to the browser.

But in OpenCart there are many cases where neither of the above approaches will work because

  1. OpenCart uses the MVC Design Pattern in which the scripts which handle the data are not the same as those which display it to the browser.
  2. Much of the data is passed via jQuery, Ajax, JSON so errors may bot even be written out to the php log, let alone the browser.

So I wrote (adapted) a little function to simply write out the errors that I would have written to the browser to a text file (in this case made it a php file so it would open in TextWranger editor as opposed to TextEdit).


public function write_to_file($message){
        $handle = fopen("/Applications/MAMP/logs/open_cart_reader.php", "a+");
        fwrite($handle, "\nMessage:\t " . $message);
        fclose($handle);
    }

So you can simply use write_to_file(“some message “. $some_var) or more specifically, since OpenCart is Object Oriented and you need to use the syntax for calling a method inside of a class, $this->write_to_file(“some message “. $some_var) and check the check file for it’s results.

As far as debugging Ajax, JSON I’m using a combination of alert(“message” + var) and console.log(“message” + var) where the console can be viewed in Google Chrome under View->Developer->JavaScriptConsole and supposedly can be seen with Firebug as well.

Had to add to the JavaScript code within an OpenCart call based on a StackOverflow thread and found that a JSON parsererror was causing the problem and further that it was simply an html error coming back as responsetext causing JSON parser to hiccup.


$('#button-cart').bind('click', function() {
	$.ajax({
            
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		beforeSend: function() {
                console.log(1);
                console.log(2);
            },
        error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            console.log(x.responseText, t, m);
        }
    },
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			console.log(3); 
			if (json['error']) {
			    console.log('error' + err); 
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('' + json['error']['option'][i] + '');
					}
				}
                
                if (json['error']['profile']) {
                    console.log('error profile' + err); 
                    $('select[name="profile_id"]').after('' + json['error']['profile'] + '');
                }
			} 
			
			if (json['success']) {
			    console.log('success'); 
				$('#notification').html('');
					
				$('.success').fadeIn('slow');
					
				$('#cart-total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});

Good times.

One response to “Debugging in OpenCart, MVC, JSON, Ajax

Comments are closed.