Prisni vetëm një moment të menjëhershëm.JS!

Një vështrim në përdorimin e Algolia Instantsearch.js së bashku me MomentJS për të krijuar një kërkim ngjarjesh.

Kohët e fundit kam postuar "Një vështrim në kërkimin e ri të faqes në internet të Universitetit Keele"" dhe shpresoj të zgjerohem këtu me një përmbledhje të shkurtër se si shërbimi i kërkimit në cloud "Algolia" u përdor gjithashtu si një sistem ngjarjesh së bashku me "Terminalfour", të Keele CMS e zgjedhur.

Uebsajti i trashëguar i Keele ishte rritur ngadalë gjatë disa viteve dhe një nga rezultatet e kësaj ishte një grup i ndryshëm faqesh ngjarjesh që shpesh varroseshin në disa zona të faqes. Universiteti ka ngjarje në të gjithë të diplomuarit, artin dhe kulturën, shkollat ​​dhe fakultetet, biznesin, leksionet publike, si dhe konferenca, ceremoni diplomimi dhe ditë të hapura. Duke pasur parasysh përdoruesit e faqes sonë të internetit, ne donim t'i sillnim të gjitha këto ngjarje në një vend. Në prapaskenë, stafi ynë i brendshëm në zona të ndryshme të Universitetit do të prodhonte faqet e ngjarjeve, por strukturat e brendshme do të ishin të padukshme për vizitorët e faqes në internet. Më pas, vizitorët duhet të jenë në gjendje të shohin thjesht ngjarjet e ardhshme në Universitetin Keele. Kishte shumë mënyra për ta arritur këtë, por meqenëse ne kishim tashmë një abonim në Algolia dhe një metodë në CMS-në tonë për të tërhequr të dhëna duke përdorur "objektet e navigimit", ne kishim tashmë të gjitha mjetet për të krijuar diçka në shtëpi me kosto të ulët.

TL;DR

Ky artikull është pak më teknik se i fundit, por mund të përmblidhet si

  1. Bazuar në CMS: krijoni një Lloji i përmbajtjes "Ngjarje" me fushat e kërkuara për titullin e ngjarjes, fragmentin dhe datën e fillimit. Gjithashtu një fushë opsionale për datën e përfundimit. Mblidhni dhe eksportoni të gjitha të dhënat e ngjarjeve si JSON gati për t'u ushqyer në Algolia, por gjatë eksportit, konvertoni të gjitha datat në vula kohore linux duke përdorur paraqitjet e programueshme t4 (duke përdorur Rhino/JavaScript).
  2. Bazuar në Algoli: Duke përdorur bibliotekën IntantSearch.js, aktivizoni kërkimin duke përdorur termet e kërkimit të futura nga përdoruesi dhe datat e fillimit/mbarimit të lexueshme nga njeriu, të përcaktuara në vulat kohore të unix.
  3. Ndihmuesit e JavaScript dhe JS Frontend: Konvertoni datat e lexueshme nga njeriu në vula kohore unix duke përdorur JavaScript vanilje së bashku me programin JS, MomentJS për të lejuar manipulim të lehtë të datave dhe JavaScript të lehtë Pikaday për një kryq shfletues zbritja e datapicker.

Do të hyj në një thellësi pak më poshtë.

Përdorimi i VueJS së bashku me Algolia dhe formatimi i të dhënave të t4 është bashkuar mirë dhe ka dhënë një zgjidhje të thjeshtë dhe të qëndrueshme që plotëson kërkesat e asaj që përdoruesit tanë po kërkonin gjatë fazës së kërkimit dhe planifikimit të projektit në internet.

Krijimi i një lloji të përmbajtjes "ngjarje".

Çdo lloj përmbajtjeje në CMS-në tonë mund të dalë duke përdorur formatues të shumtë. Për shembull, faqja kryesore mund të nxjerrë në mënyrë selektive vetëm një titull ngjarjeje dhe fragment nga një shembull i një lloji të përmbajtjes së ngjarjes, ndërsa faqja e ngjarjes me të cilën lidhet mund të shfaqë titullin, imazhin, përshkrimin dhe lidhjet e rezervimit. Një lloj përmbajtjeje gjithashtu mund të nxjerrë përmbajtje në formatin JSON (ose çdo format) dhe në rastin tonë këtu, ekziston një shtresë shtesë e disponueshme që lejon daljen programatike të fushave të futura nga përdoruesi. Pra, ndërsa formatuesit tipikë nxjerrin përmbajtje të rrethuar nga etiketat html, paraqitjet e programueshme janë të dobishme për të bërë gjëra të tilla si konvertimi i të dhënave dhe më pas nxjerrja e JSON.

