Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Transkript

1 e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 ( ) 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

2 Innehållsförteckning När visas mobilversionen 1 Teknisk lösning 1 Innehållsförteckning 2 Så kommer du igång 3 Inställningar 3 Aktivera mobilversionen 3 Skyltningar 3 Navigering 4 Crosselling för artiklar 4 Anpassa mobilversionen 5 Logotyp för mobilversionen 5 Egen design via CSS 5 Egen JavaScript eller jquery scriptfil 5 Färginställning för mobilversionen av e-line 6 Kom igång 7 Fortsätt på befintlig CSS-fil 8 Generell instruktion för val av färger 9 Typsnitt 9 Sidhuvud och Sidfot (Header/Footer Bar) 10 Allmän textfärg, bakgrundsfärg och färg på länkar 10 Knappar 10 Navigeringsträdets noder och knapp för ihop fällbart innehåll 11 Generell inställning för aktivt tillstånd ( Active state ) 11 Länkar i sidfoten 11 Redigera direkt i CSS-filen 11 eline_mobilversion.doc / Sid 2

3 Så kommer du igång Inställningar Alla egenskaper som styr mobilversionen av e-line finns i rutin 791 Egenskaper Pyramid e- line 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

4 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

5 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

6 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: 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 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

7 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

8 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 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. Öppna ThemeRollern med version Klicka på knappen Import or upgrade överst på sidan. 3. Töm den stora inmatningsrutan på eventuellt innehåll. 4. Kopiera hela CSS-koden från den befintliga CSS-fil in i inmatningsrutan. 5. Klicka på Import. eline_mobilversion.doc / Sid 8

9 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 # 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

10 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

11 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