Stock on back order

Twig variables

Installing the app will give you access to some new Twig variables that can be used within the page editor.

product.purchasable_when_out_of_stock

This variable will return true if the product is out of stock and can be purchased when out of stock.

product.out_of_stock_quantity_limit

This variable will return the quantity limit set for the product. When product.purchasable_when_out_of_stock returns false, this variable will return as 0.

---

Other variables

In addition to using the variables above, it will likely be appropriate for any code you implement to also use other variables from the product object.

For example, product.stock will return the amount of the product currently in stock, product.in_stock will return as either true or false.

Installation instructions (version 2 themes or earlier)

Once the app is installed you'll need to change the relevant code in your live theme's files. Changing the code will enable out of stock products to be purchased. To change the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will install the code for you for a small charge which is shown on the installation page.

When a product is out of stock, instead of the normal 'add to basket' button your theme will instead display an 'out of stock' button which cannot be clicked. When you install this app, you'll need to change the code on your theme that does this.

If are using a version 2 or prior theme, locate the product.twig file by selecting Views > Product Pages > product.twig from the menu of the page editor.

Find the code that shows the out of stock button. The exact code will depend on your theme, but will look similar to one of the following:

<div class="button out-of-stock-button">{{ global.theme.settings.button_out_of_stock }}</div>

or

<button disabled="disabled" class="btn full-md button-out-of-stock disabled out-of-stock-button">{{ global.theme.settings.button_out_of_stock }}</button>

You'll need to change the code so that instead of displaying the DIV (as in the first example) or a disabled button, it instead displays an add to basket button. For example:

<button class="btn full-md button-out-of-stock out-of-stock-button">add to basket</button>

Please note: the exact classes required will depend on your individual theme. Where possible you can copy these classes from the normal add to basket button, but you must include the class out-of-stock-button.

---

Using the product.purchasable_when_out_of_stock variable

If only some of your items will be purchasable when out of stock, you should use this variable to surround the newly modified add to basket/out of stock section.

For example:

{% if product.purchasable_when_out_of_stock %}
	...modified out of stock button code...
{% else %}
	...normal out of stock button code
{% endif %}

---

Additional messaging

If you'd like to display a message on the product page that gives the customer an expected delivery date or custom lead time, you can use the custom fields app. This process is described below.

Installation instructions (version 3 themes or later)

Once the app is installed you'll need to change the relevant code in your live theme's files. Changing the code will enable out of stock products to be purchased. To change the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page within your ShopWired account, and we will install the code for you for a small charge which is shown on the installation page.

By default, when a product is out of stock instead of the normal 'add to basket' button your theme will display an 'out of stock' button which cannot be clicked. When you install this app, you'll need to change the code on your theme so that out of stock products that can be purchased show an 'add to basket' button.

---

Step One

If you're using a version 3 (or later) theme, locate the product_form.twig file by selecting Views > Partials > product_form.twig from the menu of the page editor.

Find the code that generates the display of the add to basket and out of stock buttons. The exact code will depend on your theme but will usually be in the format shown below:

{% if product.in_stock %}
	{{ html.button('cart_button', '', gts.button_add_to_basket, 'button expanded button_add-basket product-add-button ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
{% else %}
	{{ html.button('cart_button', '', gts.button_out_of_stock, 'button expanded button_add-basket product-add-button disabled ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
{% endif %}

Surround this code with an IF statement so that it only renders if the product is not purchaseable when out of stock.

{% if product.purchasable_when_out_of_stock %}
{% else %}
	{% if product.in_stock %}
		{{ html.button('cart_button', '', gts.button_add_to_basket, 'button expanded button_add-basket product-add-button ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
	{% else %}
		{{ html.button('cart_button', '', gts.button_out_of_stock, 'button expanded button_add-basket product-add-button disabled ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
	{% endif %}
{% endif %}

---

Step Two

Next, you need to add some code that runs if the product is purchaseable when out of stock.

Copy the code that renders the add to basket button, and place it within the first IF statement.

Within this code, locate the product-add-button class and remove it.

{% if product.purchasable_when_out_of_stock %}
	{{ html.button('cart_button', '', gts.button_add_to_basket, 'button expanded button_add-basket ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
{% else %}
	{% if product.in_stock %}
		{{ html.button('cart_button', '', gts.button_add_to_basket, 'button expanded button_add-basket product-add-button ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
	{% else %}
		{{ html.button('cart_button', '', gts.button_out_of_stock, 'button expanded button_add-basket product-add-button disabled ' ~ softClass,'','','','data-nostock="' ~ gts.button_out_of_stock ~ '" data-text="' ~ gts.button_add_to_basket ~ '"') }}
	{% endif %}
{% endif %}

---

Step Three

By default, when a product (or variation) is out of stock the quantity selection is hidden. The code that renders the quantity selection will be nearby to the add to basket button. Locate this code and find a class of product-quantity.

Change this code so that instead the product-quantity class only renders if the product is not purchaseable when out of stock.

Replace product-quantity with {{ product.purchasable_when_out_of_stock ? '' : 'product-quantity' }}.

---

Step Four (only necessary if you have the 'Back in Stock Notifications' app installed)

You may also have the back in stock notifications app installed in your ShopWired account. This app will render a form on the product page if the product or variations of it are out of stock.

This code will either be a button (when clicked, the button will display a form) or a form. Locate this code and surround it with an IF statement so that it only renders if the product is not purchaseable when out of stock.

For example, for themes that render a button to click:

{% if not product.purchasable_when_out_of_stock %}
	{% if global.features.extensions.back_in_stock and not modal %}
		{{ html.button('', '', gts.button_out_of_stock, 'button large advance expanded stock-requests-container' , '', 'button', '', 'data-open="stockRequestsModal"','button_out_of_stock') }}
	{% endif %}
{% endif %}

For themes that render a form:

{% if not product.purchasable_when_out_of_stock %}
	{% if global.features.extensions.back_in_stock %}
		<div class="stock-requests-container">
			<label class="field-label">Your Name</label>
			<input type="text" name="stock_request_name" class="required">
			<label class="field-label">Your Email Address</label>
			<input name="stock_request_email" type="email" class="required jsv_email">
			<button class="button" name="stock_request" value="1" type="submit">Send Your Request</button>
		</div>
	{% endif %}
{% endif %}

---

Additional messaging

If you'd like to display a message on the product page that gives the customer an expected delivery date or custom lead time you can use the custom fields app. This process is described below.

Using custom fields

The custom fields app can be used in conjunction with the stock on back order app to allow you to enter text when adding/editing a product that is then displayed on the product page.

For example, you can create a custom field in which you would enter text such as This product is not currently in stock, order now for delivery in 10 days.

---

Creating and using the custom field

To do so, create a text custom field for a product as described on the help guide. You can give the custom field a name of lead_time.

Going back to the code that you have inserted (as described above) to change the behaviour of the out of stock button, you can output the contents of the custom field that you've added (for which you'll need to add data for, for each product, when adding/editing the product) by using the variable {{ product.custom_fields.lead_time }}.

You'll need to ensure that the code is only shown for products:

- That are out of stock (detected using the product.in_stock variable)
- That can be purchased when out of stock (detected using the product.purchasable_when_out_of_stock variable)

You could also include this code for display on the shopping basket page underneath the item title (by using the variable item.product.custom_fields.lead_time

---

Other basket page messaging

We'd also recommend placing a text note near to the 'proceed to checkout' button on your shopping basket page, reminding customers that a product in their basket is out of stock.

Within the checkout_basket.twig file, above the block page_content section declare a variable {% set back_order_message = false %}.

Locate the code starting {% for item in basket.items %} and place the code shown below directly below it.

{% set back_order = false %}
	{% set variation_in_stock = false %}
	{% for variation in item.product.variations %}	
		{% if variation.in_stock and variation.id == item.variation_id %}
			{% set variation_in_stock = true %}
		{% endif %}
	{% endfor %}
	{% if (not item.in_stock) and (not variation_in_stock) %}
		{% set back_order = true %}
	{% endif %}

You can then reference this variable and it will only return as true where at least one product in the basket is out of stock, e.g.

{% if back_order_message %}
	At least one item in your basket is currently out of stock. Please check the lead time for these products above.
{% endif %}