OCUK This Week Only Savings % Script

panyan said:
Ive got an idea for you if you fancy making another:

A script to calculate the £/GB of SSD's

So it can look at the price and the description ***GB and £**.** and calculate the £*.**/GB

:)
Click to expand...

This code should do it, it's not my best work though:
Code: 
var table = document.getElementById("productList");
for (var i = 0; i < table.rows.length; i++) {
  var size = table.rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);
  if (size != null) {
    var ssdSize = size[0];
    var price = parseFloat(table.rows[i].cells.item(4).innerHTML.match(/<span class=\"price\">£\d+\.\d+/)[0].replace(/<span class=\"price\">£/, '').replace(/,/g, '').replace(/[\(\)]/, ''));
    var sizeInGB = parseFloat(ssdSize.replace("GB", "").replace("TB", "000"));
    var pricePerGB = price/sizeInGB;
    table.rows[i].cells.item(4).innerHTML = table.rows[i].cells.item(4).innerHTML.concat("<span style=\"font-size: 16pt; color: red\">" + '£' + pricePerGB.toFixed(2) + '/GB' + "</span>");
  }
}

For a bookmarklet thingy you could use:
Code: 
javascript:(function(){var%20table%20=%20document.getElementById("productList");%20for%20(var%20i%20=%200;%20i%20<%20table.rows.length;%20i++)%20{%20%20%20var%20size%20=%20table.rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);%20%20%20if%20(size%20!=%20null)%20{%20%20%20%20%20var%20ssdSize%20=%20size[0];%20%20%20%20%20var%20price%20=%20parseFloat(table.rows[i].cells.item(4).innerHTML.match(/<span%20class=\"price\">%C2%A3\d+\.\d+/)[0].replace(/<span%20class=\"price\">%C2%A3/,%20'').replace(/,/g,%20'').replace(/[\(\)]/,%20''));%20%20%20%20%20var%20sizeInGB%20=%20parseFloat(ssdSize.replace("GB",%20"").replace("TB",%20"000"));%20%20%20%20%20var%20pricePerGB%20=%20price/sizeInGB;%20%20%20%20%20table.rows[i].cells.item(4).innerHTML%20=%20table.rows[i].cells.item(4).innerHTML.concat("<span%20style=\"font-size:%2016pt;%20color:%20red\">"%20+%20'%C2%A3'%20+%20pricePerGB.toFixed(2)%20+%20'/GB'%20+%20"</span>");%20%20%20}%20}})();

EDIT: If it wasn't obvious you really need to be on the SSD or HDD page for this to work
 
Last edited:
mate, that is really above and beyond!

i didnt think anyone would even take notice of that post, let alone someone who could actually code it and then post it!




EDIT: not to look ungrateful, but out of interest is there a way to sort the list so it is in ascending £/GB? :)
 
Last edited:
Using jQuery you can sort elements, you just need to create a sorter function based on some content within the matched set - which is pretty straightforward. I'll have a go this afternoon if I get some time :)
 
GoogalyMoogaly said:
I don't think so, looks like the sorting is handled by the database on their end.
I'm pretty new to Javascript though really so it may just be beyond me at the minute.
Click to expand...

Thanks for your help. It seems we may both be about to learn something new!

Spunkey said:
Using jQuery you can sort elements, you just need to create a sorter function based on some content within the matched set - which is pretty straightforward. I'll have a go this afternoon if I get some time :)
Click to expand...

awesome! :D
 
Here you go. I jQueryd up Googaly's code, and added the sorting routine. It works best if you hit 'view all' on a page so it has access to the full listing. I also added options to sort ascending/descending and also to show/hide HD accessories.

Code: 
var $rows = $('#productList tr');
var asc = true; // make false for desceding cost/GB
var hideAccessories = true;

// work out cost/GB
$rows.each(function() {
	var $tr = $(this);
	var $cells = $('td', $tr);
	var arSize = $('a', $cells.eq(1)).text().match(/(\d+)(GB|TB)/);
	if (arSize) {
		var size = arSize[2] == "TB" ? arSize[1] * 1024 : arSize[1];
		var cost = parseFloat($('.price', $cells.eq(4)).text().replace('£', ''));
		var pricePerGB = (cost / size).toFixed(2);
		$cells.eq(4).append('<span style=\"font-size: 16pt; color: red\">£' + pricePerGB + '/GB</span>');
		$tr.addClass('gbSizeCalc').data('cost', pricePerGB);
	}
	else {
		hideAccessories && $tr.hide();
	}
});

// sort
$rows.sort(function(a, b) {
	var keyA = $(a).data('cost');
	var keyB = $(b).data('cost');
	if (asc) {
		return (keyA > keyB) ? 1 : 0;
	} else {
		return (keyA > keyB) ? 0 : 1;
	}	
});
$.each($rows, function(index, row){
	$('#productList').append(row);
});

Bookmarklet:
Code: 
javascript:(function()%7Bvar%20%24rows%20%3D%20%24('%23productList%20tr')%3Bvar%20asc%20%3D%20true%3B%20%2F%2F%20make%20false%20for%20desceding%20cost%2FGBvar%20hideAccessories%20%3D%20true%3B%2F%2F%20work%20out%20cost%2FGB%24rows.each(function()%20%7Bvar%20%24tr%20%3D%20%24(this)%3Bvar%20%24cells%20%3D%20%24('td'%2C%20%24tr)%3Bvar%20arSize%20%3D%20%24('a'%2C%20%24cells.eq(1)).text().match(%2F(%5Cd%2B)(GB%7CTB)%2F)%3Bif%20(arSize)%20%7Bvar%20size%20%3D%20arSize%5B2%5D%20%3D%3D%20%22TB%22%20%3F%20arSize%5B1%5D%20*%201024%20%3A%20arSize%5B1%5D%3Bvar%20cost%20%3D%20parseFloat(%24('.price'%2C%20%24cells.eq(4)).text().replace('%C2%A3'%2C%20''))%3Bvar%20pricePerGB%20%3D%20(cost%20%2F%20size).toFixed(2)%3B%24cells.eq(4).append('%3Cspan%20style%3D%5C%22font-size%3A%2016pt%3B%20color%3A%20red%5C%22%3E%C2%A3'%20%2B%20pricePerGB%20%2B%20'%2FGB%3C%2Fspan%3E')%3B%24tr.addClass('gbSizeCalc').data('cost'%2C%20pricePerGB)%3B%7Delse%20%7BhideAccessories%20%26%26%20%24tr.hide()%3B%7D%7D)%3B%2F%2F%20sort%24rows.sort(function(a%2C%20b)%20%7Bvar%20keyA%20%3D%20%24(a).data('cost')%3Bvar%20keyB%20%3D%20%24(b).data('cost')%3Bif%20(asc)%20%7Breturn%20(keyA%20%3E%20keyB)%20%3F%201%20%3A%200%3B%7D%20else%20%7Breturn%20(keyA%20%3E%20keyB)%20%3F%200%20%3A%201%3B%7D%7D)%3B%24.each(%24rows%2C%20function(index%2C%20row)%7B%24('%23productList').append(row)%3B%7D)%7D)()

*edit*
Bookmarklet doesn't seem to work. Looks like it's cocked over the encoding somewhere. Use the F12 + paste in to console method and it works.
 
Last edited:
That code doesnt seem to work for me - I get the £/GB but no sorting options

I am using the latest version of chrome, press F12 and paste into console and then hit enter :)
 
This isn't as good as Spunkey's will be as I've not done any hiding and there's no option to change the sort order. It does however order them from best value to worst with the accessories at the bottom.

I thought I'd post this anyway as I had started working on it before I saw Spunkey's answer.

Code: 
var table = document.getElementById("productList");
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr'); 
var rowArray = new Array();
for (var i = 0; i < rows.length; i++) {
  var size = rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);
  if (size != null) {
    var ssdSize = size[0];
    var price = parseFloat(rows[i].cells.item(4).innerHTML.match(/<span class=\"price\">£\d+\.\d+/)[0].replace(/<span class=\"price\">£/, '').replace(/,/g, '').replace(/[\(\)]/, ''));
    var sizeInGB = parseFloat(ssdSize.replace("GB", "").replace("TB", "000"));
    var pricePerGB = price/sizeInGB;
    rows[i].cells.item(4).innerHTML = rows[i].cells.item(4).innerHTML.concat("<span style=\"font-size: 16pt; color: red\">£" + pricePerGB.toFixed(2) + "/GB</span>");
  }
  rowArray[i] = new Object;  
  rowArray[i].oldIndex = i;  
  rowArray[i].value = rows[i].getElementsByTagName('td')[4].innerHTML;
}
rowArray.sort(comparePricePerGB);

var newTbody = document.createElement('tbody');  
for (var i=0, length=rowArray.length ; i<length; i++) {  
  newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true)); 
}
table.replaceChild(newTbody, tbody);

function comparePricePerGB(a,b) {
  var aValue = a.value.match(/<span style=\"font-size: 16pt; color: red\">£\d+.\d+\/GB<\/span>/);
  if (aValue != null) {
    aValue = aValue[0].replace(/<span style=\"font-size: 16pt; color: red\">£/, '').replace(/\/GB<\/span>/, '');
  } else {
    aValue = 1000;
  }
  var bValue = b.value.match(/<span style=\"font-size: 16pt; color: red\">£\d+.\d+\/GB<\/span>/);
  if (bValue != null) {
    bValue = bValue[0].replace(/<span style=\"font-size: 16pt; color: red\">£/, '').replace(/\/GB<\/span>/, '');
  } else {
    bValue = 1000;
  }

  return (aValue == bValue ? 0 : (aValue > bValue ? 1 : -1));
}

Bookmarklet:
Code: 
javascript:(function(){var%20table%20=%20document.getElementById("productList");%20var%20tbody%20=%20table.getElementsByTagName('tbody')[0];%20var%20rows%20=%20tbody.getElementsByTagName('tr');%20%20var%20rowArray%20=%20new%20Array();%20for%20(var%20i%20=%200;%20i%20<%20rows.length;%20i++)%20{%20%20%20var%20size%20=%20rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);%20%20%20if%20(size%20!=%20null)%20{%20%20%20%20%20var%20ssdSize%20=%20size[0];%20%20%20%20%20var%20price%20=%20parseFloat(rows[i].cells.item(4).innerHTML.match(/<span%20class=\"price\">%C2%A3\d+\.\d+/)[0].replace(/<span%20class=\"price\">%C2%A3/,%20'').replace(/,/g,%20'').replace(/[\(\)]/,%20''));%20%20%20%20%20var%20sizeInGB%20=%20parseFloat(ssdSize.replace("GB",%20"").replace("TB",%20"000"));%20%20%20%20%20var%20pricePerGB%20=%20price/sizeInGB;%20%20%20%20%20rows[i].cells.item(4).innerHTML%20=%20rows[i].cells.item(4).innerHTML.concat("<span%20style=\"font-size:%2016pt;%20color:%20red\">%C2%A3"%20+%20pricePerGB.toFixed(2)%20+%20"/GB</span>");%20%20%20}%20%20%20rowArray[i]%20=%20new%20Object;%20%20%20%20%20rowArray[i].oldIndex%20=%20i;%20%20%20%20%20rowArray[i].value%20=%20rows[i].getElementsByTagName('td')[4].innerHTML;%20}%20rowArray.sort(comparePricePerGB);%20%20var%20newTbody%20=%20document.createElement('tbody');%20%20%20for%20(var%20i=0,%20length=rowArray.length%20;%20i<length;%20i++)%20{%20%20%20%20%20newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));%20%20}%20table.replaceChild(newTbody,%20tbody);%20%20function%20comparePricePerGB(a,b)%20{%20%20%20var%20aValue%20=%20a.value.match(/<span%20style=\"font-size:%2016pt;%20color:%20red\">%C2%A3\d+.\d+\/GB<\/span>/);%20%20%20if%20(aValue%20!=%20null)%20{%20%20%20%20%20aValue%20=%20aValue[0].replace(/<span%20style=\"font-size:%2016pt;%20color:%20red\">%C2%A3/,%20'').replace(/\/GB<\/span>/,%20'');%20%20%20}%20else%20{%20%20%20%20%20aValue%20=%201000;%20%20%20}%20%20%20var%20bValue%20=%20b.value.match(/<span%20style=\"font-size:%2016pt;%20color:%20red\">%C2%A3\d+.\d+\/GB<\/span>/);%20%20%20if%20(bValue%20!=%20null)%20{%20%20%20%20%20bValue%20=%20bValue[0].replace(/<span%20style=\"font-size:%2016pt;%20color:%20red\">%C2%A3/,%20'').replace(/\/GB<\/span>/,%20'');%20%20%20}%20else%20{%20%20%20%20%20bValue%20=%201000;%20%20%20}%20%20%20%20return%20(aValue%20==%20bValue%20?%200%20:%20(aValue%20>%20bValue%20?%201%20:%20-1));%20}})();
 
GoogalyMoogaly said:
It does however order them from best value to worst with the accessories at the bottom.
Click to expand...

This seems to work perfectly - good job mate :)

BTW, i really appreciate you guys putting in all this effort :)



EDIT: The code works a treat for SSD's. If, I repeat, If you find that you want to refine your code, perhaps the HDD's should be done on £/TB as oppose to £/GB to avoid this issue :)



The Toshiba should be at the top of the list with £28.99/TB :)
 
Last edited:
panyan said:
EDIT: The code works a treat for SSD's. If, I repeat, If you find that you want to refine your code, perhaps the HDD's should be done on £/TB as oppose to £/GB to avoid this issue :)

<...pic...>

The Toshiba should be at the top of the list with £28.99/TB :)
Click to expand...

