Home  >  Q&A  >  body text

Display inventory counters in multiple locations on the same page

This script works great as a stock countdown, but I can't display it in more than 1 spot on the same page.

For example, there are 4 or 5 products/plans on the same page, each product displays a different inventory quantity, and the time when the quantity changes is also different. Shown on only 1 product.

<span class="qty" id="qty"></span>

<script>
    const setQty = (qty) => {
        qtySpan.innerHTML = qty;

        if (qty == 0) return;

        let parts = Math.floor((Math.random() * 3) + 1);
        if (parts > qty) parts = qty;

        const msec =  Math.floor(((Math.random() * 15) + 15) * 1000);
        qty -= parts;

        // Save the updated quantity in localStorage
        localStorage.setItem('saved_countdown', qty);

        setTimeout(() => setQty(qty), msec);
    }

    // Get the saved countdown value from localStorage, or use default value of 57 if not found
    const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
    
    const qtySpan = document.getElementById('qty');

    // Set the initial value of the quantity
    setQty(defaultQty);
</script>

I copied the script 4x and changed the ID "qty" to qty1, qty2, qty3 and qty4 but it doesn't work, it only shows up in 1 product...:/

Can anyone here help me? Thanks!

P粉038161873P粉038161873217 days ago2610

reply all(2)I'll reply

  • P粉536532781

    P粉5365327812024-04-03 12:53:43

    I changed the functionality so that you can have multiple countdowns.

    const setQty = (qtySpan, qty) => {
    qtySpan.innerHTML = qty;
    
    if (qty == 0) return;
    
    let parts = Math.floor((Math.random() * 3) + 1);
    if (parts > qty) parts = qty;
    
    const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
    qty -= parts;
    
    // Save the updated quantity in localStorage
    localStorage.setItem('saved_countdown', qty);
    
    setTimeout(() => setQty(qty), msec);
    }
    
    const defaultQty = localStorage.getItem('saved_countdown') ?? 57;
    
    let listOfQty = document.querySelectorAll('.qty');
    listOfQty.forEach((qty) =>{
        setQty(qty, defaultQty);
    
    })

    You just send the specific number for each countdown as the second parameter.

    reply
    0
  • P粉761718546

    P粉7617185462024-04-03 10:19:41

    I've modified your script to a custom element. This means you can now create an element called <stock-counter>.

    This element has 2 attributes, quantity and storage-key.

    1. quantity is the amount to start counting from.
    2. storage-key is the name of the local storage key used to store the last count for this specific counter. If a storage key is set and a storage value is found, that value replaces the quanitity value, unless the storage value is 0.

    So the element looks like this:

    40
    

    You can place any number of these elements on the page and modify the quantity and storage-key of each element.

    customElements.define('stock-counter', class extends HTMLElement {
      get quantity() {
        // Check if value has been stored.
        if (this.storageKey !== null) {
          const value = Number(localStorage.getItem(this.storageKey));
    
          // Use that value if it is a valid number and not 0.
          if (!Number.isNaN(value) && value !== 0) {
            return value;
          }
        }
    
        // Otherwise get the value from the quantity attribute.
        const value = Number(this.getAttribute('quantity'));
    
        if (Number.isNaN(value)) {
          return 0;
        }
    
        return value;
      }
    
      set quantity(value) {
        if (!isNaN(value)) {
        
          // Store the new value if it's possible.
          if (this.storageKey !== null) {
            localStorage.setItem(this.storageKey, value);
          }
    
          // Set the new attribute value.
          this.setAttribute('quantity', value);
        }
      }
    
      get storageKey() {
        return this.getAttribute('storage-key');
      }
    
      connectedCallback() {
        this.count();
      }
    
      count = () => {
        const qty = this.quantity;
        this.textContent = qty;
    
        if (qty === 0) {
          return;
        }
    
        let parts = Math.floor((Math.random() * 3) + 1);
    
        if (parts > qty) {
          parts = qty;
        }
    
        this.quantity -= parts;
    
        const msec = Math.floor(((Math.random() * 15) + 15) * 1000);
        setTimeout(this.count, msec);
      };
    });
    40
    50
    80

    reply
    0
  • Cancelreply