Menu

5 jQuery snippets for your e-commerce website

Last modified 2024-01-13 Posted by Olaf Lederer

jQuery is a popular JavaScript library which is used for many web applications. A popular example is the content management system WordPress. While using jQuery you need to write less code, writing functions is less complex and there are a lot of plugins you can use for free in your web application. Even if you write all JS code by yourself, you need to less code to create the most powerful features for your website. The jQuery snippets on this website are a good example how to build quick dynamic functionality for your (e-commerce) website. If you’re in hurry check the jQuery demo page or download the code here.

This is a rewrite from an article I’ve post before on Web Development Blog. All code, the demo and the information has got an update.

Populate a SELECT menu

One of the most powerful jQuery functions is the Ajax. function. This example shows how-to populate a second select menu based on the option from the first select menu. This is an feature that becomes very useful on your product pages.

Just in case we have this select menu with these main categories (colors):

<form>
	<label for="category">Choose color: </label>
	<select id="category" name="category">
		<option value="green">Green</option>
		<option value="blue">Blue</option>
		<option value="red">Red</option>
	</select>
	<span id="subcat"></span>
</form>

If someone has changed the color for this select menu, the form shows the available size in inside the SPAN element with the ID “subcat”. To do this we use this jQuery snippet that makes an Ajax request to a PHP file called “getSubCat.php”. After the select menu is changed a loading image will show up (in case of slow Internet connections), the PHP script is called and the sub-select menu becomes visible.

$(document).ready(function() {
	$('#category').change(function() {
		var category = $(this).val();
		$.ajax({
			type: 'GET',
			url: 'getSubCat.php',
			data: 'category=' + category,
			dataType: 'html',
			beforeSend: function() {
				$('#subcat').html('<img src="loader.gif" alt="loading..." />');
			},
			success: function(response) {
				$('#subcat').html(response);
			}
		});
	});
});

Create a PHP script with the name getSubCat.php and copy/paste the following code:

<?php
$data = array(
	'green' => array('S', 'M', 'L', 'XL', 'XXL'),
	'blue' => array('L', 'XXL'),
	'red' => array('M', 'L', 'XL', 'XXL')
);
// Normally you receive this data from the database
if (!empty($_GET['category'])) {
	if (array_key_exists($_GET['category'], $data)) {
		echo '
	<select id="subselect" name="'.$_GET['category'].'">';
		foreach ($data[$_GET['category']] as $key => $val) {
			echo '
		<option value="'.$key.'">'.$val.'</option>';
		}
		echo '
	</select>';
	} else {
		echo 'Array-key doesn\'t exist';
	}
} else {
	echo 'Invalid request';
}

This is a simple example on how you can use the jQuery Ajax function, the Ajax function has much more options which makes it a very flexible function.

Disable/enable the form submit button

On pages with a registration or payment/order form, you like to treat the visitor to accept some terms of service before he/she can post the form. A very nice function to do this is, to disable the submit button until the visitor has clicked a check box (like: Click here to accept the TOS). The following snippet will enable/disable the submit button if the check box element is checked or not.

$('#accept').click(function() {
	if ($('#buybtn').is(':disabled')) {
    	$('#buybtn').removeAttr('disabled');
    } else {
    	$('#buybtn').attr('disabled', 'disabled');
    }
});

Together with this function, we use the following HTML for the submit button:

<input id="accept" name="accept" type="checkbox" value="y" /> I accept the conditions!
<input id="buybtn" disabled="disabled" name="Submit" type="submit" value="Send" />

Simple photo gallery with thumbnails

If you’re looking for a light-weight photo gallery function, than is this jQuery snippet for you. The function works very simple: If the visitor has clicked a thumbnail the value from the “href” attribute is passed to the “src” attribute from the bigger image. Thats all, check the jQuery code and of course the HTML code example.

$('#thumbs a').click( function() {
	var changeSrc = $(this).attr('href');
	$('#detail').attr('src', changeSrc);
	return false;
});
<div class="container">
	<img id="detail" src="img/1.jpg" alt="bigger view" />
</div>
<div class="thumbs"> 
	<a href="img/1.jpg"><img src="thumbs/1.jpg" alt="thumb 1" /></a>
	<a href="img/2.jpg"><img src="thumbs/2.jpg" alt="thumb 2" /></a>
	<a href="img/3.jpg"><img src="thumbs/3.jpg" alt="thumb 3" /></a>
</div>

Show/hide HTML elements based on a selection

jQuery has great functions to show or hide HTML elements. This example is about to show a list of credit cards whenever the radio button with value “creditcar” is checked. The script checks which radio button is checked and shows the SELECT menu on “true” or hides the list on false.

$('#payments input[type=radio]').click(function() {
	if ($(this).val() == 'creditcard') {
		$('#cards').show();
	} else {
		$('#cards').hide();
	}
});

The HTML snippet has a radio group and a DIV container which becomes visible when the radio button with the value “creditcard” is checked.

<ul id="payments">
	<li>
		<input id="creditcard" name="payment" type="radio" value="creditcard" /> Creditcard
		<div id="cards">
			<label for="cctype">Choose one: </label>
				<select id="cctype" name="cctype">
				<option>...</option>
				<option value="master">MasterCard</option>
				<option value="visa">Visa</option>
				<option value="amex">American Express</option>
			</select>
		</div>
	</li>
	<li>
		<input name="payment" type="radio" value="paypal" /> PayPal
	</li>
	<li>
		<input name="payment" type="radio" value="wire" /> Wire/transfer
	</li>
</ul>

Count clicks for Google Analytics

The last snippet is an easy way to count clicks on links within a specific DIV container. Without the requirement to add additional Google Analytics code to all link elements, it’s possible to count those link clicks in Google Analytics.

$('#mylinks a[href^="http"]').click(function(){
 	pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));
});

This tiny function above will count the links from a DIV container with the ID “mylinks” like:

<div id="mylinks">
	<a href="http://simpay.org/">PayPal Payments</a> | 
	<a href="https://www.finalwebsites.com/shared-hosting-provider/">Shared Hosting</a>
</div>

You can try all these jQuery snippets on this demo page, where you can find another download link (there is also one at the top of this page). If you have any question or suggestions, please post your comment below.

Published in: jQuery Code

Related Posts