I think I fixed that along with a formatting issue and an inaccuracy with the GB -> TB conversion.

Code: 
var table = document.getElementById("productList");
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr'); 
var rowArray = new Array();
for (var i = 0; i < rows.length; i++) {
  var size = rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);
  if (size != null) {
    var ssdSize = size[0];
    var units = ssdSize.match(/(GB|TB)/)[0];
    var price = parseFloat(rows[i].cells.item(4).innerHTML.match(/<span class=\"price\">£\d+\.\d+/)[0].replace(/<span class=\"price\">£/, '').replace(/,/g, '').replace(/[\(\)]/, ''));
    var sizeInGB = parseFloat(ssdSize.replace("GB", "").replace("TB", ""));
    if (units == 'TB') {
      sizeInGB = sizeInGB * 1024;
    }
    var pricePerGB = price/sizeInGB;
    rows[i].cells.item(4).innerHTML = rows[i].cells.item(4).innerHTML.replace(/<p>/g, '').replace(/<\/p>/g, '').concat("<br/><span style=\"font-size: 12pt; color: red\">£" + pricePerGB.toFixed(2) + "/GB</span>").concat("<br/><span style=\"font-size: 10pt; color: grey\">£" + (pricePerGB*1024).toFixed(2) + "/TB</span>");
  }
  rowArray[i] = new Object;  
  rowArray[i].oldIndex = i;  
  rowArray[i].value = rows[i].getElementsByTagName('td')[4].innerHTML;
}
rowArray.sort(comparePricePerGB);

var newTbody = document.createElement('tbody');  
for (var i=0, length=rowArray.length ; i<length; i++) {  
  newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true)); 
}
table.replaceChild(newTbody, tbody);

function comparePricePerGB(a,b) {
  var aValue = a.value.match(/<span style=\"font-size: 10pt; color: grey\">£\d+.\d+\/TB<\/span>/);
  if (aValue != null) {
    aValue = parseFloat(aValue[0].replace(/<span style=\"font-size: 10pt; color: grey\">£/, '').replace(/\/TB<\/span>/, ''));
  } else {
    aValue = 10000;
  }
  var bValue = b.value.match(/<span style=\"font-size: 10pt; color: grey\">£\d+.\d+\/TB<\/span>/);
  if (bValue != null) {
    bValue = parseFloat(bValue[0].replace(/<span style=\"font-size: 10pt; color: grey\">£/, '').replace(/\/TB<\/span>/, ''));
  } else {
    bValue = 10000;
  }
  return (aValue == bValue ? 0 : (aValue > bValue ? 1 : -1));
}

Bookmarklet:
Code: 
javascript:(function(){var%20table%20=%20document.getElementById("productList");%20var%20tbody%20=%20table.getElementsByTagName('tbody')[0];%20var%20rows%20=%20tbody.getElementsByTagName('tr');%20%20var%20rowArray%20=%20new%20Array();%20for%20(var%20i%20=%200;%20i%20<%20rows.length;%20i++)%20{%20%20%20var%20size%20=%20rows[i].cells.item(1).innerHTML.match(/\d+(GB|TB)/);%20%20%20if%20(size%20!=%20null)%20{%20%20%20%20%20var%20ssdSize%20=%20size[0];%20%20%20%20%20var%20units%20=%20ssdSize.match(/(GB|TB)/)[0];%20%20%20%20%20var%20price%20=%20parseFloat(rows[i].cells.item(4).innerHTML.match(/<span%20class=\"price\">%C2%A3\d+\.\d+/)[0].replace(/<span%20class=\"price\">%C2%A3/,%20'').replace(/,/g,%20'').replace(/[\(\)]/,%20''));%20%20%20%20%20var%20sizeInGB%20=%20parseFloat(ssdSize.replace("GB",%20"").replace("TB",%20""));%20%20%20%20%20if%20(units%20==%20'TB')%20{%20%20%20%20%20%20%20sizeInGB%20=%20sizeInGB%20*%201024;%20%20%20%20%20}%20%20%20%20%20var%20pricePerGB%20=%20price/sizeInGB;%20%20%20%20%20rows[i].cells.item(4).innerHTML%20=%20rows[i].cells.item(4).innerHTML.replace(/<p>/g,%20'').replace(/<\/p>/g,%20'').concat("<br/><span%20style=\"font-size:%2012pt;%20color:%20red\">%C2%A3"%20+%20pricePerGB.toFixed(2)%20+%20"/GB</span>").concat("<br/><span%20style=\"font-size:%2010pt;%20color:%20grey\">%C2%A3"%20+%20(pricePerGB*1024).toFixed(2)%20+%20"/TB</span>");%20%20%20}%20%20%20rowArray[i]%20=%20new%20Object;%20%20%20%20%20rowArray[i].oldIndex%20=%20i;%20%20%20%20%20rowArray[i].value%20=%20rows[i].getElementsByTagName('td')[4].innerHTML;%20}%20rowArray.sort(comparePricePerGB);%20%20var%20newTbody%20=%20document.createElement('tbody');%20%20%20for%20(var%20i=0,%20length=rowArray.length%20;%20i<length;%20i++)%20{%20%20%20%20%20newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));%20%20}%20table.replaceChild(newTbody,%20tbody);%20%20function%20comparePricePerGB(a,b)%20{%20%20%20var%20aValue%20=%20a.value.match(/<span%20style=\"font-size:%2010pt;%20color:%20grey\">%C2%A3\d+.\d+\/TB<\/span>/);%20%20%20if%20(aValue%20!=%20null)%20{%20%20%20%20%20aValue%20=%20parseFloat(aValue[0].replace(/<span%20style=\"font-size:%2010pt;%20color:%20grey\">%C2%A3/,%20'').replace(/\/TB<\/span>/,%20''));%20%20%20}%20else%20{%20%20%20%20%20aValue%20=%2010000;%20%20%20}%20%20%20var%20bValue%20=%20b.value.match(/<span%20style=\"font-size:%2010pt;%20color:%20grey\">%C2%A3\d+.\d+\/TB<\/span>/);%20%20%20if%20(bValue%20!=%20null)%20{%20%20%20%20%20bValue%20=%20parseFloat(bValue[0].replace(/<span%20style=\"font-size:%2010pt;%20color:%20grey\">%C2%A3/,%20'').replace(/\/TB<\/span>/,%20''));%20%20%20}%20else%20{%20%20%20%20%20bValue%20=%2010000;%20%20%20}%20%20%20return%20(aValue%20==%20bValue%20?%200%20:%20(aValue%20>%20bValue%20?%201%20:%20-1));%20}})();
 
Glad you like it, even if you're the only one to use it!
Gave me a chance to learn/try-out a bit more JavaScript. I find it hard to invent something to do for the sole purpose of learning how to do it.
 
GoogalyMoogaly said:
Glad you like it, even if you're the only one to use it!
Gave me a chance to learn/try-out a bit more JavaScript. I find it hard to invent something to do for the sole purpose of learning how to do it.
Click to expand...

haha - if i think of any more useful scripts, ill be sure to update the thread :p
 
OK, I know nobody asked for it but i've done another one.
I'll admit it's not been tested too well, but I thought I'd add it here anyway.

Basically what this allows you to do is use the search box to filter the product list by keywords. The script will add a (rather ugly) "Filter" button after the "Go" button. Using this will filter the items listed by finding the words in the text displayed or each item.
As such you will need to view all results on 1 page and do any ordering (e.g. by price) before filtering.

Example of it's use are, when viewing the Quick Disconnects within "Watercooling" -> "Fittings" there's no way to filter by size as with normal fittings. So using this script you can then filter by '1/2 3/4' and it will only return the result containing both 1/2 and 3/4. Different keywords are seperated by as space. If you want to search by an exact phrase, for example panel barb, put them in double quotes like "panel barb".
Another example would be when viewing CPU coolers you can use the filter to look for a specific socket type, e.g. AM3 and if it is in the text displayed on screen it return that item.

This is intended to work in list view, no idea what it will do in the others!

Code: 
document.getElementById('search').innerHTML = document.getElementById('search').innerHTML.concat("<input id=\"filterButton\" type=\"button\" value=\"Filter\" title=\"Filter\" />");
document.getElementById('filterButton').onclick = function() {
  var search = document.getElementsByName('keywords')[1].value;
   
  search = search.replace(/ (?=[^"]*"(?:[^"]*"[^"]*")*[^"]*$)/mg, "_space_");
  var terms = search.split(' ');

  var table = document.getElementById("productList");
  var tbody = table.getElementsByTagName('tbody')[0];
  var rows = tbody.getElementsByTagName('tr'); 
  var rowArray = new Array();
  var rowArrayIndex = 0;
  var match = null;

  for (var i = 0; i < rows.length; i++) {
    var proceed = true;
    for (var j = 0; j < terms.length; j++) {
      if(proceed) {
        match = rows[i].cells.item(1).innerHTML.toLowerCase().match(terms[j].replace(/\"/g, "").replace(/_space_/g, " ").toLowerCase().trim());
        if(match == null) {
          proceed = false;
        }
      }
    }
    if(proceed){
      rowArray[rowArrayIndex] = rows[i];
      rowArray[rowArrayIndex].oldIndex = i;
      rowArrayIndex++;
    }
  }
   
  var newTbody = document.createElement('tbody');  
  for (var i=0, length=rowArray.length ; i<length; i++) {  
    newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true)); 
  }
  table.replaceChild(newTbody, tbody);

  pTags = document.getElementsByTagName('p');
  var foundIndex = 0;
  for(var i = 0; i < pTags.length; i++) {
    if(pTags[i].innerHTML.match(/Showing Results/) != null) {
      foundIndex = i;
    }
  }

  document.getElementsByTagName('p')[foundIndex].innerHTML = 
    document.getElementsByTagName('p')[foundIndex].innerHTML.replace(/Showing Results \d+ - (\d+) .*/, "Showing Results " + ((rowArray.length > 1)? "1" : "0") + " to " + rowArray.length + " (instead of $1)");
}

Bookmarklet code (create a new bookmark and use this as the URL):
Code: 
javascript:(function(){document.getElementById('search').innerHTML%20=%20document.getElementById('search').innerHTML.concat("<input%20id=\"filterButton\"%20type=\"button\"%20value=\"Filter\"%20title=\"Filter\"%20/>");%20document.getElementById('filterButton').onclick%20=%20function()%20{%20%20%20var%20search%20=%20document.getElementsByName('keywords')[1].value;%20%20%20%20%20%20%20search%20=%20search.replace(/%20(?=[^"]*"(?:[^"]*"[^"]*")*[^"]*$)/mg,%20"_space_");%20%20%20var%20terms%20=%20search.split('%20');%20%20%20%20var%20table%20=%20document.getElementById("productList");%20%20%20var%20tbody%20=%20table.getElementsByTagName('tbody')[0];%20%20%20var%20rows%20=%20tbody.getElementsByTagName('tr');%20%20%20%20var%20rowArray%20=%20new%20Array();%20%20%20var%20rowArrayIndex%20=%200;%20%20%20var%20match%20=%20null;%20%20%20%20for%20(var%20i%20=%200;%20i%20<%20rows.length;%20i++)%20{%20%20%20%20%20var%20proceed%20=%20true;%20%20%20%20%20for%20(var%20j%20=%200;%20j%20<%20terms.length;%20j++)%20{%20%20%20%20%20%20%20if(proceed)%20{%20%20%20%20%20%20%20%20%20match%20=%20rows[i].cells.item(1).innerHTML.toLowerCase().match(terms[j].replace(/\"/g,%20"").replace(/_space_/g,%20"%20").toLowerCase().trim());%20%20%20%20%20%20%20%20%20if(match%20==%20null)%20{%20%20%20%20%20%20%20%20%20%20%20proceed%20=%20false;%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20}%20%20%20%20%20}%20%20%20%20%20if(proceed){%20%20%20%20%20%20%20rowArray[rowArrayIndex]%20=%20rows[i];%20%20%20%20%20%20%20rowArray[rowArrayIndex].oldIndex%20=%20i;%20%20%20%20%20%20%20rowArrayIndex++;%20%20%20%20%20}%20%20%20}%20%20%20%20%20%20%20var%20newTbody%20=%20document.createElement('tbody');%20%20%20%20%20for%20(var%20i=0,%20length=rowArray.length%20;%20i<length;%20i++)%20{%20%20%20%20%20%20%20newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));%20%20%20%20}%20%20%20table.replaceChild(newTbody,%20tbody);%20%20%20%20pTags%20=%20document.getElementsByTagName('p');%20%20%20var%20foundIndex%20=%200;%20%20%20for(var%20i%20=%200;%20i%20<%20pTags.length;%20i++)%20{%20%20%20%20%20if(pTags[i].innerHTML.match(/Showing%20Results/)%20!=%20null)%20{%20%20%20%20%20%20%20foundIndex%20=%20i;%20%20%20%20%20}%20%20%20}%20%20%20%20document.getElementsByTagName('p')[foundIndex].innerHTML%20=%20%20%20%20%20%20document.getElementsByTagName('p')[foundIndex].innerHTML.replace(/Showing%20Results%20\d+%20-%20(\d+)%20.*/,%20"Showing%20Results%20"%20+%20((rowArray.length%20>%201)?%20"1"%20:%20"0")%20+%20"%20to%20"%20+%20rowArray.length%20+%20"%20(instead%20of%20$1)");%20}})()
(I've only tested this using Firefox)

EDIT: Rather pointless bit of tweaking. It now also changes the "Showing Results 1 of ..." text (on the first filter at least)
 
Last edited:
ITT: People who are awesome and have far too much talent. :D

I'm struggling to write a Magento theme at the moment, and you guys make this look easy!
 
Googaly, I need your help...

I wanted to quickly work out what PSU's had the best £/W

So I adapted your code for the £/GB, but it doesnt work because I dont know what im doing...

Code: 
var $rows = $('#productList tr');
var asc = true; // make false for desceding cost/W
var hideAccessories = true;

// work out cost/W
$rows.each(function() {
	var $tr = $(this);
	var $cells = $('td', $tr);
	var arSize = $('a', $cells.eq(1)).text().match(/(\d+)(W|kW)/);
	if (arSize) {
		var size = arSize[2] == "kW" ? arSize[1] * 1000 : arSize[1];
		var cost = parseFloat($('.price', $cells.eq(4)).text().replace('W', ''));
		var pricePerW = (cost / size).toFixed(2);
		$cells.eq(4).append('<span style=\"font-size: 16pt; color: red\">£' + pricePerW + '/W</span>');
		$tr.addClass('WSizeCalc').data('cost', pricePerW);
	}
	else {
		hideAccessories && $tr.hide();
	}
});

// sort
$rows.sort(function(a, b) {
	var keyA = $(a).data('cost');
	var keyB = $(b).data('cost');
	if (asc) {
		return (keyA > keyB) ? 1 : 0;
	} else {
		return (keyA > keyB) ? 0 : 1;
	}	
});
$.each($rows, function(index, row){
	$('#productList').append(row);
});

I hope you can correct my errors :)
 
panyan said:
Googaly, I need your help...

I wanted to quickly work out what PSU's had the best £/W

So I adapted your code for the £/GB, but it doesnt work because I dont know what im doing...

...

I hope you can correct my errors :)
Click to expand...

Now, what you've done there is copy Spunkey's code, which I didn't really understand in the first place as it uses JQuery (I believe) which I'm even less familiar with than plain Javascript.
Also, unless Spunkey updated it, I don't think I got his code working either.

Spunkey will probably be able to offer more help here than I can. Sorry.
 
GoogalyMoogaly said:
Now, what you've done there is copy Spunkey's code, which I didn't really understand in the first place as it uses JQuery (I believe) which I'm even less familiar with than plain Javascript.
Click to expand...

ah... oops - is your code easy enough for an idiot like me to modify? :)

Ive had a crack at your code (I hope!)

Code: 
var table = document.getElementById("productList");
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr'); 
var rowArray = new Array();
for (var i = 0; i < rows.length; i++) {
  var size = rows[i].cells.item(1).innerHTML.match(/\d+(K|KW)/);
  if (size != null) {
    var psuSize = size[0];
    var units = psuSize.match(/(K|KW)/)[0];
    var price = parseFloat(rows[i].cells.item(4).innerHTML.match(/<span class=\"price\">£\d+\.\d+/)[0].replace(/<span class=\"price\">£/, '').replace(/,/g, '').replace(/[\(\)]/, ''));
    var sizeInW = parseFloat(psuSize.replace("W", "").replace("KW", ""));
    if (units == 'KW') {
      sizeInKW = sizeInW * 1000;
    }
    var pricePerW = price/sizeInW;
    rows[i].cells.item(4).innerHTML = rows[i].cells.item(4).innerHTML.replace(/<p>/g, '').replace(/<\/p>/g, '').concat("<br/><span style=\"font-size: 12pt; color: red\">£" + pricePerW.toFixed(2) + "/GB</span>").concat("<br/><span style=\"font-size: 10pt; color: grey\">£" + (pricePerGB*1024).toFixed(2) + "/TB</span>");
  }
  rowArray[i] = new Object;  
  rowArray[i].oldIndex = i;  
  rowArray[i].value = rows[i].getElementsByTagName('td')[4].innerHTML;
}
rowArray.sort(comparePricePerW);

var newTbody = document.createElement('tbody');  
for (var i=0, length=rowArray.length ; i<length; i++) {  
  newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true)); 
}
table.replaceChild(newTbody, tbody);

function comparePricePerW(a,b) {
  var aValue = a.value.match(/<span style=\"font-size: 10pt; color: grey\">£\d+.\d+\/KW<\/span>/);
  if (aValue != null) {
    aValue = parseFloat(aValue[0].replace(/<span style=\"font-size: 10pt; color: grey\">£/, '').replace(/\/KW<\/span>/, ''));
  } else {
    aValue = 10000;
  }
  var bValue = b.value.match(/<span style=\"font-size: 10pt; color: grey\">£\d+.\d+\/TB<\/span>/);
  if (bValue != null) {
    bValue = parseFloat(bValue[0].replace(/<span style=\"font-size: 10pt; color: grey\">£/, '').replace(/\/KW<\/span>/, ''));
  } else {
    bValue = 10000;
  }
  return (aValue == bValue ? 0 : (aValue > bValue ? 1 : -1));
}
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom