I have a habit of browsing through StackOverflow, freelancer, and a bunch of other support sites looking to see what other people are struggling with in hopes of finding something worthwhile to write on.

Tonight I found an interesting little listing on freelancer that was referencing BigCommerce.

“We’d like to hide pricing from our homepage, but still have it show once a customer clicks on a specific item”.

One of the things I love about working with BigCommerce and Shopify is that it’s super easy to make a store owners life 100 times easier with just some basic jQuery / Javascript.

So with that in mind here’s the most basic structure of the code.

jQuery(document).ready(function() {
	jQuery(".price-container").hide();

	jQuery( "#target" ).click(function() {
	  jQuery(".price-container").fadeIn('slow');
	  console.log('Target item was clicked. Show the prices.');
	});
});

This automatically hides all objects on the page that have the class “price-container”.
When the object with the id of “Target” is clicked it then shows the prices that we hid on page load.

While this is all fine and dandy we really should make it a little bit more complex, after all, we don’t want to make the customer click this object EVERY time they visit the page. Especially if they’ve already clicked it. So to handle that let’s introduce some cookies.

jQuery(document).ready(function() {
	var cookie = getCookie('showprices');
	showOrHidePrices();

	function setCookie(key, value) {
	    var expires = new Date();
	    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
	    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
	}

	function getCookie(key) {
	    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
	    return keyValue ? keyValue[2] : null;
	}

	function showOrHidePrices() {
		var cookie = getCookie('showprices');
		if (cookie == true) {
			jQuery(".price-container").fadeIn('slow');
			console.log('Cookie is set, so show prices.');
		} else {
			jQuery(".price-container").hide();
			console.log('Cookie has not been set, so hide prices.');
		}
	}

	jQuery( "#target" ).click(function() {
	  setCookie('showprices', 1);
	  showOrHidePrices();
	  console.log('Target item was clicked. We Set the cookie and called the show / hide function.');
	});
});

This still automatically hides all the objects on the page, but only if the cookie isn’t set. If the cookie is set, it lets the price stay visible. Now when the customer clicks on the target, it not only shows the prices but sets a cookie so the next time they visit the prices will show.

Here’s an interactive mockup using the code provided above. Oh and if you are using this in a production enviroment don’t forget to remove the console logs!

If you have any interesting eCommerce related project’s you’d like me to write about feel free to reachout! Likewise if you have a better solution then the one I provided please share it!

There are currently no comments.