Adding text for back-orderable Combinations in PrestaShop

In this flash tip we will see how to display an explanatory text for combinations which you have no stock for, but still want to allow the purchase of.

  • PrestaShop Version used: 1.6.1.5

The background

Do you allow back ordering products? If so, you might have noticed PrestaShop tends to be confusing on combinations. In the default template, when a combination is available and has stock, it displays the classic X items in stock message. However, if you select a combination that has currently zero stock, even if available for order, it displays nothing. Forum users have reported customers being confused by this, so let’s see how to fix it, and give our customers more feedback!

The translatable string

Unless you run a single language shop, you will need the text we are going to display to be translatable. Therefore, we will take advantage of PrestaShop’s AddJsDefL method to add a javascript variable that can easily be translated from the back office. Open up your product.tpl file, located in the theme folder. At the very end of it, add the following:

{addJsDefL name='onBackOrderText'}{l s='On backorder' js=1}{/addJsDefL}

What does it do? It takes any content between tags and assigns it to the variable with a given name. There is a manual method as well, but this is the one that better complies to PrestaShop standards. If you want to know more about this and other functions, you can refer to my Essential PrestaShop functions series.

Editing product.js

Now that we have a string to play with, we have to make it work as we want. Open up product.js, located in the theme folder /js/. Please notice yours might be different if you do not use the default template. Locate the following at around line 630:

		if (allowBuyWhenOutOfStock && !selectedCombination['unavailable'] && productAvailableForOrder)
		{
			$('#add_to_cart:hidden').fadeIn(600);

			if (stock_management && availableLaterValue != '')
			{
				$('#availability_value').addClass('label-warning').text(availableLaterValue).show('slow');
				$('#availability_statut:hidden').show('slow');
			}
			else 
				$('#availability_statut:visible').hide('slow');
				
		}

The last part, in the else, is the one responsible for not displaying anything. We could simply comment it out, but if you try it, you will notice it says the product is available in other variants only. What to do then? Let’s modify it as follows:

		if (allowBuyWhenOutOfStock && !selectedCombination['unavailable'] && productAvailableForOrder)
		{
			$('#add_to_cart:hidden').fadeIn(600);

			if (stock_management && availableLaterValue != '')
			{
				$('#availability_value').addClass('label-warning').text(availableLaterValue).show('slow');
				$('#availability_statut:hidden').show('slow');
			}
			else {
				$('#availability_value').addClass('label-warning').text(onBackOrderText).show('slow');
				// $('#availability_statut:visible').hide('slow');
			}
				
		}

We just added brackets to the else statement, then copied the label-warning part from above, and used our text variable instead. Save and refresh, then try reloading the page with the combination selected, as well as switching between that and others. You will notice the text behaves as expected now!

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: