Virgo Web Design Blog

5 Awesome Enhancements you Can Apply to your Hikashop E-commerce Store

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.

hikashop cart dropdown

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:

hikasho products height

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: 

hikashop products fixed

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: 

hikashop acymailing config

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:

hikashop auto submit

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):

hikashop payment view

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!

A Screensaver Built in Pure Javascript, HTML, and ...
10 Great Web Design Trends of 2014
 

Comments

No comments made yet. Be the first to submit a comment
Guest
Monday, 17 December 2018

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

5000 characters left

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

Contact

  • Phone:
    (224)388-0250
  • E-Mail:
    This email address is being protected from spambots. You need JavaScript enabled to view it.

SUBSCRIBE TO OUR NEWSLETTER

© Copyright Virgo Web Design. All right reserved.

Signup for our newsletter!