Show timers on individual cart items

I’d slowly been working towards that capability but it’s still not all the way there yet. The full page shopping cart shouldn’t be too difficult to implement this on, but the mini-cart would require a decent amount of work to do.

If you do complete this I’d consider merging the changes into the codebase, please submit a pull request on GitHub if you do.

I need to get this done for work, so I can definitely make a pull request once I have it working.

Where do you think you’d start with this? Do you maybe have a general idea of how it should be done?

I can’t say for certain without digging into the code, but there should be a WooCommerce action/filter that runs on each line in the cart that you can use to add elements to. Each item that is expiring has a time when the item will expire, you should be able to add a countdown there.

When the countdown expires it will cause the page to refresh.

Okay, I did this in a slightly hacky way that involves overriding the cart.php template, but I was doing that already so it worked out for me.

Luckily the expiry time is stored in the data for each cart item (thanks!) so I added this to the foreach loop in cart.php where I wanted the timers to appear:

<div class="cart-item-countdown" data-time="<?php echo $cart_item['csr_expire_time'] - time(); ?>">
	<?php _e('Reserved for', 'kincaid'); ?> <span></span>
</div>

The current epoch time is subtracted from the csr_expire_time, which is exactly what the plugin already does for the timer up top, so there’s no discrepancy.

Then you just need some javascript to run on the cart page:

jQuery('.cart-item-countdown').each(function() {
	var $this = jQuery(this),
	     time = parseInt($this.data('time')),
	     soon = false;
	$this.find('span').countdown({
		until: time,
		format: 'dhmS',
		layout: '{mnn}{sep}{snn}',
		onTick: function(periods) {
			if (periods[5] <= 1 && !soon) {
				$this.addClass('cart-item-countdown--soon');
				soon = true;
			}
		}
	});
});

I’m adding a class to turn the countdown red when the timer has less than 2 minutes left, but that’s totally optional. Hopefully this can help someone else out.

EDIT: Oh, also, that 2 minute check probably won’t work right if your expiration time is 1 hour or higher. Ours is only 5 minutes (extremely limited-edition prints, so people need to checkout or get out) so simply checking for the minute value works.

• This reply was modified 6 years, 11 months ago by keithpickeringkmg.

If you wanted to do it without modifying the theme file there should be an action/filter to use, but props for figuring out a solution that works for you.

• This reply was modified 6 years, 11 months ago by James Golovich.

Thanks for the plugin by the way, it’s super useful and I was lucky to find it! Seems crazy this functionality isn’t built into WC to begin with, I could see the default setup (not decreasing quantity until an order is complete) causing a lot of headaches in high-demand stores.