5 Awesome enhancements you can apply to your hikashop e-commerce store

Hikashop is a pretty decent e-commerce store, with plenty of great capabilities. Unfortunately, it does have some quirky behavior (*ahem* such as its checkout process) that can get a little frustrating. Furthermore, there are some lacking features that may not be entirely necessary, but said features would be a really valuable asset to any e-commerce website. Especially considering how hard it is to convert shoppers into customers, you definitely want to be ahead of the game to boost your sales.

In this article I’ll be discussing some of the enhancements that I have been progressively applying to the different Hikashop e-commerce websites that I’ve been building. Many of these modifications will require some HTML, CSS, or Javascript chops, but regardless of your capabilities, make sure not to add these into a production site (take a backup and deploy it somewhere else, then implement the changes to your production site when the changes are finished and tested). Be sure to thoroughly test any of these solutions across different browsers and devices to make sure they aren’t breaking any functionality.

Let’s get to it!

1. Quick View Cart Drop-Down

One helpful feature of Hikashop is that it uses AJAX commands when adding products to cart, and updates the cart HTML when finished. The stock installation of Hikashop allows you to publish a cart module, but by default it is something that is always shown. Additionally, adding to cart will either keep you on the same page, take you to checkout, or display an add-to-cart popup notice.

Most of the big e-commerce shops use a cart icon that you can hover or click on to display products in your cart. Luckily we can add this kind of option to hikashop with some crafty HTML, CSS and Javascript. A finished example of this functionality can be viewed here.

I typically use a click even for the cart to display, but this can also work as a hover event.

To get the cart to work this way, you’ll have to either modify the existing module or publish the module in a hidden position, then use javascript to display it when you click or hover over your cart icon. The containing HTML of the cart will have to be positioned relative with CSS, while the HTML container will be positioned absolute over it. I would provide an example, but unfortunately every template is different and any code I give may not be relevant to your website.

One crucial component to getting this to function properly is editing the javascript function that adds the items to the cart. For some reason, Hikashop decided to bury this file in the administration folder, so any updates to Hikashop will delete these changes (just remember to re-implement the code after an upgrade).

Navigate over to /administrator/components/com_hikashop/helpers/cart.php, and around line 300 you will find this code (the line may change as updates are added to Hikashop):

new Ajax(url, {method: "get", onComplete: completeFct}).request();
			}catch(err){
				new Request({url: url, method: "get", onComplete: completeFct}).send();
			}
		}		
		jQuery("html, body").animate({ scrollTop: 0 }, "slow");	
		setTimeout(function() {
			  jQuery("#hikashop_cart_module").slideDown();
		}, 600);		
		
		return false;

2. Adding a Shopping Cart Counter

This is another neat shopping cart addition that you can add is a counter which will display how many items are in your cart. To do so, you will need to add this javascript:

jQuery(document).ready(function() {
getCartCount();
});
function getCartCount() {
var currentcount = 0;
jQuery(".hikashop_cart_module .hikashop_product_quantity_field").each(function() {
itemQuant =  parseInt(jQuery(this).val(), 10);
currentcount += itemQuant;
});
jQuery(".cart-count").text(currentcount);
}

Then, place an element with the class “cart-count” where you want the counter to appear for your cart.

Finally, in the same sections of code referenced in the quick view cart dropdown tutorial above ( for the file in /administrator/components/com_hikashop/helpers/cart.php), modify the javascript to call the getCartCount function:

jQuery("html, body").animate({ scrollTop: 0 }, "slow");	
		setTimeout(function() {
			
			  jQuery(".hikashop_cart_module #hikashop_cart_module").slideDown();
			  
		}, 600);		
		getCartCount();
		return false;

It's worth noting that this enhancement is not exactly foolproof. The function gets triggered the command is activated to update the cart, so if someone started clicking on add to cart like a madman, this resulting count in the cart may not match up. However, the function also gets triggered when the page gets loaded, so navigating to any other page will get the correct count again.

