Knappe-trylleri på din DanDomain

| 6 Comments

Lad det være sagt med det samme, at jeg ikke er nogen DanDomain-haj og muligvis kan dette lille trick løses på en smartere og mere logisk måde i DanDomains administration, men jeg er stor tilhænger af “whatever works” og det her trick virkede i det her tilfælde på webshoppen Økoshoppen, der sælger økologisk babyudstyr og plejeprodukter.

Formålet er at smide en ordentlig bøf af en læg i kurv-knap på DanDomain-shoppen. Det i sig selv er ikke noget problem. Problemet opstår ved at knappen genbruges på relaterede varer og så kommer det til at se lidt dumt ud (for at sige det mildt).

Store læg i kurv-knapper på DanDomain

Så vi har lige en håndfuld knapper, der skal ændres lidt i størrelsen. Og hvordan gør vi så det?

Først går du ind og ændrer din læg i kurv-knap til noget væsentligt større i Design → Tekster/knapper → Varekort. Intet specielt i det.

Nu har du problemet med der her giga-knapper på de relaterede produkter.

Gå så ind i Design → Tekster/knapper → Bundramme. Her finder du et “kodefelt”, hvor du må smide kode i og det er netop, hvad vi har brug for.

Her indsætter du dette JavasScript, der mest består af svenske Robert Nymans kode (jeg mødte i øvrigt Robert Nyman til Full Frontal i Brighton i 2009 – et super godt arrangement, hvis du kan li’ JavaScript).

Et voilá – en stor knap i selskab med mange små på Franks produktside med økologiske ammepuder

Lidt trylleri og vi har store og små knapper i skøn forening

I tilfældet her har jeg sat knappen til at være 90 pixels bred. Det kan du selv ændre i tredje nederste linje, der ser sådan ud

relaterede[i].style.width = '90px';

Den her slags cowboy-tricks laver vi mange af på Shopcamp for at få din Scannet, DanDomain, ScanCommerce, Magento shop eller hvad du nu har til at makke ret og konvertere som en shop bør gøre.

Håber du kan bruge tricket. Kender du en smartere måde at gøre det på, så råb endelig op.

Disclaimer: Det her var kompatibelt med en DanDomain 6.0 shop. Kan ikke stå inde for at det virker på alle DanDomain shops. Brug af dette er på eget ansvar (men hey – slet koden igen, upload din gamle læg i kurv-knap og du er tilbage til din gamle shop, så der sker ikke noget ved at afprøve det).

6 Comments

  1. Hej Morten

    Den kan også løses udelukkende via css og altså uden brug af javascript.
    Idéen er at de 2 forskellige knapper har forskellige css classes og derfor kan påvirkes med 2 forskellige stumper css kode. Eller… det vil sige, at den lille knap har en class der hedder “Related_BuyButton_IMG” mens den store ikke har en class i sig selv (typisk!). Men et kig i koden afslører at den ligger i en tabelcelle med class’en “BuyButton_ProductInfo” og at knappen er af typen “input”, og dermed kan vi sagtens ramme den med vores css kode alligevel.

    Først indsætter vi en transperant gif som “Læg i Kurv” knap under Design > Tekster og knapper > varekort. Derefter bruger vi lidt css til at styre størrelsen på de transperante knapper og lægge 2 forskellige grafik-filer ind som baggrund. Dvs. at vi fx. kan vise et lille kurv ikon på den store knap og undlade det på den lille, hvor vi ikke har så meget plads at gøre godt med.

    Css koden kunne fx. se sådan ud:

    .Related_BuyButton_IMG{width:90px; height:30px; background-image:url(‘/images/relatedbuybtn.gif’); display:inline-block;}}

    td.BuyButton_ProductInfo input{display:inline-block; width:120px; height:40px; background-image:url(‘/images/buybtn.gif’);}

    Håber det giver mening 🙂

  2. Ahhh – din snedige lille rad. Det var da et super-godt trick (og skal jeg selv sige det endnu bedre). Havde ikke lige tænkt på den med en transparent gif. Nifty, Anders, nifty. Og 1000 tak fordi du delte tricket.

  3. Der er vist også jQuery på siden så mon ikke også dette ville virke (ikke testet) i stedet for den ordentlige røvfuld js:

    jQuery(‘.Related_BuyButton_IMG’).css(‘width’, ’90px’);

  4. Hvis du har jQuery (og har set dig sur på CSS-løsningen), så ville jeg lige dele en simpel jQuery refaktorering af Vadskers JS:

    $(‘.Related_BuyButton_IMG’).width(90);

    Man kan så diskutere om det er den rigtige løsning at lade browseren vride billedets størrelse, så jeg ville nok nærmere gå efter noget i stil med:

    $(‘.Related_BuyButton_IMG’).attr(‘src’, ‘btn_small.gif’);

    ‘btn_small.gif’ skal selvfølgelig erstattes med den source (src) du helst ville have der stod.

    Igen hvis vi går tilbage til CSS-løsningen, så kan man faktisk overveje at lave 1 billede som indeholder begge knap-størrelser som man så viser vha. background position – for at nedbringe loadtiden (1 “stort” request er ofte hurtigere end 2 “små”).

    Well.. Bare lige mine overvejelser..

  5. @Søren og Nick Super gode løsninger. Hvis det skal bruges sådan generelt på DanDomain vil jeg dog anbefale CSS-løsningen, men i det her tilfælde har I ret i, at jQuery er mere logisk (skal jeg være ærlig havde jeg ikke lige set, at siden alligevel loader jQuery – jeg er bare fra før jQuery, så tænker altid DOM scripting).

    Og Nick – du har ret. Man bør slet ikke vride billedets størrelse, men hente et andet billede. Og ditto med CSS-løsningen. Fedt at I deler det her i kommentarerne.

  6. Tak for cowboytricket – Det virker perfekt.

Skriv et svar

Required fields are marked *.