Category Archives: Shoporama udvikling

Kreative Shoporama løsninger

En shop er bare en shop, er en shop, er en shop, ikke?

Forkert… for ved Shoporama har du fuld designfrihed over html, css og Javascript. Det betyder, du kan være kreativ og lave din side mere brugervenlig.

Tager det tid?

-Ja

Koster det penge?

-Måske lidt til din udvikler.

Er det pengene og tiden værd?

Sandsynligvis. Som webshop skal du med sådanne muligheder og din chat jo besvare de spørgsmål, som din kunde ellers ville stille til en ekspedient i en fysisk forretning.

Her skal vi ikke debattere om det er pengene værd. Vi viser dig bare nogle muligheder.

Liams vikle-beregner

Webshoppen Liams sælger vikler og slynger. Indehaveren Lea fortalte mig til et arrangement, at 9 ud af 10 af de spørgsmål, hun fik, var “hvilken størrelse vikle, skal jeg have?”. Vi talte om det, og det viser sig at ud fra tøjstørrelse og personens højde, kan man nemt beregne viklens størrelse. Så …. hendes udvikler lavede en hurtig beregner, der besvarer på det spørgsmål. Du kan se beregneren i funktion her.

Se viklestørrelse ved Liams

 

HD2412s hegnsberegner

Webshoppen HD2412 sælger hegn og ting til juletræsproduktion. Folk der skal bygge et hegn skal vide, hvor mange hjørnepæle, støttepæle og mellempæle, de skal bruge. Det er ikke svært at regne ud, så det gør shoppen for dem. De skal bare indtaste længden på hegnet og hvor mange vinkler, der er på hegnet. Så får de svaret lige der, hvor de kan købe udstyret til det.

Du kan se hegnsberegneren her.

Hvor meget hegn, skal jeg bruge

Radimets backend

Webshoppen Radimet sælger udstyr til at måle radon.  Det kræver for nogle af deres produkter, at kunden sender radonmåleren ind til et laboratorium, som så udlæser radon-niveauet.

Radimet har bygget deres egen backend, hvor brugeren logger ind og kan læse resultatet. De har tilmed indbygget, at man får en mail, når ens resultat er klart.

Tricks til dine automatiske mails

I denne post vil vi samle diverse tricks til dine automatiske emails.

God weekend som afslutning

Vil du afslutte dine mails med “God weekend” på fredage og lørdage skal du blot inkludere dette

<{assign var="tempdato" value=$smarty.now}>
    <{if $tempdato|date_format:"%u" == 6 || $tempdato|date_format:"%u" == 5}>
        <p>God weekend</p>
    <{else}>
        <p>Med venlig hilsen</p>
    <{/if}>

Godmorgen & godaften
I mails der er sendt om morgenen (mellem 4 og 10) kan du hilse velkommen med et godmorgen eller et godaften, hvis mailen ryger ud mellem 19 og 23. Den kode du skal bruge ser sådan ud:

<{assign var="hours" value=$smarty.now|date_format:"%k"|intval}>
<{assign var="weekday" value=$smarty.now|date_format:"%u"|intval}>
<{assign var="tempdato" value=$smarty.now}>

<{if $hours>4 && $hours<10 }>Godmorgen<{elseif $hours>19 && $hours<23}>Godaften<{else}>Hej<{/if}>

Brug kundens fornavn i din hilsen

(Bemærk – kan kun bruges med lukket kurv).

Tricket her hiver kundens fornavn ud og skriver f.eks. “Hej Peter”.

<{assign var="names" value=" "|explode:$order->getOrderName()|escape}>

        <p>Hej <{$names[0]|ucfirst}></p>

Nævn kundens produkter i emnelinjen

(Bemærk kan kun bruges med lukket kurv)

Gør dine mails mere relevante ved at nævne kundens produkter i emnelinjen af payment_mail.html. Det gør du sådan her:

<{assign var="products" value=$order->getProducts()}>
<{if $subject}>
Du var ved at købe  <{$products[0]->getName()|escape|lower}> <{if $products|@count > 1}>m.m. <{/if}>. Fortrød du?
<{/if}>

