OBS! Denna instruktion gäller INTE om man har en hemsida som har en Wordpress-lösning. Se då istället instruktionen som heter Wordpress - sätt upp e-handeln på egen hemsida

Kontakta din hemsideleverantör för hjälp.

Om du inte själv är administratör på den webbserver ni använder så måste ni kontakta dem som är det för att få hjälp med detta. Även det skript som man måste lägga in på webbsidan kontaktar man sin leverantör för att få hjälp med. Tyvärr kan inte vi på STR hjälpa till med detta steg då varken server eller hemsida levereras från oss.

Sätta upp url-rewrite regler på webbservern

För att e-handeln ska fungera att navigera direkt till undersidor så måste servern den ligger på hantera detta via s.k. ”url.rewrite” regler. Detta hanteras lite olika beroende på vilken typ av server som man kör sin sajt på. Detta hänger samman med variabeln data-base-path som beskrivs i förutsättningar i nästa avsnitt.

Microsoft IIS

Kör man på Microsoft IIS så måste man först ladda hem en URL Rewrite Extention som man hittar här: https://www.iis.net/downloads/microsoft/url-rewrite

Därefter anger man i sin Web.config fil-regler följande.

Om url:en till e-handeln ser ut så här

https://testsajt.se/e-handel

https://testsajt.se/butik/e-handel

(Om delen ”e-handel” i url:en ändras ska de gulmarkerade delarna i regel också ändras.)

Så ska rewrite regeln se ut så här:

Detta gör att allt under /e-handel omdirigeras till /e-handel.

Apache Webserver

Kör man på Apache Webserver (OBS! om man använder WordPress se separat lösning) så används en .htaccess fil som läggs i roten på webservern. Den bör då innehålla följande rader:

Lägg till en regel som ser till att alla anrop till sidor i och under den katalog där ni lägger e-handeln, pekar om till index.php (eller den sidan ni infogat html-koden för e-handeln) i den katalogen. Om ni t.ex. lägger den under www.minsajt.se/e-handel så ska .htaccess filen istället se ut så här:

OBS! Se till så att er regel hamnar innan regeln för /index.php

Tips! För hjälp med att validera era rewrite regler kan ni surfa till denna sidan

React.js app implementering på e-handelns webbsida

E-handels applikationen kan implementeras på vilken webbsida som helst då den är byggd som en s.k. React.js javascript applikation. Det innebär att den implementeras genom att infoga en html-tagg och ett script på valfri sida där applikationen ska köra. Taggen kan ligga var som helst och e-handeln laddas i det utrymme som er tagg har på sidan.

E-handeln är byggd med det responsiva css-ramverket Bootstrap som grund så den ska skala snyggt på olika enheter. Detta kan ha implikationer på den slutliga css som taggarna får på sidan beroende på hur er egen css är skriven. Därför rekommenderas att inkludera scriptet för e-handeln så sent som möjligt på sidan för att försäkra sig om att den css som e-handeln använder sig av så långt som möjligt styr över er egen css.

Detta medger dock även att det är fullt möjligt för er att själva lägga styling på taggar som tillhör e-handeln för att på så sätt anpassa den till er egen layout.

Det är m.a.o. ert eget ansvar att se till så att e-handeln ser bra ut på er sajt.

Förutsättningar för att det hela ska fungera.

1. Man måste skapa en html-tagg på sidan med id:t ”str-ecom”.
2. Denna html-tagg måste även ha två stycken data-attribut.
   1. data-customer-number: Kundnummer för den skola vars produkter man ska sälja.
   2. data-base-path: sökväg till den underkatalog där e-handeln ska peka. Exempelvis om man vill ha sin e-handel på minhemsida.se/e-handel, så anger man ”/e-handel” som data-base-path. OBS! Tänk på att du inte ska ha ett avslutande / i din base-path. 
   3. data-ga-id (valfritt): google analytics id för de som vill koppla google statistik till e-handeln
   4. data-header: är en giltig unik selector för att hitta header elementet (taggen). Dvs om elementet har ett id anger man "#id" eller om det istället har ett klassnamn så anger man ".klassnamn"
3. På samma sida inkluderar man även ett script som länkar till js-filen som initierar applikationen. Scriptet bör läggas i slutet av sidan (eller åtminstone sist bland egna script för att minimera eventuell påverkan på den css som e-handeln använder).

Det bör då se ut på följande sätt: