Posts

How to Load jQuery into eBay Listings With Live Examples

eBay LogoOver 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!

 

So What are these Slick Options & What is jQuery?

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*).

jQuery Example on ASOSSo 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!

jQuery Example on debenhams

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… jQuery on eBay Examples

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.

jQuery Example on eBay 1In 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 :)

eBay Listing JQuery Gallery Example 1

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.

eBay Listing JQuery Gallery Example 2

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!

How to Load jQuery into eBay Listings

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:

eBay Javascript Warning

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

Update: Adding in Additional Libraries

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.

Summary

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.

Advanced eBay Listing Creation Tool With Keywords

For a long time now that businesses that do not employ software tools that have keywords available to them are restricted by not being able to leverage them and simply their eBay listing process.

So I’ve created a simplified, yet advanced eBay listing generator that will allow you to use keywords in a standardised template that speed up your eBay listing process by enabling you to break your listing template away from the data you’re entering into it and use a simple tool to create eBay listings quickly.

If you’re not using 3rd party tools to list onto eBay then you may not have come across this concept before so I’ve included two extra sections to this article for you come up to speed with a way that will allow you to list more quickly & efficiently.

It also helps a few weeks back I created two videos in related articles that reverse engineer this process so that you can understand this process using a live eBay listing example and I’ve included the video’s in this article to help you.

What Are Keywords & Templates?

Instead of manually adding data such as item titles into each listing, in this process you create your template and leave a “keyword” behind such as {{Description}} where you would like your description to appear.

Then using the Advanced eBay Listing Creation Tool I’ve created, you just enter your description by itself, separate from the template and then press the huge button at the bottom and where you added the {{Description}}  keyword in your template, it’s replaced with your description.

Neat eh? This is exactly what larger businesses are using to list millions of items on to eBay each week, they’re separating their listing template from their data and using 3rd party tools to create those data rich listings.

So that’s exactly why I have made a simplified version for you to use that does not require the complexity or cost of using a 3rd party software tool.

An Introduction to Keywords & Templates By Example

In a two previous articles I reverse engineered both the eBay template being used and the data being used in that eBay template and I’ve included the video’s below for you to watch:

Reverse Engineering a Template Reverse Engineering the Data 

View on YouTube

View on YouTube

Keyword List:

To begin with I have created a common set of keywords for you to use, these are below.

Standard

  • {{Title}}
  • {{Description}}
  • {{Buttons}}
    This is a special keyword to create the buttons in your eBay listings for “Ask seller a question”, “Tell a friend”, “Watch this item” and “Add seller to favourites”. There is also another very special button I am working on and will be released once I’ve finished coding it.

Bullets

  • {{Bullet1}}
  • {{Bullet2}}
  • {{Bullet3}}
  • {{Bullet4}}
  • {{Bullet5}}

Images

  • {{Image1}}
  • {{Image2}}
  • {{Image3}}
  • {{Image4}}
  • {{Image5}}
  • And so on…
  • {{Image15}}

Future Additions

Now that I have got the tool beyond the proof of concept stage, I had to learn how JQuery & Ajax worked and also improve my PHP skills over the past two weeks, I’ll hand the project over to one of my developers and add in the additional keywords that I’d like to add.

Such as adding in your eBay shop link automatically, dynamic image galleries and wait for it…. logic testing (like in eSellerPro, see here for an example) so you can make eBay listings completely dynamic depending on what data you enter, plus CSV file exports for eBay File Exchange & Turbo Lister to make your eBay listing process as simple as possible!

While these are being developed, I’m going to work on integrating this listing generator more deeply into this site, so that as a registered user (free of course) you can set up a set of “default” options to make the listing process even faster for you and being supported in the multi-channel eCommerce forums I have also been developing.

eBay Listing Creation Tool

You can test the advanced eBay listing generator tool here.

Your Feedback

I know the current tool is basic currently (but it won’t stay like that for long), it has the potential to save you hours and help you create a standard listing process, so I have two questions for you:

  1. What do you make of the tool so far?
  2. Can you suggest any keywords that you’d like to see added?

Let me know in the comments box below