Tak til Lars Holmgaard for kodeeksempler og kreativ inspiration.

Vi tilføjer løbende tricks til her.

God fornøjelse med at hacke dine mails.

 

Gør din shop klar til Facebooks dynamiske annoncer

Facebook har en feature, der hedder “dynamic ads”. Ganske kort går det ud på, at en kunde er forbi din webshop. Facebook opsamler information om, hvilke varer kunden ser. Næste gang hun er på Facebook eller Instagram, så er der på magisk vis reklamer for netop de produkter hun så i din shop.

Ren magi, ikke? :-)

Nuvel – vi har allieret os med Halfdan Timm fra Obsidian her for at guide dig igennem, hvordan du får det sat op. Halfdann sidder dagligt med Facebook marketing og har også skrevet en bog om emnet.

Du skal bruge fem ting:

1) En Facebook pixel på din side (læs her hvordan du sætter den ind). Det er gratis og det bør du gøre allerede i dag, så du begynder at indsamle data til Facebook.

2) Et produktfeed med alle dine produkter (det skal ind i Facebook, så de kender alle dine produkter)

3) Et “viewcontent” på dine produktsider. Vi skal fortælle Facebook, når kunden har set et produkt.

4) En event, der bliver skudt af til Facebook, når din kunde smider en vare i kurven.

5) En konverterings-event, så Facebook ved, hvornår en kunde har konveteret.

Det er ca. dét – lad os komme i gang.

Pkt. 1 er der taget hånd om

Du skal bare lige finde din Facebook pixel først. Her kan du læse, hvordan du laver en Facebook pixel.

Pkt 2. – Lav et produktfeed

Du kan egentligt bare bruge dit feed fra Google Shopping.  Men ellers er der en xml skabelon her, som du kan bruge. Den skal gemmes i dit tema som f.eks. fb-produkter.xml

<?xml version="1.0"?><rss xmlns:g="http://base.google.com/ns/1.0" version="2.0">
    <channel>
        <title>Alle varer</title>
        <link><{$landing_page->getRemoteUrl()}></link>
        <description></description>

        <{assign var="products" value=$landing_page->getProducts()}>
        <{section name="i" loop=$products}>
            <{assign var="images" value=$products[i]->getImages()}>
            <{assign var="supplier" value=$products[i]->getBrand()}>
            <item>
                <title><{$products[i]->getName()|escape}></title>
                <link><{$products[i]->getRemoteUrl()}></link>

                <g:id><{$products[i]->getProductId()}></g:id>

                <{if $products[i]->getSalePrice()}>
                    <g:price><{$products[i]->getPrice(null, null, true)|number_format:2:".":","}> DKK</g:price>
                    <g:sale_price><{$products[i]->getSalePrice(null, null, true)|number_format:2:".":","}> DKK</g:sale_price>
                <{else}>                    
                    <g:price><{$products[i]->getPrice(null, null, true)|number_format:2:".":","}> DKK</g:price>
                <{/if}>
                <g:availability>in stock</g:availability>
                <{section name="j" loop=$images max=1 start=0}>
                    <g:image_link><{$webshop->getUrl()}><{$images[j]->getSrc(800,800, 'fit')}></g:image_link>
                <{/section}>

                <g:condition>new</g:condition>

                <{assign var=hovedkat value=$products[i]->getMainCategory()}>
                <{if $hovedkat}>
                    <{if $hovedkat->getMetaValue('g:google_product_category')}>
                        <g:google_product_category><{$hovedkat->getMetaValue('g:google_product_category')}></g:google_product_category>
                    <{/if}>
                <{/if}>

                <{if $products[i]->hasVariants()}>
                    <{assign var="profile" value=$products[i]->getProfile()}>
                    <{assign var="attr" value=$profile->getAttributeList()}>

                    <{section name="h" loop=$attr}>
                        <{if $attr[h]->getDataType() == "valuelist"}>

                            <{assign var="values" value=$attr[h]->getValues()}>
                            <{assign var="tempgtin" value=0}>
                            <{section name="k" loop=$values}>
                                <{if $tempgtin == 0}>
                                    <{if $products[i]->getInStock($attr[h]->getAttributeId(), $values[k]->getAttributeValueId()) > 0}>
                                        <g:gtin><{$products[i]->getGtin($values[k]->getAttributeValueId(),$attr[h]->getAttributeId())}></g:gtin>
                                        <{assign var="tempgtin" value=1}>
                                    <{/if}>
                                <{/if}>
                            <{/section}>

                        <{/if}>
                    <{/section}>

                <{else}>                
                    <g:gtin><{$products[i]->getGtin()}></g:gtin>                
                <{/if}>
                <{if $supplier}>
                    <g:brand><{$supplier->getName()}></g:brand>
                <{/if}>

                <g:product_type></g:product_type>
            </item>
        <{/section}>
    </channel>
