Over the past few years eBay’s JavaScript policy has become quite lapse, this has enabled some extremely “slick” options to start appearing on eBay in both eBay Stores and in eBay Listings.

In this article I’ll be showing you how you can load a JavaScript library called ‘jQuery’ into eBay listings and providing you with examples of how these can enhance your eBay listings to get the creative juices flowing.

Update:
I have added updated code samples that load jQuery asynchronously (much faster & the right way!), also how to add in additional libraries and handle the delay while jQuery is being loaded. These can be found at the bottom of the page here.

Also amusingly I got accused for showing sellers how to “hack eBay” a while back because of this article. Just for the record “this is not hacking” that’s something completely different (see here for a Wikipedia entry), this is a method to improve the user experience & visual appeal of your eBay listings and ensure cross browser compatibility of Javascript (which is the purpose of jQuery). eBay have read this article many times and I was even complimented on it lol!

 

Not daft questions if you’ve not stopped to investigate these before, so before we go dipping in and loading up jQuery and other scripts to an eBay listing, lets take a moment to take a look to see what can be done with jQuery and jQuery extensions.

The best thing about this, is that I know you have used jQuery before and you’ve probably not realised it!

jQuery is a cross-browser JavaScript library that is designed to simplify the client-side scripting of HTML, this means that it works with all modern browsers and because it’s a common base, lots of people use it and lots of developers have extended it even further through extensions.

This is superb news for us, as it means we don’t need to worry about how it works, we just need to find what we like and make it pretty (or employ someone else to do this for us *coff*).

So lets take a look at an example, I’m sure you have used something similar before, but just not put the label of “oh that’s jQuery” on it, as you’ll soon realise jQuery is everywhere.

Grab any product on ASOS.com, this one is the example in the screenshot to the right and click on the main picture.

A new layer appears with the main image and any additional images.

Did you notice that the image resizes to your screen size?

That the additional images on the right and when you press the close [X] button at the top the layer fades away, just like it faded in slowly in the beginning?

That is…. jQuery!

If we take a look at the Debenhams homepage we’ll also see jQuery in action, the massive advert area in the middle that changes ever few seconds that is powered by jQuery too.

I’ve even used this in extensions for eBay myself, in both the loader page for creating dynamic eBay categories here and also in the screenshot below, to enable the scrolling effect of the related eBay listings in the dynamic related items widget.

Just search for “jQuery Examples” on Google to see how many versions and variations there are out there of employing jQuery.

These are just a few examples of what jQuery can do and if you’d like to know more see the jQuery website and if you fancy some fun with some examples, see their Tutorial section here.

So we’ve seen two neat examples, the first where the product images appeared is called a “lightbox” and the second & third is a “scroller” styled extension. Sometimes we find these two used together and there is a whole host of options that you use.

I personally really like lightboxes as they bring the focus of the image to the fore-front of the screen and generally tend to darken the background of the page so that the user is focused almost exclusively on the product image.

Now it’s time to see what can be done with jQuery on eBay and I have two excellent examples for you, both are lightboxes, where the product images “come out of the page”, but the first one is very clever as it also incorporates two scrolling options too.

In this first example, we can see that the Seller Refuby is using jQuery with a lightbox addon to make the main image appear to come out of the page.

This is just like what we saw on ASOS earlier in this article.

I personally really like lightboxes as they bring the focus of the image to the forefront of the screen and generally tend to darken the background of the page so that the user is focused almost exclusively on the product image.

That to me, has to be a good thing!

Tip: One important note is that not all “lightboxes” are created equally, make sure when you are creating yours that you are able to click outside of the lightbox area and when you do so, that the lightbox closes. Some do not and that is really annoying :)

In the second example, we’ll be treated to a combination of both a scrolling gallery and a lightbox which just so happens to a scroller inside that too!

Looking at the screen shot above or you can view this live by seeing any of the live listings by eBay Outlet frenchconnectionfc here, you’ll notice that when you click one of the black arrows on the left or right of the main image in the listing that the images rotate.

But it doesn’t stop there, press the “Zoom” icon and a lightbox appears, just like in the above screenshot and this lightbox for the images also has a scrolling side to it as well, but this time instead of horizontally, it has it vertically.

How cool is that!

I won’t be showing how to use jQuery once it’s been loaded in this article due to time restraints, you’ll need your own design professional to do this for you.

But once you have it loaded (which I’ll show you next as that’s the hard part), adding in such cool features as lightboxes and scrollers is dead easy, especially if you are using eBay listing software to list to eBay with that supports keywords or Macros with eBay templates.

So if you just load up the default jQuery script line below

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