3. Keeping your Product Listings the Same Height

Products lined up in a row that have different lengths in their name or description may cause the formatting to look a little unpleasant:

This may not be an issue for some e-commerce stores, but it certainly doesn’t hurt to keep the products in each row the same height, like here: 

This feature is pretty simple to add, just add this javascript to your code:

jQuery(document).ready(function() {
jQuery('.hikashop_products .thumbnails .hikashop_product').each(function() {
 if (jQuery(this).hasClass('hikashop_product_row_' + productCounter)) {
       if (!jQuery(this).find('.hikashop_product_name').hasClass('heightFormatted')) {
	resizeThumbnails(productCounter);
       }
 } else {
 	productCounter++;
}
});
});

function resizeThumbnails(counter) {
var elementHeights = jQuery('.hikashop_product_row_' + counter + ' .hikashop_product_name a').map(function() {
return jQuery(this).height();
 }).get();
 var maxHeight = Math.max.apply(null, elementHeights);
jQuery('.hikashop_product_row_' + counter + ' .hikashop_product_name').height(maxHeight);
}

This function will loop through the product listing rows and adjust the height accordingly. This will only be useful for a Hikashop product listing of divs, but that’s a pretty common occurrence so I’m sure this will be useful for many Hikashop e-commerce shops.

4. Setup Automated Cart Abandonment E-mails

So the last two enhancements were pretty technical, but this one is relatively easy to setup. Thanks to Hikashop’s integration with Acymailing (although you will need the enterprise edition of Acymailing to set this up), you can configure your website to automatically e-mail customers who made it to checkout but didn’t make a purchase. As an added bonus, you can also include dynamically generated coupon codes. These coupon codes can also have a set quota so that they can only be used once.

Side note: Virtuemart users can also apply a similar setup

You’ll need to setup your e-mail template and automated filter. I won’t go into details on how to do this since Acymailing has a pretty good tutorial. When creating your e-mail template, there’s also a handful of tags that can be inserted, which can be used for coupon codes or links to products/categories. The documentation for that is also on Acymailing’s website.

Now, I deviated a little bit from that configuration because I wanted to actually setup a filter that would send out these e-mails to shoppers that registered but didn’t purchase (the Acymailing documentation tells you how to setup for orders that were placed but not confirmed). First, you’ll want to make sure that users that register are applied to your newsletter. Second, the filter you will want to set is for “Hikashop Customers” rather than “Hikashop Reminder”. Lastly, create a second condition that will exclude subscribers that registered over 24 hours ago (otherwise you will start spamming your customers with duplicate emails). Here’s how I have this configured: 

Now, anyone that abandoned the cart in checkout will receive an e-mail of your choice!

5. Dealing with Hikashop’s Pesky Auto-submit Feature in Checkout

I define a true singe page checkout feature to have a checkout process which uses AJAX commands to apply updates without reloading the page, while updating the HTML once the results are returned. For whatever reason, Hikashop chose to skip the latter part of that statement; they use AJAX throughout checkout, but every change requires a page refresh.

This process brings me to Hikashop’s Auto-Submit option in the checkout configuration:

A fix for this is actually rather simple.

In your administrative panel, navigate over to Components > Hikashop > Views  and select the Front End view for checkout called payment (see below):

Around line 34 there’s an onclick attribute that you can change the code from this:

if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){
					$checked.=' onclick="this.form.action=this.form.action+\'#hikashop_payment_methods\';this.form.submit(); return false;"';
				}

To this:

if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){
					$checked.=' onclick="return false;"';
				}

And that’s it. This change will also not be over-written with Hikashop upgrade.

Conclusion

Most of these enhancements were rather technical, but if you're an aspiring developer or just really want to add these features to your e-commerce site, I highly recommend giving it a shot. Otherwise, you may want to contact a developer to get these features implemented. I hope this article helps you with your Hikashop endeavors, and encourage you to head down to the comments section if you have anything else you would like to add that you find useful additions to your Hikashop store!