Help with creating a custom countdown that only shows 2 digits that countsdown to create scarcity

Technical
1

Hi, I would like to create a custom 2 digits that i want to look like the inventory is going down on the checkout page, I have a timer that counts down already and now i want 2 digits that starts at 14 then goes down to 14 after 5 seconds then after 30 seconds goes down by 2 digits to 12 then each minute goes down by 1 digit until 9 left and stops there.

PLEASE HELP :slight_smile:

2

Hi @rami_Karchaoui,

It sounds like you want to create a dynamic countdown for the inventory display on your checkout page. You can achieve this using JavaScript. Below is a solution tailored to your requirements.

Custom JavaScript Code

Add the following script to the Custom Code section in your Funnelish page builder:

document.addEventListener('DOMContentLoaded', function () {
    const inventoryElement = document.querySelector('.inventory-count'); // Replace with your inventory display element's class or ID
    let inventory = 14; // Starting inventory

    // Update inventory function
    function updateInventory() {
        if (inventory > 9) {
            inventoryElement.textContent = inventory; // Update the inventory display
            if (inventory === 14) {
                setTimeout(() => {
                    inventory = 13; // Reduce by 1 after 5 seconds
                    inventoryElement.textContent = inventory;
                }, 5000);
            } else if (inventory === 13) {
                setTimeout(() => {
                    inventory = 12; // Reduce by 1 after an additional 30 seconds
                    inventoryElement.textContent = inventory;
                }, 30000);
            } else {
                setTimeout(() => {
                    inventory -= 1; // Reduce by 1 every minute after reaching 12
                    inventoryElement.textContent = inventory;
                    if (inventory > 9) updateInventory();
                }, 60000);
            }
        }
    }

    // Start updating inventory
    updateInventory();
});

Steps to Implement

  1. Locate the Inventory Display Element

    • Replace .inventory-count in the script with the actual class or ID of the HTML element where your inventory number is displayed. For example, if your element has a class my-inventory, update the code to:
      const inventoryElement = document.querySelector('.my-inventory');

  2. Add the Script to Funnelish

    • Go to the Custom Code section in the Funnelish page builder.
    • Paste the script into the Custom JavaScript field.
    • Save and publish your changes.

How It Works

  • Starts at 14.
  • Reduces by 1 after 5 seconds to 13.
  • Reduces again to 12 after 30 seconds.
  • Decreases by 1 every minute until it reaches 9, then stops.

Let me know if you need help locating the inventory element or tweaking the script! :blush: