Add "ajax remove" to J2store minicard module

Add "ajax remove" to J2store minicard module

blog Hits: 1019
Minicard is a module in J2store that shows basket products by mouse over. Unlike Virtuemart modules, J2store hasn't an Ajax remove button. In this article we suggest a simple way (in 4 steps) to add it without source hacking.
1) First of all you need to make a copy of J2store minicard module from below path :
to :
Note that [Template] is the name of your template. Also you need to make a folder with name mod_j2store_cart if it doesn't exist in html folder.
2) Open the new file detailcartonhover.php and goto line 84 : 
<a class="cart-remove text-error" href="/<?php echo JRoute::_('index.php?option=com_j2store&view=carts&task=remove&cartitem_id='.$item->cartitem_id); ?>" > <i class="fa fa-remove"></i></a>
and replace it with below codes :
<form onsubmit="removeItemAjax(<?php echo $item->cartitem_id ?>,'<?php echo JUri::base();?>');return false;" >
	<input type="hidden" class="form-control" id="productId-<?php echo $item->cartitem_id ?>" value="<?php echo $item->cartitem_id ?>">
	<div class="deleteLoading" id="deleteLoading-<?php echo $item->cartitem_id ?>">&nbsp;</div>
	<button type="submit" id="deleteButton-<?php echo $item->cartitem_id ?>" ><i class="fa fa-remove"></i></button>
3) Now we need to define removeItemAjax(). So just add below codes to a js file of your template like  [template]\js\custom.js :
//Ajax-remove product from minicard module
function removeItemAjax (id,base){

			$('#deleteLoading-'+id).css("display", "inline-block");
			// process the form
				type        : 'GET', // define the type of HTTP verb we want to use (POST for our form)
				url         : base+'index.php?option=com_j2store&view=carts&task=remove&cartitem_id='+ id, // the url where we want to POST
				success: function(data)
					    $('.cart-item-count').css("background", "yellow");

function doMiniCartErsalo() {
(function($) {		
		var murl = j2storeURL
			+ 'index.php?option=com_j2store&view=carts&task=ajaxmini';

			url : murl,
			type : 'get',
			cache : false,
			contentType : 'application/json; charset=utf-8',
			dataType : 'json',
			success : function(json) {				
				if (json != null && json['response']) {
					$.each(json['response'], function(key, value) {
						if ($('.j2store_cart_module_' + key).length) {
							$('.j2store_cart_module_' + key).each(function() {							

4) And the final step is about CSS loading gif. As previous step add below codes to a css file like [template]\css\custom.css. Check that loading.gif be in [template]\images path.
.deleteLoading {
	background:url('../images/loading.gif') no-repeat;


If you do all these steps correctly, after a complete site refresh (CTRL+F5) you can see new Ajax remove button in J2store minicard. Try a test yourself in live j2store template. Add a product to basket and delete it from minicard dropdown!

Cron Job Starts