OpenCart – Send Post via AJAX

AJAX

I have already done another article on AJAX and what it is so I will just briefly tell you what it’s going to be doing and the benefits of using it. Ajax allows you to send an HTTP POST to a server side script while staying on the same page. Yes, there will be no visible page refresh. You will see the information update but no refresh. This is very helpful and time saving. You do however still need a good internet connection or else it won’t work. Some people thing that since there is no refresh that you don’t need internet well….this is not true.

The AJAX function we will be using as an example is located here:

Find the following function towards the bottom of that page:

$('#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',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();

			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}

                if (json['error']['profile']) {
                    $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
                }
			} 

			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

				$('.success').fadeIn('slow');

				$('#cart-total').html(json['total']);

				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});

The lines within that function that you will be changing to meet your needs are these:

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',

You’ll now want to amend the data: to pick up your own form variables and make sure that the url: points towards your custom server side PHP script. You’ll be using the JSON library that is already installed and ready to use. There are plenty of server side scripts already in the opencart framework that you can mimic including the one at checkout/cart/add’ which is the cart.php file

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

2 Comments on OpenCart – Send Post via AJAX

  1. Cookiez says:

    I’m trying to create a dropdown list for Opencart product option, but i can’t pass the selected value to the ajax data. Can you explain me how is this possible? I’m getting the value from the checkbox, but I can’t seem to implement it with the values.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 × = 16

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>