</rss>

Nu opretter du en landingsside med alle de produkter du vil have i feedet (skal det bare være dem alle, kan du vælge "pris større end 0" som regel.

Du indsætter fb-produkter.xml i “eget feed”-feltet.

Pkt. 3 – viewcontent

Det er ret simpelt. Vi skal bare skyde lidt kode af, så Facebook kan se, at kunden har set en vare. Så denne kode skal ind på product.html

<script> _fbq.push('track', 'ViewContent', {content_ids: ['<{$product->getProductId()}>'], content_type: 'product'}); </script>

Nemt ikke?

Pkt. 4 – registrere, når der er lagt en vare i kurven

Det er en lille bitte stump kode, der skal på din læg i kurv-knap. Den ser sådan ud

<input type="submit" name="submit" value="Læg i kurv" id="submit" onclick="fbq('track', 'AddToCart');"/>

Det er jo kun “onclick”-delen du skal have tilføjet.

Pkt. 5 – registrere salg

Det er også supernemt. Denne kode skal ind på din thanks.html side (eller ecommerce_tracking.html – det er en smagssag)

<script type="text/javascript">
        fbq('track', 'Purchase', {value: '<{$order->getPrice()|number_format:2:".":""}>', currency: 'DKK'});
    </script>

Så er du så godt som i mål.

Nu kan du gå i Facebook og oprette dine dynamiske annoncer.

 

Tweak din søgefunktion til at vise kategorier

Søgningen i Shoporama søger kun på produkter.

Men ind imellem søger folk på en kategori eller et brand og så kan det være praktisk at de ryger direkte over på en side med alle disse produkter. Her kommer et trick til at løse den opgave (kræver du kan trylle med din SFTP editor).

Lad os antage en bruger søger på Faktorfobi på “Hummel”. Hvis der er Hummel produkter på shoppen, som ikke lige har ordet “Hummel” i hverken navn eller beskrivelse, så vil de ikke blive vist i en søgning. Derfor giver det mere mening at sende de besøgende direkte ind på siden med Hummel badetøj.

Nuvel… hvordan gøres det så? Først ændrer vi lige søgestrengen til lowercase for at gøre det lidt nemmere. Så sender vi dem videre med JavaScript. Koden ser således ud:

<{if $get.search|lower == "hummel"}>
<script type="text/javascript">
    window.location = "https://www.faktorfobi.dk/hummel-badetoej";
</script>
<{/if}>

Det er alt :-)
Nu er det bare at oprette alle de specielle søgninger, du vil have her med en elseif-sætning.

 

Google Adwords remarketing koder

For at benytte Google Adwords remarketing, skal der lidt ekstra koder ind. Det er

  • et script på produktsiden, der fortæller Google, hvilke produkter de har set
  • et script i din indkøbskurv, der fortælle Google, hvem der har været i kurven og hvad de har haft i kurven
  • et script på ordrekvitteringssiden, hvor de tracker, hvem der har købt og hvad de har købt.

Bemærk at denne her kode ikke tager højde for varianter.

