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 :
modules\mod_j2store_cart\tmpl\detailcartonhover.php
to :
templates\[Template]\html\mod_j2store_cart\detailcartonhover.php
 
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>
</form>
 
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){
	
	jQuery(function($){

			$('#deleteLoading-'+id).css("display", "inline-block");
			// process the form
			$.ajax({
				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");
						doMiniCartErsalo();	
				   }
			})
		});
}

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

		$.ajax({
			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() {							
								$(this).html(value);
								$(".j2store-cart-item-box").fadeIn();
							});
						}
					});
				}
			}

		});
	
})(j2store.jQuery);
	
}​
 
 
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;
	display:none;
	width:20px;
}

 

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!

Print
Cron Job Starts