20 Dec 2009 14:53

Bedre call to action på din Scannet shop

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.

Jeg kunne ikke umiddelbart finde en løsning, så jeg DOM-scriptede mig frem til en anden løsning.

Advarsel: Jeg har testet dette på en enkelt Scannet-shop og det virker. Jeg tager ikke ansvaret for, hvordan det virker på din shop! (men der er ikke noget umiddelbart farligt i at prøve det).

Det du skal gøre er at logge ind i dit administrations-modul og klikke på "Sidehoved/sidefod".
I "Sidefod" skal du indsætte følgende kode:


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

Desværre lykkedes det mig ikke at fjerne de grimme [ ] på hver sin side af knappen, men jeg er overbevist om, at du nu har en meget bedre call to action på din Scannet shop.

OBS: I eksemplet her bruger jeg min egen Læg i kurv-knap. Den har jeg copyright på og du må IKKE bruge den på din shop. Du skal i stedet linke til din egen knap i linjen knap.src = "http://www.kondomaten.dk/grafik/lik.png"; (og nej - du må heller ikke bare kopiere den og smide den på din egen server).

De sagde:

20 Dec 2009 14:56

V4D5
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

Happy hacking

20 Dec 2009 15:03

Frank Hellerup Madsen
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)

20 Dec 2009 15:18

V4D5
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.

20 Dec 2009 16:32

Nicklas Bornstein
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);
}
}

20 Dec 2009 17:20

Lars Bachmann
Fint lille hack, men man kan da ændre knappen på almindeligvis i en Scannet shop?

Under Stylesheet -> knapper

Så vidt jeg husker.

20 Dec 2009 17:28

V4D5
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

Der kan man tale om at gå over åen efter vand.

20 Dec 2009 17:32

V4D5
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

20 Dec 2009 17:38

Nicklas Bornstein
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!

20 Dec 2009 17:43

V4D5
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

21 Dec 2009 17:21

Bent Andersen
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.

Navn:	*
Email:	* (bliver ikke vist)
Hjemmeside: