Share
Oavsett hur enkelt vi försöker göra våra webbapplikationer är det ofta användbart att styra nya användare genom sin första erfarenhet. Visuella turer är sannolikt det enklaste sättet.
Om du har följt min Envato Tuts + Bygg din start med PHP-serien, är du bekant med mötesplanerare. Efter att ha tittat på användare som planerade sitt första möte bestämde jag mig för att det skulle vara bäst att bygga någon form av guide.
Först ansågs jag bygga det själv, men då hittade jag en öppen källkod, Shepherd.
I dagens handledning presenterar jag dig för att bygga en visuell användar turné med Shepherd. Att använda Shepherd är relativt enkelt, och jag granskar en del av min egen kod som jag använde för att effektivisera författnings processen.
Shepherd är ett open source-erbjudande från HubSpot, en inkommande marknadsföringstjänst. Kudos till dem för att erbjuda ett robust bibliotek med bra dokumentation.
Jag deltar i kommenterade trådar nedan, så var god och fråga frågor och dela din feedback. Jag skulle speciellt vara intresserad av din erfarenhet med andra visuella tour guide lösningar. Du kan också nå mig på Twitter @lookahead_io.
Låt oss gå igenom ett enkelt scenario för Shepherd.
Att integrera en grundläggande turné med Shepherd till din ansökan är enkel. Först väljer du en temafil och integrerar deras JavaScript så här:
Du kan ladda ner filerna från Shepherd GitHub-sidan. Jag använder herde-theme-arrows.css ovan, men du kan välja mellan något av standardvärdena nedan och anpassa dem:
Därefter skapar du ett reseobjekt:
var tour; tour = new Shepherd.Tour (default: classes: 'shepherd-theme-arrows', scrollTo: true);
Standardinställningarna kan definieras för alla steg när du skapar turnén. Klasserna hänvisar till de temadefinitioner du använde, t.ex.. herde-tema-pilar. Och scrollTo hjälper till att alla steg visas i det synliga visningsporten.
Sedan lägger du till enskilda steg till turnén:
Accentsconagua
tour.addStep ('example-step', text: 'Detta steg är fastsatt längst ner på sidan . exempel-css-väljaren element. ', attachTo:' .example-css-selector bottom ', klasser:' exempel-steg-extra-klass ', knappar: [text:' Next ', action: tour.next]);De text är det som syns i den visuella turnéens kropp. bifoga till pekar på en CSS-väljare för objektet som du vill att turneringsmenyn ska peka på i det här steget. De knappar tillåter dig att definiera en eller flera knappar och deras handlingar, t.ex.. Nästa.
Och äntligen börjar du turnén:
tour.start ();
Shepherd bygger på Tether, ett annat HubSpot open source-erbjudande, vilket hjälper positionelement till andra element på en sida. Tether ser till att dina steg aldrig överflödar skärmen eller får beskäras.
Medan jag inte hade några problem med Tether hittade jag problem med Shepherd, som inte visade riktigt pilar på vissa element. Detta hände slumpmässigt, och jag är inte den enda med detta problem. HubSpot-teamet har inte svarat på någon av mina GitHub-förfrågningar efter två veckor, vilket är lite nedslående. Fortfarande är Shepherd överlag ett bra JavaScript-bibliotek.
När jag började experimentera med Shepherd upptäckte jag snabbt att det var ganska långvarigt att skapa en guide med många steg. Detta är något jag tagit upp i min egen implementering.
Jag ville inte författa turnén med ett långsamt JavaScript-kod som skulle behållas över tiden. Istället valde jag att skapa en matris och programmässigt anpassa knapparna baserat på om användarna var i början eller slutet av turnén.
Till exempel skapar jag en steg[] array och definierade turnén genom att fylla i arrayen:
var tour; var steg = []; steps.push (['. nav-tabs top', 'Välkommen', 'Tillåt mig att visa dig hur du planerar en' + title + '.Om du föredrar kan du stänga av den här handboken.
']); steps.push (['# headingWho top', 'Vem vill du bjuda in?', 'Du kan lägga till en person eller en grupp personer till din' + title + '.Klicka på personknappen för att lägga till deltagare.
']); steps.push (['# invite-url bottom', 'Inbjudan via e-post', 'Alternativt kan du maila möteslänken till din deltagare (er)')); steps.push (['# headingWhat bottom', 'Vad är ditt möte om?', 'Du kan anpassa ämnet till din' + title + '. Vi använder det för inbjudan och påminnelser.Klicka på pennknappen för att redigera motivet.
']); om $ ('# headingActivity'). längd> 0) steps.push (['# headingActivity top', 'Vad vill du göra?', 'Du kan föreslå en eller flera aktivitetsideer. Deltagarna kan hjälpa dig att välja sin favorit.Klicka på plusknappen för att föreslå aktiviteter.
']); steps.push (['# headingWhen top', 'När vill du träffas?', 'Föreslå ett eller flera datum och tider för din' + title + '. Med mer än en kan dina deltagare hjälpa dig att välja.Klicka på + för att lägga till dem.
']); steps.push (['# headingWhere top', 'Vart vill du träffas?', 'Föreslå ett eller flera platser för din' + title + '. Med flera platser kan dina deltagare hjälpa dig att välja.Vi använder Google Places för att förenkla att lägga till dem. Klicka på + för att börja.
']); steps.push (['. virtualThing top', 'Är detta ett virtuellt möte?', 'Växla mellan i person och virtuell '+ titel +' s som telefonsamtal eller onlinekonferenser. ']); steps.push (['# actionSend top', 'Sending invitations', 'Scheduling is collaborative. När du har lagt till tider och platser kan du Inbjudan deltagare att välja sina favoriter. En plats är inte nödvändig för virtuella "+ title + '\ s.']); steps.push (['# actionFinalize right', 'Slutför planen', 'När du väl har valt en tid och plats kan du Komplett planen. Vi kommer att maila inbjudningarna och inställningsinställningarna. ']); steps.push (['# tourDiscussion left', 'Dela meddelanden med deltagare', 'Du kan skriva fram och tillbaka med deltagare på meddelanden flik.Meddelanden levereras via e-post.
']); steps.push (['container', 'Ställ en fråga', 'Behöver du hjälp? Ställ en fråga och vi kommer att svara så fort vi kan.Om du föredrar kan du stänga av guiden i inställningarna.
']);
Varje matriselement som jag lade till innehöll tre saker:
'#headingWho top' 'När vill du träffas?' Att behålla denna array var mycket enklare för mig än att definiera knappar för varje steg i handledningen. Detta innebar emellertid att jag behövde programmera definierade knappar när jag laddade stegen i turnén.
Jag skrev denna kod för att lägga till och svara på knappar för turnén korrekt. Med varje steg skapar det en knapp array som jag annars skulle behöva definiera manuellt:
för (i = 0; i < steps.length; i++) buttons=[]; // no back button at the start if (i>0) buttons.push (text: 'Back', klasser: 'shepherd-button-secondary', åtgärd: funktion () return tourback ();); // ingen nästa knapp på sista steget om (i! = (steps.length-1)) buttons.push (text: 'Next', klasser: 'Shepherd-Button-Primary' returnera tour.next ();); else buttons.push (text: 'Close', klasser: 'shepherd-button-primary', åtgärd: funktion () return tour.hide (););
Till exempel har det första steget nej Tillbaka knappen, och det sista steget har nej Nästa knapp. Men det sista steget har en Stänga knapp.
Då, var och en steg från min grupp och varje knapp array läggs till turnén.
tour.addStep ('step _' + i, text: steg [i] [2], titel: steg [i] [1], attachTo: steg [i] [0], // klasser: "herdeherd herde-tema-pilar herde-transparent-text ", knappar: knappar,);Med hjälp av detta tillvägagångssätt behövde jag inte upprepade gånger omdefiniera samma knappar för varje steg i min handledning. Det erbjuder också lite programmässig förmåga att anpassa turnén dynamiskt för framtiden.
Med hjälp av Yii, min utvalda PHP-programmeringsram, lade jag till att det var nödvändigt att inkludera filer i min tillgångsfil. Detta laddas på särskilda sidor där resan behövs. I mitt fall, mötesplaneringssidan:
Du kommer att se ovanför CSS för Shepherd-temat och JavaScript för Tether, Shepherd och min tour definition-fil,
meeting_tour.js.Jag har också lagt till CSS för att styra den övergripande bredden av min tur popup till 40% av utsikten:
.shepherd-element.hepherd-theme-pilar maxbredd: 40%;Du kan se exemplet turnévideo ovan eller på Vimeo. Om du vill prova själv, anmäla dig till mötesplanerare och du kommer omedelbart till planeringsturen.
Andra saker att tänka på
Stänger av Visual Tour
Jag skapade en användarinställning för att folk snabbt stängde av turnén. Snarare än att inkludera en distraherande Av-knapp på varje steg, lade jag till en länk till stäng av styrningen på första och sista steget i turen:
Avstängning sker interaktivt via AJAX och visar en bra länk till inställningssidan nedan. Detta hjälper nya användare enkelt att hitta hur man sätter på turnén igen:
Shepherds avancerade förmågor
Jag har just visat dig grunderna i Shepherd och hur man integrerar det snabbt i din webbapplikation. Hittills har det fungerat bra för mig bortsett från tillfälliga problem med pilar. Shepherd erbjuder dock mycket mer än jag har granskat, särskilt kring händelsehantering och hantering. Detta gör att du kan anpassa din turné till din ansökan och användarens nuvarande tillstånd på ett mer anpassat sätt. De har också mycket bra dokumentation.
Om en användare till exempel hoppar till ett visst område på din webbsida kan du få händelsen att automatiskt utlösa ett hopp till ett annat steg i turnén. Jag kan dyka in i det här i en framtida handledning.
I stängning
Jag hoppas att du har haft lärt dig om Shepherd. Det är verkligen en visuellt polerad, utvecklingsvänlig visuell turné som du snabbt kan integrera i alla applikationer.
Vänligen dela din erfarenhet med Shepherd och andra visuella turbibliotek i kommentarerna. Och tveka inte att ställa frågor.
Du kan också alltid nå mig på Twitter @lookahead_io direkt. Om du vill läsa mer av mina Envato Tuts + handledningar, här är några intressanta:
relaterade länkar
