Share
Indiferent cât de simplu încercăm să facem aplicațiile noastre web, este adesea util să ghidăm noi utilizatori prin prima lor experiență. Tururile vizuale sunt probabil cele mai simple.
Dacă ați urmat seria Envato Tuts + Building Your Startup cu PHP, sunteți familiarizat cu Planificatorul întâlnirilor. După ce am văzut utilizatorii programând prima lor întâlnire, am decis că ar fi mai bine să construim un fel de ghid.
La început, am considerat că am construit-o eu, dar am găsit o opțiune open-source, Shepherd.
În tutorialul de astăzi, vă prezint construirea unui turneu vizual cu Shepherd. Folosirea Shepherd-ului este relativ simplă și voi examina câteva coduri pe care le-am folosit pentru a simplifica procesul de creație.
Shepherd este o sursă deschisă oferită de HubSpot, un serviciu de marketing în străinătate. Kudos pentru ei pentru a oferi o bibliotecă robustă, cu o documentație bună.
Fac participarea la subiectele de comentarii de mai jos, deci nu ezitați să puneți întrebări și să trimiteți feedbackul dvs. Mă interesează în special experiența dvs. cu alte soluții vizuale de ghid turistic. Puteți să mă contactați și pe Twitter @lookahead_io.
Să mergem printr-un scenariu simplu pentru Shepherd.
Integrarea unui tur de bază cu Shepherd la cererea dvs. este simplă. Mai întâi, alegeți un fișier tematic și integrați JavaScript-ul în felul următor:
Puteți descărca fișierele din pagina Shepherd GitHub. Eu folosesc ciobănesc-tema-arrows.css de mai sus, dar puteți alege din oricare dintre valorile implicite de mai jos și le puteți personaliza:
Apoi, creați un obiect tur:
var tur; tur = noua Shepherd.Tour (implicit: clase: 'shepherd-theme-arrows', scrollTo: true);
Valorile implicite pot fi definite pentru toți pașii când creați turul. Clasele se referă la definițiile temelor utilizate, de ex. ciobănesc-temă săgeți. Și scrollTo cu ușurință, toți pașii apar în fereastra de vizualizare vizibilă.
Apoi, adăugați pași individuali la tur:
Accentsconagua
tour.addStep ('example-step', text: 'Acest pas este atașat la partea de jos a paginii . exemplu-css-selector Element. ', attachTo:' .example-css-selector bottom ', clase:' example-step-extra-class ', butoane: [text:' Next ', action: tour.next]); text este ceea ce apare în corpul turului vizual. atașează la indică un selector CSS pentru elementul în care doriți să indicați popup-ul turului în acest pas. butoane vă permite să definiți unul sau mai multe butoane și acțiunile acestora, de ex. Următor →.
În sfârșit, începeți turul:
tour.start ();
Shepherd se bazează pe Tether, o altă ofertă HubSpot open-source, care ajută elemente de poziționare la alte elemente de pe o pagină. Tether vă asigură că pașii dvs. nu depășesc niciodată ecranul sau nu sunt tăiați.
În timp ce nu aveam probleme cu Tether, am găsit probleme cu Shepherd care nu afișa corect săgeți pe anumite elemente. Acest lucru a avut loc la întâmplare, și nu sunt singurul cu această problemă. Echipa HubSpot nu a răspuns la niciuna dintre solicitările mele GitHub după două săptămâni, ceea ce este puțin dezamăgitor. Totuși, Shepherd este în general o bibliotecă excelentă JavaScript.
Pe măsură ce am început să experimentez cu Shepherd, am descoperit rapid că scrierea unui ghid cu mai mulți pași ar putea fi destul de lungă. Acesta este un lucru pe care l-am abordat în propria mea implementare.
Nu am vrut să scriu un turneu cu un pachet lung de cod JavaScript care ar trebui să fie menținut în timp. În schimb, am ales să creez o matrice și să personalizez programatic butoanele pe baza faptului dacă utilizatorii se aflau la începutul sau sfârșitul turului.
De exemplu, creez a etapele [] matrice și a definit turul prin popularea matricei:
var tur; pași var = = []; steps.push (['. nav-tabs top', 'Bine ati venit', 'Permiteti-mi sa va arat cum sa planificati un +.Dacă preferați, puteți dezactiva acest ghid.
„]); steps.push (['#headWhat top', 'Cine ați dori să invitați?', 'Puteți adăuga o persoană sau un grup de persoane la' + title + '.Faceți clic pe butonul persoană pentru a adăuga participanți.
„]); steps.push (['# invitation-url bottom', 'Invitație prin e-mail', 'Alternativ, poți trimite prin e-mail linkul de întâlnire către participanții dvs.']); steps.push (['# headWhat Bottom', 'Despre ce vă întâlniți?', 'Aveți posibilitatea să personalizați subiectul titlului + +. Vom folosi pentru e-mailurile de invitație și memento.Faceți clic pe butonul creion pentru a edita subiectul.
„]); dacă "($ ('# headActivity") lungimea> 0) steps.push ([' #headActivity top ',' Ce vrei să faci? ',' Puteți sugera una sau mai multe idei de activitate. participanții dvs. vă pot ajuta să selectați preferatul acestora.Faceți clic pe butonul plus pentru a sugera activități.
„]); steps.push (['#headWhen început', 'Când doriți să vă întâlniți?', 'Sugerați una sau mai multe date și ore pentru' + titlu + '. Cu mai mulți participanți, participanții vă pot ajuta să alegeți.Faceți clic pe butonul + pentru a le adăuga.
„]); steps.push (['# headWhere top', 'Unde doriți să întâlniți?', 'Sugerați unul sau mai multe locuri pentru' + titlu + '. Cu mai multe locuri, participanții vă pot ajuta să alegeți.Utilizăm Google Locații pentru a simplifica adăugarea acestora. Faceți clic pe butonul + pentru a începe.
„]); steps.push (['. virtualThing top', 'Este o întâlnire virtuală?', 'Comutați între în persoană și virtual '+ titlu +', cum ar fi apeluri telefonice sau conferințe online.]]; steps.push (['# actionSend top', 'Trimiterea invitațiilor', 'Programarea este colaborativă. După adăugarea timpilor și a locurilor, puteți A invita participanții să-și aleagă preferințele. Un loc nu este necesar pentru virtuale + + titlu + '\ s.„]); steps.push (['# actionFinalize right', 'Finalizarea planului', 'Odată ce ați ales un timp și un loc, puteți Complet planul. Vom trimite prin e-mail invitațiile și mementourile de configurare.]]; steps.push (['# tourDiscussion left', 'Share messages with participants', 'Puteți scrie înainte și înapoi cu participanții la Mesaje fila.Mesajele sunt trimise prin e-mail.
„]); steps.push (['container', 'Pune o intrebare', 'Ai nevoie de ajutor? Pune o intrebare si vom raspunde cat de repede poti.Dacă preferați, puteți dezactiva ghidul în setări.
„]);
Fiecare element de matrice pe care l-am adăugat a inclus trei elemente:
'#headingCe top' 'Când vrei să ne întalnim?' Menținerea acestei matrice a fost mult mai simplă pentru mine decât definirea butoanelor pentru fiecare pas al tutorialului. Cu toate acestea, aceasta a însemnat că aveam nevoie să definim programatic butoanele așa cum am încărcat pașii în tur.
Am scris acest cod pentru a adăuga și răspunde corect butoanelor pentru tur. Cu fiecare pas, creează o buton array, pe care altfel ar trebui să o definim manual:
pentru (i = 0; i < steps.length; i++) buttons=[]; // no back button at the start if (i>0) butoane.push (text: 'Înapoi', clase: 'shepherd-button-secundar', action: function () return tourback (); // nu butonul următor în ultimul pas dacă (i! = (steps.length-1)) butoane.push (text: 'Următor', clase: 'shepherd-button-primary' retur tur.next ();); altceva butoane.push (text: 'Închide', clase: 'shepherd-button-primary', acțiune: function () return tour.hide (););
De exemplu, primul pas nu are Înapoi , iar ultimul pas nu are Următor → buton. Dar ultimul pas are a Închide buton.
Apoi, fiecare Etapa de la matricea mea și de la fiecare buton se adaugă la tur.
(1), pas (i) [i] [0], // clase: "pasarica" [i] [i] [i] shepherd-theme-arrows shepherd-transparent-text ", butoane: butoane,);
Folosind această abordare, nu trebuia să redefiniți în mod repetat aceleași butoane pentru fiecare pas din tutorialul meu. Oferă de asemenea o capacitate programabilă de personalizare a turului dinamic pentru viitor.
Folosind Yii, cadrul de programare PHP ales, am adăugat fișierele necesare includ fișierele mele de fișiere. Acest lucru este încărcat în anumite pagini unde este necesar un tur. În cazul meu, pagina de programare a întâlnirii:
Veți vedea mai sus CSS pentru tema Shepherd și JavaScript pentru Tether, Shepherd și fișierul meu de definire a turului,
meeting_tour.js.Am adăugat, de asemenea, CSS pentru a controla lățimea totală a pop-up-ului meu de tur 40% din fereastra de vizualizare:
.shepherd-element.shepherd-temă-săgeți max-width: 40%;Puteți viziona exemplul tur video de mai sus sau la Vimeo. Dacă doriți să încercați singur, înscrieți-vă la Planificatorul de întâlniri și veți fi imediat luați la turneul de planificare.
Alte lucruri de luat în considerare
Oprirea turului vizual
Am creat o setare de utilizator pentru ca oamenii să poată opri rapid turneul. Mai degrabă decât să includă un buton de distragere a atenției la fiecare pas, am adăugat un link către opriți ghidajul în primul și ultimul pas al turului:
Oprirea se face în mod interactiv prin AJAX și afișează un link util la pagina de setări de mai jos. Acest lucru îi ajută pe utilizatorii noi să găsească cu ușurință modalitatea de a relua turul:
Capabilitățile avansate de Shepherd
Tocmai v-am arătat elementele de bază ale Shepherd-ului și cum să le integrez rapid în aplicația dvs. web. Până acum, a funcționat bine pentru mine în afară de problemele ocazionale cu săgețile. Cu toate acestea, Shepherd oferă mult mai mult decât am revăzut, în special în ceea ce privește procesarea și gestionarea evenimentelor. Acest lucru vă permite să vă adaptați turul la aplicația dvs. și la starea actuală a utilizatorului într-un mod mai personalizat. Ei au și o documentație foarte bună.
De exemplu, dacă un utilizator sare într-o anumită zonă a paginii dvs. web, puteți avea evenimentul să declanșeze automat un salt într-o altă etapă a turului. M-aș putea arunca într-un tutorial viitor.
În încheiere
Sper că te-ai bucurat să afli despre Shepherd. Este cu siguranță un tur vizual vizibil lustruit, dezvoltator, pe care îl puteți integra rapid în orice aplicație.
Vă rugăm să vă împărtășiți experiența cu Shepherd și cu alte biblioteci vizuale vizuale în comentarii. Și nu ezitați să puneți întrebări.
De asemenea, puteți să mă contactați direct pe Twitter @lookahead_io direct. Dacă doriți să citiți mai multe despre tutorialele mele Envato Tuts +, iată câteva dintre ele interesante:
Link-uri conexe
