20 Dec 2009 14:53
10 kommentarer
Jeg sad og legede med at DOM-scripte på en gammel Scannet shop for at kunne tilføje noget Analytics-funktionalitet og studsede så over, den der ultra-grimme [Læg i kurv] som man finder på ekstremt mange Scannet shops. Jeg tænkte "det MÅ man da kunne lave bedre" og gik så i gang med at rode rundt i administrations-modulet.
<script type="text/javascript">
var links = document.getElementsByTagName("a");
for (var i = 0; i<links.length; i++) {
var knap= document.createElement("img");
knap.src = "http://www.kondomaten.dk/grafik/lik.png";
knap.alt = "L\u00E6g i kurv";
knap.style.border = 0;
if (links[i].firstChild.nodeValue == 'Læg i kurv') {
links[i].firstChild.nodeValue = '';
links[i].appendChild(knap);
}
}
</script>
Alt, du skal gøre er at trykke "opdater" og du vil nu have fine grønne knapper på din Scannetshop.Godt arbejde. Det kan helt sikkert være nyttigt for nogle shopejere med Scannetshops derude. Jeg kender i hvert fald mindst en enkelt, som jeg vil anbefale at se på løsningen.
Og skal vi så gætte på, hvor mange hotlinks til din knap, der kommer ud af dit gode arbejde? :o)
Tak, Frank. Jamen der kommer ingen hotlinks til min knap - det har jeg jo frabedt mig. I det tilfælde må jeg hellere fjerne knappen. Eller bare ændre den.
Deres (Scannets) kildekode er godt nok ikke ligefrem køn. Og at det er nødvendigt på den måde at ændre i DOM-træet er efter min mening bestemt ikke at fortrække. Hvis design betyder noget, bør man efter min mening overveje at finde en udbyder, der tillader at ændre sådanne ting på "korrekt vis" - altså ved at ændre den oprindelige kildekode.
Men for at besvare dit spørgsmål, kan det med lidt DOM-jonglering sagtens lade sig gøre. Vær dog opmærksom på at det ikke nødvendigvis vil virke korrekt, hvis Scannet finder på at ændre deres kode, så den rent faktisk validerer (tags bliver afsluttet korrekt og ikke som nu, hvor blokke er "viklet" ind i hinanden).
Og til din kode; det er ikke nødvendigt at instantiere et nyt a-tag, for hvert link der findes på siden, når du efterfølgende kun benytter det i de tilfælde, hvor linket er et "Læg i kurv" link.
Prøv med følgende kode:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].firstChild.nodeValue == 'Læg i kurv') {
var parent = links[i].parentNode.parentNode;
parent.removeChild(parent.childNodes[6]);
parent.removeChild(parent.childNodes[4]);
var knap = document.createElement('img');
knap.src = 'http://www.kondomaten.dk/grafik/lik.png';
knap.alt = 'L\u00E6g i kurv';
knap.style.border = 0;
links[i].firstChild.nodeValue = '';
links[i].appendChild(knap);
}
}
Fint lille hack, men man kan da ændre knappen på almindeligvis i en Scannet shop?
Under Stylesheet -> knapper
Så vidt jeg husker.
Jamen Nicklas vi er helt enige mht til det med DOM'en og helt skifte platform, men vi må bare forholde os til, at der er rigtigt mange, som har en Scannet shop og som ikke ønsker at skifte. De vil hellere modificere deres nuværende shop. Og i guder hvor er deres html i dén grad viklet ind i hinanden.
Nicklas - din kode virker perfekt - jeg anbefaler, at man bruger Nicklas' kode i stedet.
Men derudover så instantierer jeg ikke et nyt a-tag, men blot img-tag'et (altså knappen).
@Lars Bachmann - Ja, det hørte jeg efterfølgende, at man kan. Nu kan man så gøre det på to måder ;o) Der kan man tale om at gå over åen efter vand.
Uffe Fey fra www.tasks.dk har også lavet en løsning med regulære udtryk, der lige fjerne Scannets brackets - den ser ud som følger:
var first_td = document.getElementById('group');
var table = first_td.parentNode.parentNode;
for(var i = 0; i < table.rows.length; i++)
{
for(var j = 0; j < table.rows[i].cells.length; j++)
{
if(table.rows[i].cells[j].innerHTML.indexOf('Læg i kurv') > 0)
{
var re = /<a\b[^>]*>Læg i kurv<\/a>/gi;
var link = table.rows[i].cells[j].innerHTML.match(re).toString().replace(/Læg i kurv<\/a>/, '');
table.rows[i].cells[j].innerHTML = table.rows[i].cells[j].innerHTML.replace(/\[.+\]/, link + '<img src="http://www.kondomaten.dk/grafik/lik.png"/></a>');
}
}
}
Det vi ser her, er at ét problem sagtens kan have flere løsninger. Og at det kan være meget sjovt at gå over åen efter vand
Det var selvfølgelig også et img-tag jeg mente :)
Jeg har aldrig selv arbejdet med Scannet -shops, og ved derfor ikke andet, end det jeg kan se på de shops der nu engang er hosted hos dem.
Desuden er det lidt "risikabelt" at køre scriptet i det globale variabel-scope, taget i betragtning hvor lidt kontrol man åbenbart har over sin egen kode.
Da koden kun skal køres en enkelt gang, kan det sikres at den ikke ødelægger anden kode, ved at indkapsle koden i en anonym funktions variabel-scope og lade funktionen "kalde sig selv".
Koden skal da se ud som følger:
(function(){
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].firstChild.nodeValue == 'Læg i kurv') {
var parent = links[i].parentNode.parentNode;
parent.removeChild(parent.childNodes[6]);
parent.removeChild(parent.childNodes[4]);
var knap = document.createElement('img');
knap.src = 'http://www.kondomaten.dk/grafik/lik.png';
knap.alt = 'L\u00E6g i kurv';
knap.style.border = 0;
links[i].firstChild.nodeValue = '';
links[i].appendChild(knap);
}
}
})();
Men, hvis det er muligt at ændre koden i ren HTML/CSS er det langt at fortrække!
Nåe nej - Nicklas - den fik jeg lige placeret forkert, det kan jeg da godt se. Det var et hurtigt mash-up. Din idé med en anonym funktion er helt efter bogen. -Og allerhelst ville jeg også have adgang til al html/css, men sådan er spillereglerne bare ikke altid. Og nogle gange skal man også bare gøre det for sjov.
-Hvis man altså kan li' JavaScript
Selv om jeg kan lære noget af at kigge på jeres scripts, så er det godt nok noget langhåret noget for en der ikke er vandt til at programmere ;-) Men bliv endelig ved.
Brug dit eget navn - ikke sådan noget "billig arganolie" eller "mobilt bredbånd"
V4D5 20/12/09 14:56
Hov... For en god ordens skyld: Hvis du skulle være mand for at finde et lille hack til at fjerne de grimme [ ], som er rundt om Læg i kurv, så send mig en mail, så opskriften kan komme med her ;o)
Happy hacking