e-line mobilversion
Pyramid Business Studio 3.42A servicepack 05
(2015-07-13)
Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att
endast valda delar av innehållet i fullversionen visas eller är tillgängliga i mobilversionen samt att det
visas på ett sätt som är tydligare på små skärmar. I dagsläget innehåller mobilversionen funktionalitet
för att se alla artiklar som finns i din e-handel och köpa dem.
När visas mobilversionen
När du surfar till e-line med en mobil enhet känner applikationen automatiskt av detta och
presenterar mobilversionen. Du kan enkelt växla från mobilversionen till fullversionen via
länken ”Fullversion” som finns i mobilversionens sidfot. På samma sätt kan du som
användare alltid komma åt mobilversionen via länken ”Mobil version” i fullversionens
sidfot.
Teknisk lösning
Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jQuery
Mobile-ramverket.
eline_mobilversion.doc/ Sid 1
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Innehållsförteckning
När visas mobilversionen
Teknisk lösning
1
1
Inställningar
Aktivera mobilversionen
Skyltningar
Navigering
Crosselling för artiklar
3
3
3
4
4
Logotyp för mobilversionen
Egen design via CSS
Egen JavaScript eller jQuery scriptfil
5
5
5
Innehållsförteckning
Så kommer du igång
2
3
Anpassa mobilversionen
5
Färginställning för mobilversionen av e-line
6
Kom igång
Fortsätt på befintlig CSS-fil
Generell instruktion för val av färger
Typsnitt
Sidhuvud och Sidfot (Header/Footer Bar)
Allmän textfärg, bakgrundsfärg och färg på länkar
Knappar
Navigeringsträdets noder och knapp för ihop fällbart innehåll
Generell inställning för ”aktivt tillstånd” (”Active state”)
Länkar i sidfoten
Redigera direkt i CSS-filen
7
8
9
9
10
10
10
11
11
11
11
eline_mobilversion.doc / Sid 2
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Så kommer du igång
Inställningar
Alla egenskaper som styr mobilversionen av e-line finns i rutin 791 Egenskaper Pyramid eline Layout och verktyg, fliken Mobil.
Mobilversionen följer de inställningar du gjort för fullversionen av e-line med undantag för
egenskaperna ovan samt nedanstående punkter:
•
•
•
”Typ av navigering” är alltid ”Träd komprimerat” som här har lite annat utseende
och annan funktionalitet.
Visningstypen för varugrupper och skyltningar utgår från ”Utökad lista”.
Visning av variantartiklar visas alltid som ”Rullgardinsmeny delad”.
Aktivera mobilversionen
Aktivera mobilversionen genom att markera kryssrutan ”Aktivera mobil version”.
Skyltningar
SKYLTTYP SKYLTFÖNSTER
Ange den skyltning som ska vara startsidan i mobilversionen. Du kan givetvis använda en
skyltning som redan används i fullversionen.
Om du har en allmän bild eller text kopplad till den skyltning du valt som startskyltning
kommer dessa alltid att visas i mobilversionen.
eline_mobilversion.doc / Sid 3
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
VISA SKYLTTEXT
De allmänna texter och bilder du kan ha kopplat till dina skyltningar visas kanske inte på ett
bra sätt när de förminskas i mobilversionen. Vi har därför valt att inte visa skylttext på
skyltningarna såvida du inte markera denna egenskap. Skylttexten visas dock alltid på
startskyltning/skyltfönster.
Navigering
HUVUDVY NAVIGERING
Ange här det navigeringsträd som ska användas i mobilversionen.
Om en inloggad användare tillhör en kundkategori som har en annat navigeringsträd kommer
denna att visas även i mobilversionen.
VISA VYBILDER
Du kan välja att visa bilder före texten på varje nod i navigeringsträdet genom att markera
denna egenskap. Bilderna som används är de vybilder som du anger för respektive nod i
rutin 3915 Navigeringsträd under gruppboxen Vysida, fältet Bild.
Crosselling för artiklar
VISA CROSSELLINGARTIKLAR
Markera kryssrutan för att även i mobilversionen visa den crosselling som är angiven för
artiklarna i rutin 3911 e-artiklar.
VISA CROSSELLINGTEXT
Markera kryssrutan för att även i mobilversionen visa den crossellingtext som är angiven för
artiklarna i rutin 3911 e-artiklar.
eline_mobilversion.doc / Sid 4
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Anpassa mobilversionen
Logotyp för mobilversionen
Du kan välja att ha en annan logotyp i mobilversionen än den du har i fullversionen. Skapa
en logotypbild med namnet logo_mobile.png. Placera den i katalogen Site, som du skapat i
den katalog som angivits under sökvägen för lokala filer i rutin 791 e-line Kommunikation,
fliken Lokala filer. Gör därefter uppskick i rutin 3972 Uppskick webbserver av Eget
material, Lokala filer/site. Finns det ingen logo_mobile.png kommer den vanliga logo.png
bildfilen att användas istället.
Egen design via CSS
På samma sätt som du kan skapa en egen design i fullversionen kan du göra det för
mobilversionen. Skapa en CSS-fil med namnet user_mobile.css. Placera den i katalogen CSS
som du skapat i den katalog som angivits under sökvägen för lokala filer i rutin 791 e-line
Kommunikation, fliken Lokala filer. Gör därefter ett uppskick i rutin 3972 Uppskick
webbserver av Eget material, Lokala filer/css.
Egen JavaScript eller jQuery scriptfil
Precis som för fullversionen av e-line finns det möjlighet att lägga till en egen fil med
JavaScript eller jQuery kod för mobilversionen. Om du har en scriptfil för fullversionen
kommer den inte att läsas in till mobilversionen.
Döp scriptfilen till user_mobile.js. Placera den i katalogen CSS som du skapat i den katalog
som angivits under sökvägen för lokala filer i rutin 791 e-line Kommunikation, fliken Lokala
filer. Gör därefter ett uppskick i rutin 3972 Uppskick webbserver av Eget material, Lokala
filer/scripts.
Den HTML <script> tag som refererar till user_mobile.js filen i e-line finns placerad i
HTML-dokumentets nedre del. jQuery biblioteket finns implementerat i HTML-dokumentets
<head> tag. Det kan vara bra att tänka på att det även finns ett antal andra JavaScript filer i
e-line som kan påverka eller påverkas av din user_mobile.js.
eline_mobilversion.doc / Sid 5
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Färginställning för mobilversionen av e-line
För att göra en egen färginställning för mobilversionen av e-line kan du med fördel använda ett
verktyg på internet som heter ”ThemeRoller for jQuery mobile” (hädanefter kallat för ThemeRoller).
Du använder verktyget för att välja typsnitt och färger för din mobilversion och du får då
CSS-kod genererad direkt av verktyget. Denna CSS-kod använder du sedan i din
user_mobile.css som fungerar på samma sätt som user.css för fullversionen av e-line.
Verktyget finns på följande adress:
http://themeroller.jquerymobile.com/?ver=1.3.2
När du öppnar ThemeRollern visas en välkomstruta. Den kan du bara klicka bort genom att
trycka på ”Get Rolling”.
Obs!
Mobilversionen använder sig av version 1.3.2 av jQuery mobile. Det är därför viktigt att
kontrollera att den versionen är vald i ThemeRollern. Det sker automatiskt om du använder
ovanstående länk.
eline_mobilversion.doc / Sid 6
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Kom igång
Börja med att hämta in jQuery mobile ramverkets standard (default) färger. Det gör du
genom att klicka på knappen ”Import or upgrade” och därefter på länken ”Import Default
Theme” i den dialog som öppnats. Slutför genom att klicka på knappen ”Import”. Du bör nu
se att panelerna markerade A-E fått olika färger från svart till gult. Detta är jQuery mobile
ramverkets olika inbyggda färgteman.
I Pyramids e-handel används flera av dessa grundfärgteman. När du börjar göra dina egna
val är det viktigt att hålla reda på i vilken panel (A-E) som du ska göra inställningar för vad.
I avsnitten nedan nämns vilken panel du ska göra redigeringen i.
Ett färgtema kallas i jQuery mobile ramverket för ”swatch”, vilket du ser om du väljer någon
av menyvalen till vänster på sidan ”Global”, ”A”, ”B”, … osv. Det är här du gör dina
inställningar och resultatet visas sedan i panelerna till höger.
ÄNDRA TYPSNITTET (FONT)
För att prova på hur allt fungerar ska vi börja med att ändra typsnittet (font) i din
mobilversion. Detta är inget som kommer att bli permanent, du kan lätt ändra eller ta bort det
senare om du vill.
Under ”Global” i menyn finns valet ”Font Family”. Klicka på det, för att fälla ut innehållet,
dvs en inmatningsruta där det står ”Helvetica, Arial, sans-serif”. Ändra typsnitten genom att
istället skriva in ”Courier”. Du bör nu se att typsnittet på texten i alla paneler till vänster har
ändrats till det skrivmaskinliknande typsnittet Courier. Alla paneler ändras i det här exemplet
eftersom det är en global inställning.
GENERERA CSS-KOD
Nästa steg är att generera CSS-kod som du kan använda för att få typsnittet Courier i din
mobilversion. Klicka på knappen ”Download theme zip file” överst på sidan. Ange ett namn
på ditt tema i inmatningsrutan ”Theme name”. Du kan döpa ditt tema till nästan vad du vill,
men det rekommenderas att redan nu döpa det till user_mobile.
När du klickar på knappen ”Download Zip” skapas ett så kallat zip-arkiv, en katalog med
komprimerade filer, som bland annat innehåller den CSS-fil vi vill ha. Zip-arkivet laddas
även ner till din dator.
eline_mobilversion.doc / Sid 7
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Beroende på vilken webbläsare du använder kan detta zip-arkiv hittas på lite olika ställen. I
många fall kommer det att finnas en tydlig anvisning om var någonstans i din webbläsare du
ska klicka. I annat fall behöver du leta reda på var nedladdade (downloaded) filer hamnar i
just din miljö.
Inne i zip-arkivet hittar du CSS-filen i katalogen ”themes”. Den har det namn du angav ovan,
exempelvis ”user_mobile.css”. En minifierad (komprimerad) fil har även skapats på samma
plats, den heter motsvarande ”user_mobile.min.css”.Du ska inte använda den minifierade
filen eftersom e-line tar hand om minifieringen i ett senare skede.
Placera din user_mobile.css fil i din ”Lokala filer/css” mapp till din Pyramid och gör ett
uppskick i rutin 3972. Om du inte döpt din fil till ”user_mobile.css” kan du i detta skede
välja att döpa om den till detta namn eller så kopierar du innehållet från din CSS-fil till en
eventuell redan befintlig ”user_mobile.css”.
Du bör nu se att typsnittet i din mobilversion ändrats till ”Courier”.
Fortsätt på befintlig CSS-fil
Om du vill fortsätta att arbeta med en CSS-fil (ett ThemeRoller färgtema) som du skapat
tidigare, kan denna importeras in i ThemeRollern. I praktiken görs detta genom att klippa
och klistra.
1.
2.
3.
4.
5.
Öppna ThemeRollern med version 1.3.2.
Klicka på knappen ”Import or upgrade” överst på sidan.
Töm den stora inmatningsrutan på eventuellt innehåll.
Kopiera hela CSS-koden från den befintliga CSS-fil in i inmatningsrutan.
Klicka på ”Import”.
eline_mobilversion.doc / Sid 8
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Generell instruktion för val av färger
Du kan ange en färg för en egenskap på olika sätt i ThemeRollern. Vet du vilken färg du vill
ha och känner till dess hexadecimala färgkod, kan du ange den direkt (exempelvis #000000
för svart och #ffffffff för vitt) i inmatningsfältet. Annars kan du ta hjälp av det inbyggda
färgvalsverktyget.
För att få fram färgvalsverktyget klickar du inne i inmatningsfältet där en färg kan anges. I
den yttre ringen väljer du vilken färg du vill utgå ifrån och i den inre fyrkanten kan du sedan
justera ditt val ytterligare. Det är valet i den inre fyrkanten som används. För att stänga ner
färgvalsverktyget och fastställa ditt val klickar du bara med musen någonstans utanför
färgväljaren.
Det finns ett tredje alternativ för att välja en färg och det är att utnyttja det verktyg som finns
precis ovanför panelerna på sidan. Där kan du välja en färg och dra den in till den yta du vill
sätta färgen på direkt i panelen eller till inmatningsfältet på vänstersidan av skärmen.
Typsnitt
Typsnitt anges under fliken Global och val ”Font-family” i menyn. Standardmässigt ska du
hålla dig till typsnitt som är ”websafe”, dvs. säkra för att använda på nätet. Det innebär att de
med största sannolikhet finns installerade på dina kunders datorer. Exempel på sådana
typsnitt är: Arial, Palatino Linotype, Tahoma, Century Gothic, Lucida Sans Unicode.
Googla gärna på ”websafe fonts” för att hitta flera kandidater och få inspiration. I många fall
anger du mer än ett typsnitt med ett kommatecken mellan. Det fungerar då så, att om det
första typsnittet i raden inte finns installerat går datorn vidare till nästa osv.
eline_mobilversion.doc / Sid 9
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Sidhuvud och Sidfot (Header/Footer Bar)
1. Välj swatch/panel B i menyn till vänster.
2. Klicka på ”Header/Footer Bar”.
3. ”TEXT COLOR”. Här anges färgen på text i sidhuvud och sidfot som inte är länkar.
För länkar, se nedan under Länkar i sidhuvud och sidfot.
4. ”TEXT SHADOW”. Ger en skuggeffekt till texten. De fyra värden som kan anges är
(från vänster till höger):
• Antal pixlar som skuggan ska ligga från originalet, i horisontell riktning.
• Motsvarande i vertikal riktning.
• Ett värde på hur tydlig skuggan ska vara. Det behöver inte anges.
• Färgen på skuggan.
5. ”BACKGROUND”. Här anges färgen på bakgrunden till sidhuvud och sidfot.
Förutom att ange en specifik färg kan du även ange en gradient. Prova att dra
reglaget vid sidan av inmatningsfältet åt olika håll. Alternativt klicka på +
(plustecknet) vid sidan av reglaget. Då fälls ytterligare två inmatningsrutor ut. I
dessa kan du ange en startfärg för gradienten och en slutfärg.
6. ”BORDER”. Här anges vilken färg ramen kring sidhuvud och sidfot ska ha. Vill du
inte ha en avvikande ram anger du bara samma färg som på bakgrunden.
Allmän textfärg, bakgrundsfärg och färg på länkar
1. Välj swatch/panel C i menyn till vänster.
2. Klicka på ”Body”.
3. ”LINK COLOR”. Här anges färgen på texten i klickbara länkar. Om du trycker på +
(plustecknet) vid sidan av inmatningsfältet får du fram möjligheten att sätta färg på
ett antal olika tillstånd för länken:
• ”hover” - färg när du för muspekaren över länken.
• ”active” - färg på länken precis när du klickat på den.
• ”visited” - färg på länkar som användaren tryckt på.
4. ”TEXT COLOR”. Här anger du färgen på allmän text. Texten kan även ges en
skuggning – se ”TEXT SHADOW” under Sidhuvud/Sidfot.
5. ”BACKGROUND”. Här anges färgen för den generella bakgrunden. Det är
bakgrund på produktsidor, kassasida och i botten på startsidan. Precis som för
”BACKGROUND” för sidhuvud/sidfot (se ovan) kan du även välja att ange en
gradient och en färg på ramen.
Knappar
1. Välj swatch/panel B i menyn till vänster.
2. Klicka på Button: Normal.
3. Förutom knappens normalutseende kan du ange färger för två andra tillstånd för
knappar. Dessa är ”hover” (mus över) och ”pressed” (precis när användaren tryckt
på knappen).
eline_mobilversion.doc / Sid 10
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns
eline_mobilversion.doc
2015-07-13
Navigeringsträdets noder och knapp för ihop fällbart innehåll
Navigeringsträdets noder designas som knappar i swatch/panel C. Den design du gör för
detta kommer även att gälla knappar för ihopfällbart innehåll, exempelvis ”Produkter” på
startsidan, ”Beskrivning” på produktsidan och ”Jag är redan kund” på kassasidan.
1. Välj swatch/panel C i menyn till vänster.
2. Klicka på Button: Normal.
3. Förutom knappens normalutseende kan du ange färger för två andra tillstånd för
knappar. Dessa är ”hover” (mus över) och ”pressed” (precis när användaren tryckt
på knappen).
Observera att de färger du anger här även kommer att användas på navigeringsträdets noder.
Generell inställning för ”aktivt tillstånd” (”Active state”)
När du trycker på knappar eller väljer en nivå i navigeringsträdet, skiftar knappen snabbt
över till en blå färg. För att ändra detta ska du gå in under ”Global” i menyn till vänster.
Under ”Active state” kan du ange textfärg, eventuell textskugga osv för detta så kallade
aktiva tillstånd.
Länkar i sidfoten
Länkarna i sidfoten kan du bara ändra färg på genom att redigera direkt i CSS-koden dvs. du
kommer inte åt det via ThemeRollern. (Se ”Redigera direkt i CSS-filen” nedan).
Sök dig fram till följande rader med kod i din user_mobile.css fil.
.ui-bar-b a.ui-link {
color: #ddf0f8;
font-weight: bold;
}
Ändra värdet ”#ddf0f8” efter ”color:” till den hexadecimala färgkod du vill använda på
länkarna, avsluta raden med semikolon.
Under ovanstående kodavsnitt finns en nästan identisk kod, upprepad tre gånger med den
skillnaden att det står :visited, :hover och :active i den översta raden. Detta ger dig möjlighet
att på motsvarande sätt ange färg för länkar i sidfoten som besökts (visited), förts
muspekaren över (hover) samt precis klickats på (active).
Redigera direkt i CSS-filen
När du har laddat ner en CSS-fil från ThemeRollern har du tillgång till den kompletta koden
för färgstylingen av din mobila e-handel. Det ger dig möjlighet att redigera direkt i CSSkoden.
eline_mobilversion.doc / Sid 11
Unikum Datasystem AB
Traktorvägen 14
226 60 LUND
Tel 046 - 280 20 00
Fax 046 - 280 20 01
[email protected]
www.unikum.se/
Pg 469294-3
Bg 699-9205
VAT: SE 556223-4798
F-skattebevis finns