Det skal alt sammen sættes ind med SFTP editor og koden er som følger:

Produktsiden (product.html):

<script type="text/javascript">
        var google_tag_params = {
        ecomm_prodid: ['<{$product->getProductId()}>'],
        ecomm_pagetype: 'product',
        ecomm_totalvalue: '<{$product->getRealPrice()|number_format:2:".":""}>'
        };
        </script>

Indkøbskurven (basket.html):

<{if $basket}>
    <{assign var="k" value=0}>
    <{section name="i" loop=$basket}>
        <{assign var="product" value=$basket[i].product}>
        <{if $k==0}>
            <{assign var="ecommtracking" value="'"|cat:$product->getOwnId()|cat:"'"}>
            <{assign var="k" value=1}>
        <{else}>
            <{assign var="ecommtracking" value=$ecommtracking|cat:",'"|cat:$product->getOwnId()|cat:"'"}>
        <{/if}>    
    <{/section}>

    <script type="text/javascript">
        var google_tag_params = {
            ecomm_prodid: [<{$ecommtracking}>],
            ecomm_pagetype: 'cart',
            ecomm_totalvalue: '<{$total_price|number_format:2:".":","}>'
            };

    </script>
<{/if}>

Ordrebekræftelsen (thanks.html eller ecommercetracking.html hvis du bruger den)

<{assign var="products" value=$order->getProducts()}>
    <{assign var="k" value=0}>
    <{section name="i" loop=$products}>
        <{if $k==0}>
            <{assign var="ecommtracking" value="'"|cat:$products[i]->getOwnId()|cat:"'"}>
            <{assign var="k" value=1}>
        <{else}>
            <{assign var="ecommtracking" value=$ecommtracking|cat:",'"|cat:$products[i]->getOwnId()|cat:"'"}>
        <{/if}>        
    <{/section}>    
    <script type="text/javascript">
        var google_tag_params = {
            ecomm_prodid: [<{$ecommtracking}>],
            ecomm_pagetype: 'purchase',
            ecomm_totalvalue: '<{$order->getPrice()|number_format:2:".":","}>'
            };

    </script>

Der udover kan det være en fordel at smide lidt ekstra oplysninger ind på kategorier, landingssider, søgesiden og statiske sider. Det er denne kode, du kan smide ind i global.html

<{if $category}>
        <script type="text/javascript">
        var google_tag_params = {
        ecomm_pagetype: 'category',
        ecomm_category: '<{$category->getName()|escape}>'
        };
        </script>
    <{/if}>

    <{if $landing_page}>
        <script type="text/javascript">
        var google_tag_params = {
        ecomm_pagetype: 'category',
        ecomm_category: '<{$landing_page->getName()|escape}>'
        };
        </script>
    <{/if}>

    <{if $search}>
        <script type="text/javascript">
        var google_tag_params = {
        ecomm_pagetype: 'search'
        };
        </script>
    <{/if}>

    <{if $page}>
        <script type="text/javascript">
        var google_tag_params = {
        ecomm_pagetype: 'other'
        };
        </script>
    <{/if}>

Lav lynhurtigt mails til kunder

Dagens yderst brugbare tip er leveret af Lars Holmgaard (vi siger mange tak):

Det ville være enormt uprofessionelt at komme til at linke til en anden kundes ordre i en mail, så jeg checker og dobbeltchecker altid at det er den rigtige url jeg paster ind.

Det kunne være en mail jeg sender til en kunde, hvis jeg kan se de ikke har gennemført betalingen eller det kunne være, der var noget jeg havde brug for at spørge kunden om.

Nu har jeg lavet det så der ikke kan ske manuelle fejl, så slut med copy-paste af ordre-link og email.

● På selve /ordre-siden hvor kunden kan se sin ordre, har jeg lavet et link allernederst. Når jeg klikker på det, så er email-feltet udfyldt med kundens email, der står “Hej <kundens navn>” inde i mailen og nedenunder står linket til kundens ordre-side.

