Add To Cart Function on OpenCart to a Button


If you want to enable Add to Cart function on a button, you simply follow these.

Code for button below

 <input type=”button” value=”<?php echo ‘ADD TO CART’; ?>” onclick=”addTOCART(‘<?php echo $product[‘product_id’]; ?>’);”  /> 

Code for JavaScript effect below

<script type=”text/javascript”>
function addTOCART(product_id, quantity) {
quantity = typeof(quantity) != ‘undefined’ ? quantity : 1;

$.ajax({
url: ‘index.php?route=checkout/cart/add’,
type: ‘post’,
data: ‘product_id=’ + product_id + ‘&quantity=’ + quantity,
dataType: ‘json’,
success: function(json) {
$(‘.success, .warning, .attention, .information, .error’).remove();

if (json[‘redirect’]) {
location = json[‘redirect’];
}

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’);
try {
$(‘#cart-total’).html(json[‘total’]);
}
catch(err) {
console.log(err.message());
}

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

$(“.heading”).animate({backgroundColor: “#FFFFFF”}, ‘slow’);

$(“.cart_arrow”).attr(“style”, “display: block;”);

$(“.heading”).animate({backgroundColor: “#585858”}, ‘slow’);

}
}
});
}</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s