• Snefald
  • Design-udvidelser
  • Integrationer og Apps

    • Snefald

    I denne artikel:

      Kom i julestemning med snefald på din webshop

      Med denne app kan du indsætte "snevejr" på din webshop og skabe julestemning med en effekt af små snefnug, der falder ned over siden. Snefaldet har indbygget datofunktion og vises som udgangspunkt kun i december måned (dette kan ændres efter ønske).

       

      Sådan gør du

      For at installere denne app på din webshop, skal du blot kopiere en lille stump kode (JavaScript) og sætte den ind i dit design. Vi gennemgår indsætning af JavaScript trin for trin i denne artikel.

      Bemærk: Indsætning af JavaScript kræver at din nuværende abonnementspakke understøtter dette. Hvis du er i tvivl om hvilken pakke du har, er du velkommen til at kontakte vores kundeservice.

      Gå til Webshop > Design klik på menuen Handlinger og vælg Indsæt JavaScript:

      Indsæt nedtællingskoden (se sektionen herunder) i redigeringsfeltet med titlen "Sidens indhold (bunden)":

      Husk at gemme dine ændringer. Bemærk: Hvis koden f.eks. indsættes i Sidens header, så vil siden ikke være færdigindlæst når scriptet afvikles, og det vil derfor ikke fungere efter hensigten.

       

      Her er koden

      Denne kode er aktiv i december måned, og inaktiv resten af året:

      
<script>var currentTime=new Date,monthInt=currentTime.getMonth();11===monthInt&&function(e,n,t,o){var r=32,l="#ffffff",i=0,a=8,s=8,d=.4,f=.8,c=n.createDocumentFragment(),u=null,h=[],y=null,v=null,m=null,x=null,p=1;function g(e,n){return Math.random()*e+n}function b(){var e;e=g(d,.2),m=Math.random()>=.5?-1*e:e,x=g(f,.2)}function w(){y=e.innerWidth-a,v=e.innerHeight-s}function M(){var e=this;e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=null,e.vY=null,e.o=n.createElement("div"),e.o.style.background=l,e.o.style.position="fixed",e.o.style.zIndex="inherit",e.o.style.top=e.o.style.left=0,e.o.style.width=e.o.style.height=Math.floor(g(a,2))+"px",e.o.style.borderRadius="50%",u.appendChild(e.o),e.refresh=function(){var n,t,o;n=e.o,t=e.x,o=e.y,n.style.transform="translate("+(t-a)+"px,"+(o-s)+"px)"},e.move=function(){e.x+=e.vX*p,e.y+=e.vY,e.x>=y-a||y-e.x<a?e.x=0:e.vX*p<0&&e.x-i<-a&&(e.x=y-a-1),e.refresh(),e.y>v&&e.recycle()},e.recycle=function(){e.o.style.display="none",e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=m/Math.abs(m)*(Math.abs(m)+g(d,.1)),e.vY=x+g(f,.1),e.refresh(),e.o.style.display="block"},e.recycle(),e.refresh()}function E(){for(var n=0;n<h.length;n++)h[n].move();e.requestAnimationFrame(E)}w(),b(),(u=n.createElement("div")).id="snow",u.style.zIndex="9999",u.style.pointerEvents="none",c.appendChild(u),n.body.appendChild(c),function(e){for(var n=0;n<e;n++)h[h.length]=new M}(r),E(),e.addEventListener("resize",w)}(window,document);</script>

      Denne kode er aktiv i november og december måned, og inaktiv resten af året:

      
<script>var currentTime=new Date,monthInt=currentTime.getMonth();(11===monthInt || 10===monthInt)&&function(e,n,t,o){var r=32,l="#ffffff",i=0,a=8,s=8,d=.4,f=.8,c=n.createDocumentFragment(),u=null,h=[],y=null,v=null,m=null,x=null,p=1;function g(e,n){return Math.random()*e+n}function b(){var e;e=g(d,.2),m=Math.random()>=.5?-1*e:e,x=g(f,.2)}function w(){y=e.innerWidth-a,v=e.innerHeight-s}function M(){var e=this;e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=null,e.vY=null,e.o=n.createElement("div"),e.o.style.background=l,e.o.style.position="fixed",e.o.style.zIndex="inherit",e.o.style.top=e.o.style.left=0,e.o.style.width=e.o.style.height=Math.floor(g(a,2))+"px",e.o.style.borderRadius="50%",u.appendChild(e.o),e.refresh=function(){var n,t,o;n=e.o,t=e.x,o=e.y,n.style.transform="translate("+(t-a)+"px,"+(o-s)+"px)"},e.move=function(){e.x+=e.vX*p,e.y+=e.vY,e.x>=y-a||y-e.x<a?e.x=0:e.vX*p<0&&e.x-i<-a&&(e.x=y-a-1),e.refresh(),e.y>v&&e.recycle()},e.recycle=function(){e.o.style.display="none",e.x=g(y-a,0),e.y=-1*g(v,10),e.vX=m/Math.abs(m)*(Math.abs(m)+g(d,.1)),e.vY=x+g(f,.1),e.refresh(),e.o.style.display="block"},e.recycle(),e.refresh()}function E(){for(var n=0;n<h.length;n++)h[n].move();e.requestAnimationFrame(E)}w(),b(),(u=n.createElement("div")).id="snow",u.style.zIndex="9999",u.style.pointerEvents="none",c.appendChild(u),n.body.appendChild(c),function(e){for(var n=0;n<e;n++)h[h.length]=new M}(r),E(),e.addEventListener("resize",w)}(window,document);</script>

      Som nævnt øverst i artiklen indsættes koden på designet under Webshop > Design via funktionen Handlinger > Indsæt Javascript i feltet Sidens indhold (bunden).

      Bemærk: Så snart du klikker Gem i design manageren vil scriptet være online, og hvis den nuværende måned matcher scriptets månedsværdi vil du kunne se snefaldet. Du kan også arbejde på en kopi af dit design så du kan se hvordan snefaldet ser ud på et inaktivt design.

      Download

       

      Ændring af periode

      Hvis du ønsker at snefaldet f.eks. skal starte i november måned og fortsætte i december, så kan du ændre strengen "11===monthInt" til "(11===monthInt || 10===monthInt)" i scriptet:

      Da JavaScript benytter nulindeksering (man tæller fra 0 i stedet for 1) er november lig med "10" og december "11".

       

      Nyttige links