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 (click "JavaScript" / "CSS" to view the code):

//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

Accessing the Configuration Object

Within the auction_nudge_loaded() function we can also access the configuration object that was used to load the tool. This is passed as a parameter to the callback function with two properties: target_div_id (the ID of the container the tool is loaded into) and request_params (an object containing all parameters used to load the tool).

To access the configuration object, we need to add a parameter to the callback function:

<script type="text/javascript">
  // Add 'config' parameter to function definition
  function auction_nudge_loaded(config) {
    //The configuration object is available as 'config'.
    console.log(config);
  }
</script>

Would output something like:

{
  target_div_id: 'auction-nudge-items',
  request_params: {
    SellerID: "your-ebay-username"
    siteid: "77",
    theme: "responsive",
    user_profile: "1",
    MaxEntries: "6"
    //...etc
  }
}

The configuration object contains all the settings that were used to load the tool (passed in the code snippet). This means we can use it to target different snippets on the same page, or to create code that only runs when specific settings are used.

For example, if we had two Your eBay Listings snippets on the same page, one showing "jiffy bags" and the other "bubble wrap" (using the Keyword Filter), we could use the configuration object to add a keyword label above each listing (click "JavaScript" to view the code):

//The callback function
function auction_nudge_loaded(config) {
  // Get the container element
  const container = document.getElementById(config.target_div_id);

  // Get the keyword & username from the config object
  const keyword = config.request_params.keyword || "";
  const username = config.request_params.SellerID || "";

  // Determine the keyword text to display
  if (keyword.includes("jiffy")) {
    var keywordText = "Jiffy Bags";
  } else if (keyword.includes("bubble")) {
    var keywordText = "Bubble Wrap";
  }

  // Build output
  const keywordElement = document.createElement("p");
  keywordElement.innerHTML = `${keywordText} // ${username} on eBay`;

  // Prepend the element to the container
  container.prepend(keywordElement);
}

/* 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 span.e {
	color: #e72e30;
}
div.auction-nudge-items span.b {
	color: #0060d4;
}
div.auction-nudge-items span.a {
	color: #f6af00;
}
div.auction-nudge-items span.y {
	color: #83b800;
}

View full example