Så slipper jeg for at huske, hvad kunden nu hed, om det er den rigtige mail og url og kan i stedet for koncentrere mig om at formulere indholdet af mailen.

Det er ikke svært – du kan selv fixe det i din order.html template.

Brug denne kodelinie til linket:

<{if $cookie.user_token}>
<a href="mailto:<{$order->getEmail()|escape}>?subject=Din%20bestilling%20hos%20os&amp;body=Hej%20<{$order->getOrderName()|escape}>,%0D%0A%0D%0A<{$order->getPublicUrl()|escape:'url'}>%0D%0A">Kontakt kunde</a>
<{/if}>

blog2 Link til kunde på order-siden

Hvordan opsætter man EAN betaling

Shoporama kan ikke selv oprette en EAN faktura for dig. Så den del må du stadig selv stå for. Men du kan lave en betalingsmulighed, der hedder EAN faktura. Her er en kort guide til hvordan:

1) Gå ind i Shoporama og opret en betalingsmulighed, der hedder EAN betaling under “betalingsgateways”. Du skal vælge “Andet” under dropdown i Type.

2) Vi anbefaler, du vælger “Marker automatisk nye ordrer som betalte”, så du ikke overser dem blandt dine ordrer.

Det er alt!
Bemærk du selv kan lave noget JavaScript validering (eller html5 validering) af at der er indtastet et 13-cifret tal.

Feed til prisjakt.nu

Vil du i gang med at sælge til svenskerne, så kan prisjakt.nu være et fint sted at have sine varer. De kræver, at du laver et feed – og det er selvfølgelig også nemt på Shoporama :-)

Du gør sådan:

1) Få din udvikler til at lave en fil, der hedder prisjakt.xml og smid dette ind

Produktnamn;Art.nr.;Kategori;Pris inkl.moms;Produkt-URL;Tillverkare;Tillverkar-SKU;Frakt;Bild-URL;Lagerstatus
<{assign var="products" value=$landing_page->getProducts()}>
<{section name="i" loop=$products}>
<{$products[i]->getName()|escape}>;<{$products[i]->getOwnId()}>;<{if $products[i]->getMainCategory()}><{assign var="tempcat" value=$products[i]->getMainCategory()}><{$tempcat->getName()}><{/if}>;<{$products[i]->getRealPrice()|number_format:2:".":""}>;<{$webshop->getUrl()}>/<{$products[i]->getUrl()}>;<{assign var="tempsupplier" value=$products[i]->getSupplier()}><{if $tempsupplier}><{$tempsupplier->getName()}><{/if}>;;[FRAKT];<{assign var="images" value=$products[i]->getImages()}><{if $images}><{section name="j" loop=$images start=0 max=1}><{$webshop->getUrl()}><{$images[j]->getSrc(300, 300, 'fit')}><{/section}><{/if}>;Ja
<{/section}>

Han skal lige være opmærksom på at han skal hardcode fragten ind, der hvor der står [FRAKT] – og evt. tilføjet et leverandør-SKU, hvis du har det.

2) Lav en landingsside med alle dine produkter (som du vil have derovre).

3) Sæt noindex på

4) I “eget feed” skriver du prisjakt.xml så det ser sådan ud

Prisjakt csv fil til Shoporama

 

 

 

Så er det bare at klikke gem og sende filnavnet der (det med prisjakt-feed.xml) til prisjakt (og ja… så gøre klar til de svenske kunder).

Billeder på statiske sider

Ét af Shoporamas svage punkter er, at du ikke bare kan klippe klistre dine sider til med billeder alle mulige steder.

Men der er en løsning. Den er ikke køn brugervenlighedsmæssigt, men den er fleksibel, så du kan få det stort set, som du vil ha’ det (bare du har en udvikler inde over). Lad os se på det.

Du skal sådan set bare oprette en side og tilknytte et par billeder som du gør på kategorier, produkter etc. I din tekst indsætter du så bare [PIC1] og [PIC2], hvor du vil have dine billeder. Se eksemplet herunder.

Indsætte billeder på statiske sider i Shoporama

 

 

 

 

 

Derefter klikker du Gem.

Du skal nu bare have lavet en “søg og erstat” i din skabelon. Det skal du have din designpartner eller udvikler til.

Koden består af to dele. Først skal vi lige have tildelt vores billeders URL til nogle variabler. Det ser sådan ud:

<{assign var="images" value=$page->getImages()}>
    <{if $images}>
        <{section name="i" loop=$images start=0 max=1}>
            <{assign var="tempbill1" value=$images[i]->getSrc(800, 800, 'fit')}>
            <{assign var="bill1" value="<img src='$tempbill1'>"}>
        <{/section}>

        <{section name="i" loop=$images start=1 max=1}>
            <{assign var="tempbill2" value=$images[i]->getSrc(800, 800, 'fit')}>
            <{assign var="bill2" value="<img src='$tempbill2'>"}>
        <{/section}>

        <{section name="i" loop=$images start=2 max=1}>
            <{assign var="tempbill3" value=$images[i]->getSrc(800, 800, 'fit')}>
            <{assign var="bill3" value="<img src='$tempbill3'>"}>
        <{/section}>
    <{/if}>

Dernæst skal vi have lavet søg og erstat på variablerne og skrive al vores tekst (med billederne ud). Det ser sådan ud:

<{assign var="temptekst" value=$page->getText()}>
    <{$temptekst|replace:'[PIC1]':$bill1|replace:'[PIC2]':$bill2|replace:'[PIC3]':$bill3}>

Den her kan kun lige spise 3 billeder. Har du brug for mere, er jeg sikker på, at din udvikler kan gennemskue princippet.

Flere skabeloner – mere gejl

Vil du tage den et skridt videre, så kan du vælge at få din udvikler til at lave skabeloner, så der f.eks. står “skabelon=venstrestillet” eller “skabelon=tekstombrydning” i dine ekstrafelter på siden. Så kan der opsættes regler for om billederne skal være i venstre side, om teksten skal ombrydes eller hvad.

Hastighedsoptimering af din Shoporama-shop

Jeg vil også forsøge at holde det så lavtech som muligt, så here goes.

Det er vigtigt at sige at hastighedsoptimering selvfølgelig er en del af det at levere et tema, men at det typisk er det sidste man sætter ind på. Det tager tid at optimere i bund og den bedste optimering kan hurtigt smadres hvis senere opdateringer ikke bliver optimeret også. Og den første prioritet jo er at lave et tema der spiller 100% på alle de normale faktorer så man rent faktisk kan bruge shoppen.

Her er lidt tanker…

Minifying

Et website’s kosmetik og interaktion er populært sagt typisk sat sammen af 3 typer kode. HTML, CSS og Javascript. Alle 3 kan komprimeres for at gøre Google glad. HTML og CSS minifiseres ved at fjerne alle unødvendige mellemrum i koden og dybest set lave én kodelinie presset helt sammen. Men med javascript er det både en omskrivning og sammenpresning.

Det er vidt forskelligt hvordan der arbejdes med css og javascript, men typisk er der et mindre antal javascript-plugins i et tema. Det kunne fx være et der styrer en slider, et der henter billeder fra instagram, et der styrer hvordan kurven opdaterer varer, et der zoomer på produktbilleder etc etc. Og i dag er der stort set altid smidt noger der hedder jQuery ind også. Alle disse plugin-filer ligger som regel for sig. Det er altså muligt at lægge dem alle sammen i samme fil og komprimere den. Det giver x antal mindre requests og trykker indholdet sammen i en meget mindre fil end det de fylder til sammen – hver for sig.

Det er ikke noget man gør i hånden det her – det sker ved hjælp af preprocessors. Personligt bruger jeg Mixture.io (er desværre blevet lukket for) eller codekit. Og ja, det kræver desværre lidt teknisk snilde at fikse.

Gør: I den perfekte verden hentes der ét stylesheet (css) og én javacript-fil per side. Sørg for at komme så tæt på som muligt.


Requests

Shoporama har en funktion der kan tage af det med antallet af requests når det kommer til css og javascripts. Det kan du læse om her: http://doc.shoporama.dk/Templates/examples/templates/packed_files

Et request er hver gang websitet spørger en server efter en fil. Det kan være css, javascript eller fx billeder. Hver gang der i html’en eller i css’en bliver spurgt til en fil bliver der lavet et request til serveren. Der kan også requestes til eksterne servere. Det er fx populært at bruge såkaldte CDN (content delivery networks) – det kan sagtens være en god ting da der derfor kan hentes flere filer på én gang. Det vil jeg ikke gå mere ind på da det bliver en meget teknisk omgang.

Et request er fx også din google analytics installation, din facebook-pixel eller din sleeknote-installation. Der er håb for de først 2 nævnte – mere om det under eksterne scripts.

Fidusen er at skrue ned for antallet af requests. Der hvor der kan sammenlægges eller spares bør der spares.

Gør: Brug Shoporamas sammenlægningsfunktion hvis du ikke kan minifisere filerne. 


Ikon-skrifttype eller svg-sprite og billedsprites

Har man en masse ikoner på sin side kan det tit svare sig at lave en skriftype ud af dem. Dette gør sig dog mest gældende ved en-farvede ikoner da skriftyper ikke kan indeholde forskellige farver. Har man dog behov for farver kan der kigges ind i at lave en svg-sprite med disse. En svg er en vektoriseret billedfil som er fuldt skalérbar lige som en skrifttype fx er. Vektor-filer er små klumper kode i modsætningen til billedfiler der er pixels og farver.

Bruger man mange billeder kan disse med fordel lægges sammen i ét billede. Derefter viser man det udsnit af billedet der skal bruges en en given situation. Alt dette er igen for at spare på antallet af requests.


Smarty-{strip}

Det er en lille ting. Meget lille faktisk, men det er let at gøre. Smarty, som er det templating-sprog shoporama-temaerne er lavet på, har en fin html-minifying feature. Hvis man tilføjer {strip} *** hele tema-fil-indholdet *** {/strip} omkring alt i sine tema-filer komprimerer den html-outputtet. Det er desværre sådan at hver gang man inkludere en fil så laver den en ny linie i html’en. Men.. det bliver trods alt mere komprimeret. Tag fx en ‘vis kilde’ på dybsort.dk

Gør: Tilføj {strip} omkring din tema-kode


Lazy loads

Der er flere måder at hente billedfiler på. Har man mange eller tunge billeder kan det godt betale sig at ‘lazy loade’ dem. Det kan gøre på mange forskellige måder, men det man skal huske på er at hvis billeder er sat ind med helt almindelige tags eller henvisninger så henter browseren dem. Også selv der ikke er scrollet ned til dem endnu.

