Add "ajax remove" to J2store minicard module

Add "ajax remove" to J2store minicard module

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!

Comments (0)

There are no comments posted here yet

Leave your comments

  1. For auto publish the comment you need to login first.
Attachments (0 / 3)
Share Your Location

Print