Komentet // në thelbin e mësipërm shpjegojnë se si merren të dhënat nga CMS, përpunohen dhe dalin si JSON. Vini re se data e përfundimit nuk kërkohet gjithmonë për një ngjarje dhe kështu e vendosim atë në një numër të plotë (0) nëse nuk është futur nga redaktori CMS.

Kategoritë u renditën si etiketa në JSON dhe të disponueshme për redaktorët tanë CMS nëpërmjet kutive të kontrollit. Ja një shembull i daljes për një ngjarje të vetme që nuk ka datë përfundimi (ngjarja është vetëm një ditë) dhe shfaqet vetëm në një kategori.

Kërkimi i ngjarjeve dhe diapazoneve të të dhënave

Kur një përdorues zbret në faqen e kërkimit të ngjarjeve, atij i paraqitet një kuti kërkimi të dhënash, si dhe një listë rënëse e datës së fillimit dhe mbarimit. Për të mbushur automatikisht datën e fillimit deri më sot dhe datën e mbarimit në dy muaj në të ardhmen, ne përdorim JS dhe Moment.

Për kategoritë, i lidha kutitë e kontrollit me një pronë Vue duke përdorur modelin v. Kjo më pas dha një term filtri reaktiv që mund të përdoret për të aktivizuar një kërkim të ri në Algolia kur përdoruesi klikon në një kategori.

Algolia ka një "parametër filtrash" që mund të filtrojë rezultatet me sintaksë të ngjashme me SQL. Bazuar në kërkesat e ngjarjeve për Keele, krijova logjikën e mëposhtme:

filtrat: '(unixStartDate:' + this.searchFrom + ' TO ' + this.searchTo + ') OSE (unixEndDate:' + this.searchFrom + ' TO ' + this.searchTo + ') DHE (' + this.checkedCategoriesString + ')',

Pra, ne po kërkojmë për të gjitha ngjarjet që kanë një datë fillimi OSE një datë mbarimi brenda intervalit të caktuar të datave DHE që përputhen me çdo kategori të zgjedhur.

Ndihmësit e Frontend JS: Pikaday, MomentJS…

Pikaday na dha një mënyrë të lehtë dhe të shpejtë për të shtuar shfletues të kryqëzuar, zgjedhës datash të aksesueshëm, të stilueshëm me mbështetje të plotë IE dhe metoda shtesë. Regjistrimi i datave në shembullin Vue më pas kaloi vlerat në filtrin Algolia.

MomentJS e bëri të lehtë konvertimin e formateve të ndryshme të datave sipas nevojës.

Si gjithmonë, një falënderim i madh për mirëmbajtësit e këtyre bibliotekave me burim të hapur.

Le ta quajmë atë një interval datash

Rezultatet e kërkimit nga Algolia janë formatuar në faqen tonë të kërkimit duke përdorur sintaksën e shabllonit Algolia. Ngjashëm me kërkimin e kursit të përmendur në postimin e mëparshëm. Elementet referohen duke përdorur sintaksën e mustaqeve dhe rezultatet zgjidhen përmes përdorimit të direktivës v-for të Vue. Kjo na lejoi të injektonim rezultatet në bibliotekën e dizajneve dhe modeleve që morëm nga Absolute, agjencia dixhitale me të cilën punuam gjatë gjithë projektit.

Reagime për kërkimin e ngjarjeve të reja

Faqja e ngjarjeve ka qenë një pjesë interesante e projektit dhe një mundësi e shkëlqyer për të bashkuar shumë ngjarje nga i gjithë Universiteti në një vend duke përdorur vetëm një sistem teknik.

Hulumtimi zbuloi se përdoruesit ishin të hutuar nga seksioni i ngjarjeve të vjetra të faqes, veçanërisht nga mënyra se si u kategorizuan ngjarjet e leksioneve. Transmetimi i rreshtimit të kategorive dhe tërheqja e ngjarjeve në një faqe kërkimi të nivelit të lartë i ka dhënë më shumë rëndësi dhe zbulueshmëri ngjarjeve në Universitetin Keele. Për sa i përket dizajnit, ne kishim gjithashtu bibliotekën e modeleve të shkëlqyera dhe moderne të përgjegjshme nga agjencia jonë Absolute.

Që nga lansimi, ne kemi shtuar objekte shtesë navigimi që shfaqin kategori specifike në faqe specifike me trafik të lartë. Një shembull është "faqja e ngjarjeve të muzikës Keele". Kjo ushqehet nga lista e ngjarjeve të mbajtura në qendër që shfaqen në faqen e rezultateve të kërkimit.

Për ngjarjet që kanë kaluar, unë kam zbatuar gjithashtu një skenar të bazuar në kohë që ndan ngjarjet në "faqet e vitit dhe muajit" nën titujt e kaluar dhe të ardhshëm.