Auction 2 Post – Implement an Auction Countdown

After buying Auction2Post I was pretty darn satisfied with my purchase. The support is great and the plugin in the best on the market. However as I outlined in my review of the plugin I felt it could use a countdown timer to be of real use. I didn’t like the idea of my content going stale and having to maintain that part, so I came up with a solution. Introducing the Auction2Post Jquery Countdown Timer.

Preview

Auction2Post Jquery Countdown Timer

This sniplet of code will display a simple countdown of how much time is left in the auction. This not only adds value to your site, but it also adds urgency for the buyer. This code is made to work right out of the box by just adding a couple blocks of code, however I have taken it to the next level for the advanced users out there. This code now supports custom display text and will even redirect the user to a specified URL if the auction has ended! I hope you enjoy it!

Basic Installation

To use this hack you need Auction2Post, Jquery and Jquery Countdown Plugin. Once you have these three plugins installed drop each of these code blocks somewhere inside your single.php template or within any wordpress loop. I am no PHP wizard so if anyone sees anything for improvement I am open to thoughts.

PHP Code Block

<?php
// Get the Ebay End Time
$key = 'a2pEndTime';
$time_array =	get_post_custom_values($key);
$endtime = $time_array[0];
 
//2009-06-25T05:16:57.000Z - Ebay Time
//new Date(year, mth - 1, day, hr, min, sec) - Needed Format		
//Split Ebay Time into Useable Pieces	
$year = substr($endtime,0,4);
$mth = substr($endtime,5,2);
$day = substr($endtime,8,2);
$hr = substr($endtime,11,2);
$min = substr($endtime,14,2);
$sec = substr($endtime,17,2);
 
//Setup for Display Text
$key = 'a2pExpireText';
$expire_array =	get_post_custom_values($key);
$text = addslashes($expire_array[0]);
// Check to see if we have custom text
	if(strlen($text) > 0){
		$expiryText = 'expiryText: \'' . $text . '\',';
	} else { // if not use the default
		$text = '<div class="ended">This Auction has Ended!</div>';
		$expiryText = 'expiryText: \'' . $text . '\',';
	}
 
//Setup for Redirect
$key = 'a2pURLRedirect';
$redirect_array = get_post_custom_values($key);
$redirect = $redirect_array[0];
// Check to see if we have a redirect
	if(strlen($redirect) > 0){
		$expiryUrl = 'expiryUrl: \'' . $redirect . '\'';
	}
?>

JS Code Block

<script language="javascript">
$(document).ready(function(){
	var auctionEnd = new Date();
	auctionEnd = new Date(<?=$year?>, <?=$mth?> -1, <?=$day?>, <?=$hr?> - 5, <?=$min?>, <?=$sec?>);
	var shortly = null; //used for styling your css of ".ended" switch auctionEnd with shortly on the line below to test.
	$('#defaultCountdown').countdown({until: auctionEnd,
			 alwaysExpire: 'true',
			 layout: 'This Auctions Ends in <span>{dn} {dl}, {hn} {hl}, {mn} {ml}, and {sn} {sl}</span>',
			 <?=$expiryText?>
			 <?=$expiryUrl?>
			 }); 
});
</script>

Display the Counter

To display the counter simply paste the following div where you need it within your template.

<div id="defaultCountdown"></div>

Advanced Use

As outlined within the Auction2Post videos, you can set custom fields for each auction campaign you set up.

If you want to make use of the advanced features such as redirect or custom text to be displayed when the auction ends you need to setup each campaign to include the corresponding custom tags. (screenshot below)

a2pURLRedirect

This custom field is used in conjunction with a redirect URL. This was the most requested improvement on the Auction2Post Forums. Essentially this will redirect the user if the auction has been completed. This isn’t the cleanest redirect because it waits until the DOM is loaded instead of passing a php header. As I said I’m no PHP/Wizard but I couldn’t get it to pull the post variables outside the loop when working with thesis. If someone wants to mod this I’ll be happy to update it here.

Note: If you don’t want to use this feature, just leave it blank.

To Use this feature enter it into the Auction2Post go to the custom template section and scroll down to Custom Fields and enter the following information into the corresponding fields.

Key

a2pURLRedirect

Value

http://www.bing.com

a2pExpireText

Essentially this field was coded out of necessity. I wanted to display a specialized message based on which campaign the auction was within when it ended. In my testing this works with providing a url and encoding it into JavaScript.

To use this feature enter the information into the Auction2Post custom fields like you did in the area before.

Key

a2pExpireText

Key

<div class="ended">This Auction Has Ended! View More <a href="http://www.bing.com">Auctions Here</a>.</div>

Closing

All in all, I hope this code is of use, however I offer no warranty with it and if breaks your site I take no responsibility. I am always open to improvements so feel free to shout it out in the comments or reach me via the contact form.

Tagged as: auction2post, eBay Partner Network, make money online