Jump to content

[Tutorial 1.6] Change combination to available one when default combination is not available or sold out JS


Recommended Posts

Hello community,

Few days ago I was struggling how to change on product page default combination if it is not availalable (it has date available set).  After few hours of coding I menaged to do this. I didn't want to make it on PHP because I want my default combination to be unchanged on database. I just want to automatically set to different one if the default is not available.

I think that there will be person who wants to change it when default combination has stock <= 0 but it is not my concern. If You want it then You can adjust my code to your needs. Probably solution is posted below but I didn't test it.

1) We need to define in JavaScript variable with default product attribute id. To do so go to product.tpl of your theme and on the bottom add this code. You can add it between {strip}...{/strip} tags between other addJsDef definitions. We will use this value in our js scripts.

{if isset($product->cache_default_attribute) && $product->cache_default_attribute}
	{addJsDef cache_default_attribute=$product->cache_default_attribute|intval}

2) Next in product.js we need to create 2 functions. You can add them basically anywhere You want between other functions. The safest place is just the end of the file.

function selectAttributeByCombinationId(combination_id)
	if (typeof combinationsFromController[combination_id] == 'undefined')
		return false;

	var c = combinationsFromController[combination_id];
	var i = 0;
	c.attribute_select = [];

	$.each(c.attributes_values, function(k){
		c.attribute_select[k] = c.attributes[i];

	$.each(c.attribute_select, function(k,v){
		$('#color_' + v).addClass('selected').parent().addClass('selected');
		$('input:radio[value=' + v + ']').prop('checked', true);
		$('input[type=hidden][name=group_' + k + ']').val(v);
		$('select[name=group_' + k + ']').val(v);

function changeDefaultCombinationIfNotAvailable()
	if (typeof combinationsFromController == 'undefined' || window.location.href.indexOf("#/") > -1)
		return false;

	if (combinationsFromController[cache_default_attribute].available_date !== ''
		&& combinationsFromController[cache_default_attribute].quantity <= 0) {
		// determine the combinations with highest stock
		var comb_with_highest_qnt = temp_qnt = 0;
		$.each(combinationsFromController, function(k,v){
			if (v.quantity >= temp_qnt){
				temp_qnt = v.quantity;
				comb_with_highest_qnt = k;


		if (comb_with_highest_qnt){
		} else {
			// set first available combination
			$.each(combinationsFromController, function(k,v){
				if(v.quantity > 0 || v.available_date == ''){
					return true;

$(document).ready(function() {

Save it, upload files to server, remove cache and feel free to be happy.

Few things about this code:
• It works with multiple attributes groups
• it checks which combinations has highest stock quantity on warehouse and it will set this combination as default after page load
• it won't change combination if url contains "#/" in it just to prevent changes when someones want's to go to specific combination
• I didn't test it quite well so if You will find some bugs or you will find easier method to do this just let me know.


If You want to change default combination when only stock quantity > 0 (without date_available) then in changeDefaultCombinationIfNotAvailable() just change
"if (combinationsFromController[cache_default_attribute].available_date !== ''
        && combinationsFromController[cache_default_attribute].quantity <= 0) {"


if (combinationsFromController[cache_default_attribute].quantity < 0) {


If I helped You then feel free to press this "Thanks button!"

Edited by hakeryk2 (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More