WoW Latest Loot Drop Box

Someone posted that there used to be a Loot Drops content type box, but I have never seen it. The only loot drops are listed in the calendar event from data that is uploaded via the GPHelper addon for WoW. I don't know if GuildPortal will be adding a loot drop content box anytime soon, so I put together this module to enable you to display your latest loot drops on your GuildPortal Web site. In order to update this window, you'll have to manually add the URL to your calendar event that shows the loot.

You can use this module "as-is" but my php server site is limited to 5Gb/month of bandwidth. So if a bunch of people use up this bandwidth, you won't be able to see the icons and have the link color match the item quality - it's basically like setting the "lookupItems" variable in the script to "false", or the "Full Mode (no lookup)" image below. I'm providing the PHP script that works with this module and instructions on how to install it for yourself below.

Basic Mode	Full Mode (no lookup)	Full Mode (with lookup)
showDate = false showIcon = false showDKP = false lookupItems = false	Script Settings showDate = true showIcon = true showDKP = true lookupItems = false	showDate = true showIcon = true showDKP = true lookupItems = true

The Code (Free Form Text/HTML)

<style>
#lootBox { width:200px; }
#lootBox table td { vertical-align: middle; padding: 0px 2px; font-size:10pt; }
.lootDate td { background: #222222; border-bottom: #ffcc00 2px solid; text-align:left; }
</style>

<script type="text/javascript" src="http://www.guildportal.com/Cms/wowDiggerTips.js"></script>
<div id="lootBox"></div>
<div id="preloadloot" style="display:none;"></div>
<script type="text/javascript">
$(document).ready(function() {
 var eventloot = new Array();

// ADD YOUR EVENTS PAGES HERE
// **************************
 eventloot.push (["http://guildportal.com/Guild.aspx?GuildID=272209&TabID=2285088&EventToView=2591913&ReturnView=Monthly"]);
 eventloot.push (["http://soulcrusaders.guildportal.com/Guild.aspx?GuildID=197655&TabID=1669223&EventToView=2562467&ReturnView=Monthly"]);

// Loot Display parameters
 var showDate = true; // true = adds a date header
 var showIcon = true; // true = adds a loot icon
 var iconSize = 30;   // loot icon size (this sets both width and height)
 var showDKP = true;  // true = shows DKP details for the item (see below)
 var lookupItems = true; // Uses the external script to lookup the item info on wowhead, set this to false if your external server gets overloaded.
 var lookupItemsURL = "http://mottie.awardspace.com/item.php"; // URL to the PHP script

 // Loot Text: (item) to (character) for (#) DKP... include spaces
 var awardedTo = " to ";
 var forDKP = " for ";
 var DKP = " DKP";

// ******************************************************
// Don't change anything below
// ******************************************************
// Loads calendar content into a hidden "preloadloot" div
 for ( var j=0; j < eventloot.length; j++ ){
  var n = eventloot[j][0];
  loadContent(n.substring(n.lastIndexOf('/Guild.aspx'),n.length));
 }
 function loadContent(n) {
  n += " div[id*='_pnlEventContainer']:eq(0)";
  $('#preloadloot').load(n,findContent)
 }
// Finds Loot info from the calendar content
 function findContent(){
  var a = "<table>";
  var k = 0;
  // Find Date of Event
  if (showDate) {
   var eventTime = $("#preloadloot b:contains('Starting')").parent().next().html();
   a += "<tr class='lootDate'>";
   a += (showIcon) ? "<td colspan='2'>" : "<td>";
   a += eventTime.split(' ')[0] + "</td></tr>";
  }
  // Find Loot & build the output table... the item name will be surrounded by [item]...[/item]
  $("#preloadloot").find(".NormGridRow,.AltGridRow").each(function(){
   if ($(this).find("td:eq(0) a[href*='wowhead']").length > 0) {
    var lootItem = $(this).find("td:eq(0)").html();
    var lootedBy = $(this).find("a[title*='loot history']").html();
    a += (k % 2 == 0) ? "<tr class=NormGridRow>" : "<tr class=AltGridRow>";
    a += (showIcon) ? "<td width=" + iconSize + ">" : "<td>";
    a += getInfo(lootItem) + awardedTo + lootedBy;
    a += (showDKP) ? forDKP + $(this).find("td:eq(3)").html() + DKP : "";
    a += "</td><tr>"; k++;
   }
  })
  a += "</table>";
  $('#lootBox').append(a);
 }
// This function takes the item name and will eventually retrieve XML data for the loot ID, quality and icon name
 function getInfo(n){
  iId = $(n).attr('href').split('=')[1];
  if (lookupItems) {
   var newScript = document.createElement('script');
   newScript.type = 'text/javascript';
   newScript.src = lookupItemsURL + '?item=' + iId;
   document.getElementsByTagName("head")[0].appendChild(newScript);
  }
  var d = "";
  if (showIcon) {
   d += "<img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif' height='";
   d += iconSize + "' width='" + iconSize + "'></td><td>";
  }
  d += n;
  return d;
 }
}
// Function that is called from the php script that looks up wowhead info
 function update(n){
  var icn = "http://static.wowhead.com/images/icons/large/" + n.icon.toLowerCase() + ".jpg";
  var lnk = "http://www.wowhead.com/?item=" + n.id;
  $("#lootBox").find(".NormGridRow,.AltGridRow").each(function(){
   if ( $(this).find('a').attr('href').split('=')[1] == n.id ) {
    $(this).find('a').addClass("q"+n.quality);
    $(this).find("img").attr("src",icn).wrap("<a href='" + lnk + "'></a>");
   }
  })
 }
</script>

Using & Customizing this Module

How to Add an Event with loot drops

• First off, you'll have to have the GuildPortal Helper addon installed and collecting data from your raids and uploaded to your site.
• Copy (Ctrl-C) the code above and paste it into a free form text/HTML box on your site while in HTML mode () or by right clicking in the editor and choosing "Paste As Html"
• Go to your Calendar page and click on the Event that had loot drops, you should see something like this in the calendar
  
  
  
• Copy the URL from the browser window, which will look like this:
  
  http://guildportal.com/Guild.aspx?GuildID=272209&TabID=2285088&EventToView=2591913&ReturnView=Monthly
  
• Now, edit your Latest Drops content box and add a new eventloot.push(["Event URL here"]); which will end up like this:
  
  eventloot.push (["http://guildportal.com/Guild.aspx?GuildID=272209&TabID=2285088&EventToView=2591913&ReturnView=Monthly"]);
  
• Sorry, but if you find the list gets too long, you'll have to manually remove the older events. There is no simple way for this script to "search" for the most recent events and do this on it's own.

Customizing the Loot Window

• The CSS:
  
  
  • Adjust the loot box (#lootBox) width by changing the number in red (default is 200px).
  • If you want to make the font bigger, adjust the "font-size" in red (default is 10pt).
  • The Date header (.lootDate) default has the background color set to #222222, and uses the bottom border colored orange (#ffcc00) to separate it from the loot. Adjust those colors by changing the numbers in red.
    
• Loot Date: The script pulls the date of the loot from the event, and you can choose to turn this on (true) or off (false) by setting the showDate variable in the script:
  

  var showDate = true; // true = adds a date header

• Loot Icon: This variable can be set in the script to true or false, but it is dependent on the php script to obtain the data. If you set the "lookupItems" variable to false, the icon displayed will be blank and still occupy the same space.
  

  var showIcon = true; // true = adds a loot icon

• Loot Icon Size: This sets the icon size in pixels. The number (in red) sets both the width and height of the icon in pixels.
  

  var iconSize = 30; // loot icon size (both width and height)
  

• Loot DKP: Setting this variable will show (true) or hide (false) the DKP information for each piece of loot. The text displayed can be modified by the loot DKP text described below. Setting this to false will hide the "for (#) DKP" at the end of the loot link.
  

  var showDKP = true;  // true = shows DKP details for the item (see below)

• Loot DKP Text: The loot information is set up to show: (item) to (character) for (#) DKP
  

  var awardedTo = " to ";
  var forDKP = " for ";
  var DKP = " DKP";

• Look Up Items: Setting the "lookupItems" variable to true will enable the use of the external PHP script to obtain loot item data. This data includes the item quality (to change the link color) and item icon (which adds itself to the loot table once provided). The second variable "lookupItemsURL" is the location of the PHP script. By default is it set to my account on awardspace.com. This account has a bandwidth limited to 5 Gb/month. If it is exceeded then the item icon and link color will not update and you will see output similar to the "Full Mode (no lookup)" screenshot above. The instructions on how to set up your own php script is described in the section below.
  
  lookupItems = true -  The script will obtain item information and change the item icon, link color and change the link to "WoWHead.com"
  
  lookupItems = false, or the server band width has been exceeded - The item link will by default be set to "WowDigger.com". So when you hover over the link, it will update the link color and still show a tooltip directed to WoWdigger.
  
  lookupItemsURL - Please read the next section if you plan on setting up a site with your own php script.
  

How to add the PHP script for your own server

Setting up your site

• Signup with Awardspace.com
• 1. Domain Name - pick "Free Subdomain", Submit
• 2. Contact Details - Enter the required information here, Submit
• 3. Hosting Plan - pick "Easy Starter" (it's free), Submit
• Now check your e-mail for account name and password
  
• Log into Awardspace.com
• Click on the "Website Manager" button in the top bar
• Now find and click on "PHP Settings" at the bottom of the page
• Select "PHP 5.2.5" and click on the "Switch" button
  
• Now click on "Subdomain Manager" on the left side
• Enter a subdomain name in the box and click the "Add Subdomain" button.
• In the examples below you'll see the subdomain example "mysd", for a quick shortcut just replace the part in green with the subdomain you chose.
  
• Now click on "File Manager" on the left side
• Click on the subdomain you just added
• You will know you are in the right place when you see an "index.html" file in the directory
• Scroll down until you see the "Create File / Folder" header and enter "item.php" next to the "Create File" button, then click it
• You should now see two files in your directory: index.html and item.php
  
• Now click on the edit button () next to the "item.php"
• Copy (Ctrl-C) the PHP code below, then paste (Ctrl-V) it into the Awardspace file editor
• Click "Save File" and you should see green text pop up at the top that says "File has been saved successfully!"
• Now just click on "Back to the File Manager"
• At the top of the page you'll see: Current Folder: /home/www/mysd.awardspace.com, copy (Ctrl-C) the part in green/blue
• Paste (Ctrl-V) this into the browser address bar and add "/item.php" on the end, then reload the page.
• If you see a page with only "update({name:'',id:'',quality:'',icon:''})" at the top, then you will know you've done everything correctly
• Now copy the address from the brower - example: http://mysd.awardspace.com/item.php
• Edit your Latest Drops content box and paste the php script URL into the lookupItemsURL variable.
  

  var lookupItemsURL = "http://mysd.awardspace.com/item.php"; // URL to the PHP script
  

The PHP Code

<?php
$item = str_replace(" ", "+", "http://www.wowhead.com/?item=".$_GET['item']."&xml");
$xml = simplexml_load_file( $item );

// example output: update({name:"Faceguard of the Hammer Clan",id:"43280",quality:"3",icon:"inv_helmet_130"})
echo 'update({';
echo 'name:"'.$xml->item->name.'",';
echo 'id:"'.$xml->item[id].'",';
echo 'quality:"'.$xml->item->quality[id].'",';
echo 'icon:"'.$xml->item->icon.'"})';
?>

Redirect Awardspace to your site

• If someone tries to look at your Awardspace website "http://mysd.awardspace.com/" they will see some information about Awardspace, but you can edit the page and make it redirect people to your GuildPortal site.
• Once logged into Awardspace, go to the file manager and edit your "index.html" file
• Replace all the HTML you see there with the code below, modify the colorized HTML to display any information or images associated with your site
  

  <html>
  <head>
  <title>My Guild's Name</title>
  <meta http-equiv="refresh" content="3;url=http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168223">
  </head>
  <body bgcolor="#000000">
  <div style="color:#ffffff">Redirecting you to my GuildPortal site....</div>
  </body>
  </html>
  

  • The title (in green) is what is displayed at the top of the browser window.
  • In the meta tag content, the number (in red) is the time delay (3 seconds) and the URL (in orange) should be to your site.
  • Adjust the page colors by modifying the color codes in the body and div (in blue)
  • Replace the text in purple with any text or images you wish.

* Note: I used the loot drop data from the Soul Crusaders web site without permission. But, I wanted say that their data helped me make this module possible and I thank them for that. If anyone from that guild/site wishes me to remove mention of their name or data from this post, I will be happy to oblige.

Edit (4/25/2009): Changed the php script because it was breaking on item names with apostrophes
Edit (10/10/2009): Did a temporary fix on the script so it'll displaythe loot again, but I haven't gotten the icon part to work with the phpscript yet =/

I had to update the php script... basically item names with apostrophes like "Steamcaller's Goggles" were breaking the script.

I switched the quotes and apostrophes, so hopefully there aren't any items out there with quotes in them or I'll have to rewrite it again LOL