In your eBay listing or template system, eBay will tell you that “Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.” in an attractive red box:

Booooooooo

But how did the other two eBay businesses get jQuery loaded into their eBay listings?
Simple they used a “loader”.

Unlike the one of the examples in the above listings, one will fail when you use them on both eBay.com and eBay.co.uk because eBay.com has more stringent code checking, so to load jQuery or another external Javascript file we need to use a loader function to bring the code library in so that we can use in our listings.

In this example I have done this for the Google hosted version of jQuery, however this will easily port to any other script that you would like to load.

[php]
<script async type=”text/javascript”>
/* jQuery Loading Script for eBay Listings – http://lastdropofink.co.uk/?p=5945*/
var az = “SC”;var bz = “RI”;var cz = “PT”;var dz = “SR”;var ez = “C=”;var fz = “htt”;var gz = “p://”;var hz = “.com”;var jz = “ajax.googleapis”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/jquery/1.10.2/jquery.min.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);
</script>
[/php]

A text file of this code can be downloaded here:
http://lastdropofink.co.uk/assets/files/jquery-eBay.txt?1

Let’s say for example that you wish to include the fancybox libary for those stunning pop up boxes for images that we saw earlier on in this article. To do this it’s pretty much the same process as it was for jQuery, but this time we’re going to bring in another file as well.

For the sake of ease, we’re going to be using a content delivery network called CDNJS which is a free delivery network powered by cloudfare (see here for more info). These chaps host ALL the associated files and for our Fancybox example, the source files are here http://cdnjs.com/libraries/fancybox/.

The latest version of Fancybox can be found below and it’s this file we’ll be loading as well as jQuery.
[php]
http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js
[/php]

Now let’s jump to straight to the code:

[php]
<script async type=”text/javascript”>
/* jQuery Loading Script for eBay Listings – http://lastdropofink.co.uk/?p=5945 */
var az = “SC”;var bz = “RI”;var cz = “PT”;var dz = “SR”;var ez = “C=”;var fz = “htt”;var gz = “p://”;

/* Fancybox – Set tld & domain */
var hz = “.com”;
var jz = “cdnjs.cloudflare”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/fancybox/2.1.5/jquery.fancybox.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);

/* jQuery – Now Add in jQuery */
var hz = “.com”;
var jz = “ajax.googleapis”+hz+”/”;
var resource = document.createElement(“script”);
resource.src = fz+gz+jz+”ajax/libs/jquery/1.10.2/jquery.min.js”;
var script = document.getElementsByTagName(“script”)[0];
script.parentNode.insertBefore(resource, script);
</script>
[/php]

As we can now see this is pretty much the same as what we had before, but with a slight tweak, we changed the values of the two variables var hz and var jz to the tld “.com” and “cdnjs.cloudflare”+hz+”/” respectively.

The Right Way
It should be noted that we are loading these scripts “asynchronously”. Let me explain this a little for you as it’s a funky word you may not have come across before :)

If you use Javascript’s document.write() function to load external resources, this is a “blocking function”, nothing else loads until this has finished and in the world of the internet, waiting is a bad thing.

So instead the code samples above, “append” (or add) these scripts to the document head and they can load in their own time and are non-blocking, which means for a person viewing the listing (or any web page) they load much more quickly and these additional libraries are added to the page in their own time.

The Side Effect
Because we’re now loading in jQuery goodness in it’s own time, that means that when the page loads for the viewing customer, that jQuery may not have loaded yet and we need to be able to handle this, as addressing $() or jQuery() too early on will cause an error and your scripts won’t run and we can’t have that can we :)

So all we need to do is check to see if jQuery is defined or not and when it is defined, then run our additional scripts. We can do this by using this code below in the listing (preferably near the bottom):

[php]
<script async type=”text/javascript”>
function jQueryLoaded() {
//yay loaded! Now do stuff
jQuery(document).ready(function(){

/* Your jQuery code here */

});

}
function checkJquery() {
if (typeof window.jQuery === ‘undefined’ && window.jQuery) {
jQueryLoaded();
} else {
window.setTimeout(checkJquery, 100);
}
}
checkJquery();
</script>
[/php]

And tada! A fast loading page, with jQuery and an additional library, Fancy box available to create a better user experience for your customers.

jQuery can really improve the richness and functionality of a webpage

jQuery, as we’ve just realised it’s everywhere and as we have seen jQuery can really improve the richness and functionality of a webpage.

Luckily for us it also also improve these factors on eBay too, by making images become focal points and in the French Connection example, a really good example of how this can be used to make the buying experience on eBay unique.

Have you see this before on eBay? Did you like it? Let me know in the comments box below.