2. Customize
  3. Behaviour

Behaviour

Using JavaScript (or JavaScript libraries, such as jQuery) users can modify the content added by Auction Nudge to create custom features and behaviour.

Using the JavaScript Callback Function

The content that Auction Nudge adds to your page is HTML, so we can use JavaScript to modify it once it has been loaded.

In order to modify content, we need to know once it has been added to the page. Once the Your eBay Listings tool has loaded, it will attempt to execute the JavaScript callback function auction_nudge_loaded(). If this function exists, the code within the function will be executed.

This means we can add the auction_nudge_loaded() function to our page and within it the custom code we want to run.


<script type="text/javascript">
  function auction_nudge_loaded() {
    //Your custom code goes here. It will be executed once Auction Nudge has loaded.
  }
</script>

For example, we can use the callback function to add colour to the "View on eBay" link that appears next to items by finding and replacing the text using JavaScript. Some HTML <span> elements are added so we can style the word "eBay" using CSS:


//The callback function
function auction_nudge_loaded() {
  //Get the Your eBay Listings container
  var an_wrap = document.getElementById('auction-nudge-items');

  //Get all 'view' links
  var an_links = an_wrap.getElementsByClassName('an-view');

  //Loop over each link
  for (var i = 0; i < an_links.length; i++) {
    //Replace the text in each link
    an_links[i].innerHTML = an_links[i].innerHTML.replace('View on eBay', 'View on <span class="e">e</span><span class="b">B</span><span class="a">a</span><span class="y">y</span>');
  }
}


/* Style the link */
div.auction-nudge-items .an-item .an-view a {
	color: inherit;
	font-weight: bold;
}
/* Colour each character in the word 'eBay' */
div.auction-nudge-items .an-item .an-view span.e {
	color: #e72e30;
}
div.auction-nudge-items .an-item .an-view span.b {
	color: #0060d4;
}
div.auction-nudge-items .an-item .an-view span.a {
	color: #f6af00;
}
div.auction-nudge-items .an-item .an-view span.y {
	color: #83b800;
}

View full example

Using the callback function you can make minor changes such as this, or completely customize the tool to suit your needs.