Sell 'Out of stock' products

Hi.
I’m setting up an eCommerce store that sells furniture.
I want the customer to be able to pre-order products for production.
In the case that the product is out fo stock they will recieve a message saying “ready for delivery within one month” otherwise “one week”.

Is it possible to enable the ‘out of stock view’ ?

Here’s a link to an out fo stock product:
https://preview.webflow.com/preview/fora-projects?utm_medium=preview_link&utm_source=designer&utm_content=fora-projects&preview=083998da23d93de89671c90dfe8aa358&pageId=60f15c9f0325e7be5f9634d0&itemId=610a5d38106fb72d91fe0eea&workflow=preview

A work around could be to just have a toggle in the backend saying if it’s out of stock or not and then not having webflow track the inventory, though this wouldn’t be as automated as having it change the message based on the actual stock.

Thank you all very much in advance.

Hey @Birk_Marcus_Hansen :wave:!

I’d recommend creating an “inventory threshold” and then dynamically changing (with some custom code) the message to the customer. Note if your inventory goes to zero Webflow won’t allow the customer to add the item to the cart. Here are the steps:

1. Binding your inventory to an element.

This will help the custom code know what the current inventory is.

2. Custom code to change the message

This replaces all inventory levels (from step 1) and changes the inventory level to text, which is dependent on the variables you set (first three lines).

<script>
const lowInventoryThreshold = 20
const lowInventoryText = 'Ready for delivery in one month'
const defaultText = 'Ready for delivery in one week'

const InventoryArray = document.querySelectorAll(
  `[data-wf-sku-bindings="%5B%7B%22from%22%3A%22ecSkuInventoryQuantity%22%2C%22to%22%3A%22innerHTML%22%7D%5D"]`
);

InventoryArray.forEach((item) => {
  const inventory = parseInt(item.innerHTML, 10);
  if (inventory <= lowInventoryThreshold) {
    item.innerHTML = lowInventoryText;
  } else {
    item.innerHTML = defaultText;
  }
});
</script>

Let me know if you have any questions!

1 Like

Thank you for your reply @Andrew_Bass
This is a great solution!
The only problem is that they will have to have more products in their inventory than they have in stock, which could be confusing for them. For now I’ll go with a custom field toggle and conditional visibility for the two messages.

Hope it will be possible to ‘pre-order’ in the future.

1 Like

Brilliant, this is a very eloquent solution. Is there any way to modify this so the buy now button text changes from order now to order for later?

Hey @Hamish_Campbell :wave:,

Sorry for the late reply!

To change the buy now button is slightly harder. You will need to label a container div and have a set timeout because Webflow will reset the buy now button text. In the example I labeled mine with a data attribute container=“product” . Also it’s important that the container have only one inventory div and one buy now button - i.e. it should only contain one product.

setTimeout(() => {
  const lowInventoryThreshold = 20;
  const lowInventoryText = 'Ready for delivery in one month';
  const defaultText = 'Ready for delivery in one week';
  const buyNowLowInventoryText = 'Order for later';

  const productContainers = document.querySelectorAll('[container="product"]');

  productContainers.forEach((container) => {
    const inventoryDiv = container.querySelector(
      `[data-wf-sku-bindings="%5B%7B%22from%22%3A%22ecSkuInventoryQuantity%22%2C%22to%22%3A%22innerHTML%22%7D%5D"]`
    );

    const buyNowButton = container.querySelector(
      '[data-node-type="commerce-buy-now-button"]'
    );

    const inventory = parseInt(inventoryDiv.innerHTML, 10);
    if (inventory <= lowInventoryThreshold) {
      inventoryDiv.innerHTML = lowInventoryText;
      buyNowButton.innerHTML = buyNowLowInventoryText;
    } else {
      inventoryDiv.innerHTML = defaultText;
    }
  });
}, 2000);
2 Likes