shopify-countdown-cart

docs for countdown cart for shopify

https://www.figma.com/file/TbbwvMfodq0GGctJ6c18Gy/Countdown-Timer-Overhaul?node-id=1038%3A0

Countdown cart feature of countdown timer which is visible only for Shopify. To see it you need to create app from shopify itself. Main purpose of countdown cart feature is to start timer and countdown before user ends their purchase. After timer finishes it will remove every item in the cart or something else(depends on settings).

All changes basically placed in countdownTimer files. But powr_local.js also was used to interact with Shopify cart page, check if there are some items in the cart or send request to clear cart. Note: to see that cart is cleared page need to be reloaded.

To clear the cart and show the timer when there is any item in the cart(don't show it when cart is empty) I used next code in powr_local.js:

          fetch('/cart/clear.js', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
          })
          .then(() => {
            window.location.reload();
          })
          .catch(err => {
            console.log('Error during clearing cart', err);
          });
      }
      if(response.message === 'checkCartIsEmpty') {
        fetch('/cart.js', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          },
        })
        .then(response => {
          return response.json();
        })
        .then(data => {
          if(data.item_count > 0){
            for (let i = 0; i < POWR_RECEIVERS.length; i++) {
              POWR_RECEIVERS[i].receiver.postMessage(
                JSON.stringify({ message: 'showCartTimer' }),
                POWR_RECEIVERS[i].url
              );
            }
          }
        })
        .catch(err => {
          console.log('Error during checking cart items', err);
        });
      }

Other features are pretty simple and uses countdownTimer.js, _countdownTimerSettings.html.haml, _countdownTi‎mer.css.scss, _countdownTi‎mer.html.erb files. This app isn't reactified yet.

docs for countdown cart for shopify​

docs for countdown cart for shopify