Skip to main contentSkip to footer

Popup the shopping cart on clicking the Add to Cart button on Opencart

Rupak Nepali
Share:
Popup the shopping cart on clicking the Add to Cart button on Opencart

We are modifying the opencart eCommerce platform, the module popup the color box on clicking the add to cart button. It shows the mini shopping cart as shown in the mouse hover. This helps with confirmation of adding and easy navigation to the checkout or shopping cart and some visual effect to the site.

You can easily download the file from below and it is free. The Version I have tested for this module is 1.5.4.1

Right now two files are overridden common.js and the product.tpl. If you have customized these files then you have to add one line to each file manually.
Find the following line and insert it

	$.colorbox({href:"index.php?route=module/popupcart"});

At common.js
Find the function addToCart(product_id, quantity) { and below the following line insert the above line:

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

Likewise at product.tpl
Find the line $(#button-cart).bind(click, function() { and just after this line finds the line below and insert the code just below this.

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

Enjoy the module and let me know if there is something that I need to do to improve it.

Comments

Join the conversation and share your thoughts

Leave a Comment

Your comment will be reviewed before publishing.

Be the first to comment on this post!

Innovation

Let's Make Something Amazing Together

We always provide our best creative ideas at the highest level. Tell us about your project and we will make it work.

InnovateBringing innovative solutions to complex problems
AutomateStreamlining processes through automation
DominateLeading the market with exceptional results
Build Smarter and Launch FasterEfficient development for rapid deployment