Tricket er at snyde browseren til først at hente billederne når der er brug for dem. Der findes flere javascript-plugins derude og de hardcore kodere kan snildt kode et selv. Senest har jeg haft fin glæde af et plugin der hedder Layzr.js (https://callmecavs.github.io/layzr.js/). I img-src har jeg brugt en loadanimation i form af en gif og så i en såkaldt data-attribut sat den rigtige billedsti. Så laver layzr et tjek på hvor langt man er scrollet ned på siden og om billedet der skal hentes skal være synligt eller ej. Skal det være synlig bytter den rundt på data-attributten og img-src’en. Og vupti så henter browseren billedfilen. On demand. Produklister eller produktsider med tunge billeder kan dette være en stor fordel på.

Alt dette kræver fikses i tema-filerne.

Gør: Hent billeder når der er brug for dem. Det er godt for den initielle performance – og derved Googles glæde.


Billedoptimering

Alle dine tema-billed-filer bør optimeres inden de lægges live. Det kan være baggrundsbilleder, ikoner, logoer etc. De filer som ikke lægges op via Shoporamas backend. Photoshop optimerer så godt som den kan, men bare ikke helt godt nok. Selv bruger jeg et lille tool til mac’en der hedder ImageOptim (https://imageoptim.com/da/), men der findes også online tools der kan hjælpe fx kraken.io. Det der rent praktisk sker er at de fjerner alt overflødige der ligger i billedfilerne. Der gemmes et hav af informationer i billeder i dag – informationer som er totalt unødvendige til formålet på jeres shop.

Gør: Kør alle tema-billeder igennem et billedoptimeringstool. Du kan med fordel også køre billeder der skal uploades via shoporama gennem tool’et også. Så er de da ihvertfald presset godt inden. 


Eksterne scripts

Google Analytics, Sumome, Sleeknote, Facebook, Addthis, <indsæt ny smart service her>. De kommer hver dag disse services og det er super fedt. Men det er ikke sikkert at de implementeringsscripts der følger med er optimerede. Faktisk er Googles egne scripts tit dem der bon’er ud på Google Pagespeed Insights – paradoks ik? Har du iøvrigt prøvet at sætte google.com ind i Insights?

Der er ikke så meget at gøre ved det. De skal være der. Men man kan bruge Google Tagmanager (GTM). I GTM kan man nemlig lægge mange andre af disse tracking scripts ind og derved spare nogle requests. Det er en lang forklaring, men jeg vil anbefale dig at læse lidt op på det. Bedste forslag: google it.

Gør: Benyt Google Tagmanager til håndtering af tracking scripts.


Shoporama klarer resten …

…har allerede en masse hastihedsoptimering bygget ind i motoren. Det meste af det ligger så dybt at det ikke er noget du skal tænke over. Men der er dog lige et par indstillinger der skal være på plads.

Billedoptimering

Under tandhjulet og “optimering” er det muligt at presse størrelsen på dine billeder i generel forstand. Det er altid en vurderingssag hvor meget man vil presse det for jo lavere tallet er jo lavere bliver billeder i kvalitet. Et sted mellem 50 og 75 bør kunne tilfredsstille de fleste.

Caching

Mens du bygger dit site, ændrer tekster, billeder eller andet kan det godt være smart at slå cachingen fra. Det kan være irriterende at opdatere sit site uden at kunne se ændringerne slå igennem. Det er dog selvfølgelig vigtigt at slå cachingen til igen når alt er fikset. Det er en ret stor del at hastighedsoptimeringen at sitet bliver cachet. Så huske den lille checkbox.

optimering

Gør: Find en passende billedkvalitet. Husk at slå caching til.


Tools

Pagespeed insights (https://developers.google.com/speed/pagespeed/insights/)

Det mest ikke-technørd-venlige tool derude i dag er Google Page Speed Insights. På dejlig pædagogisk vis viser den med farver og procenter hvor godt sitet er optimeret i Google øjne. Og så der kommer en lille forklaring på de ting Google anbefaler at der skal fikses. Sørg for at være gul. Det er ikke en skam at være i 70’erne for de kan der være mange grunde til. Men sigt da selvfølgelig efter en grøn score ;-).

Pingdom (http://tools.pingdom.com/fpt/)

Med Pingdom kan du teste fra flere forskellige steder i verden. Man får også en mere “rigtig” loadtids-indikation og en ret udførlig teknisk tilbagemelding bare i gratis-versionen. Din benchmark-indikation er “your website is ….” linien der kommer under tallene når testen er færdig. Men “Perf grade”- og “load time”-tallene er naturligvis det vigtige her. Google ser fx helst at sitet er hurtigere end 1,5 sekund at hente.

pingdom

YSlow for chrome

Du kan også installere ySlow til din chrome browser. YSlow giver også rigtig god information og bedømmer sitets helhed og dele efter den amerikanske skoleskala. Dog vist uden + og – ;-) A = super godt. G = Not so much.

Gør: Kør dit site igennem disse tests for hver optimering du har foretaget dig. Er det for teknisk så bed din webnørd om at kigge med.

Din designpartner/webnørd er sikkert allerede skarp på disse punkter. Så tag en snak med vedkommende hvis du synes din shop hænger med måsen.

Happy optimizing :-)