‫Istruttore: Riempiamo ora ciascuno degli elementi della
‫scheda con i dati corretti per ciascuno dei tour.
‫Quindi, giusto per fare un breve riassunto.
‫In un ultimo video abbiamo iniziato creando questo elemento principale
‫e un elemento all'interno di un contenitore div, quindi
‫all'interno di quel contenitore
‫vogliamo uno di questi elementi della
‫carta per ciascuno dei tour che arrivano nell'array
‫che passiamo a questo modello.
‫E per questo usiamo un array Pug che
‫funziona proprio così.
‫Quindi, qual è ogni parola
‫chiave qui e il risultato di farlo assomigliava a questo, va bene.
‫E quindi quello che faremo ora è
‫fondamentalmente, riempire ognuna di queste carte qui con i dati effettivi.
‫E cominciamo qui con il nome del tour.
‫Quindi, ricorda come mettiamo il valore di una variabile all'interno
‫di un elemento.
‫Bene, usiamo equal e quindi in questo caso tour.
‫Quindi, il nome
‫della variabile nell'iterazione del ciclo corrente, giusto.
‫E quindi questo è un documento del tour e poi il nome del punto, ricorda.
‫Quindi, controlliamolo in bussola molto velocemente.
‫Quindi, qui abbiamo quattro tour
‫e quindi questi
‫sono tutti i dati di cui avremo bisogno ora, ok.
‫E iniziando con il nome qui, ok.
‫E quindi, se ora ricarichiamo la nostra pagina, ciò
‫dovrebbe riflettersi qui.
‫E quindi è qui che inizia la magia e ha funzionato.
‫E quindi questa è la prima volta
‫che vediamo davvero i dati del database che vengono
‫effettivamente resi sul sito web.
‫Quindi, qui abbiamo il nome del tour per ciascuno
‫dei tour e di nuovo questo sta uscendo direttamente dal nostro database.
‫Quindi, fantastico, è davvero fantastico
‫e quindi ora continuiamo a costruire questa carta.
‫Quindi, qui sull'immagine ora.
‫Mettiamo anche il testo alternativo al nome del tour.
‫Ora non possiamo semplicemente inserire un nome di punto del tour
‫qui perché siamo all'interno di una
‫stringa e quindi non funziona.
‫Allo stesso
‫tempo, se lo facciamo
‫in questo modo, non funzionerà nemmeno perché qui questo
‫Alt si aspetta effettivamente una stringa, ok.
‫Quindi abbiamo bisogno di alcune virgolette qui intorno a questa variabile.
‫E quindi il modo più semplice
‫per farlo è utilizzare effettivamente le stringhe del modello ES6, ok.
‫Quindi, proprio così e di nuovo questo è
‫perché questo in realtà qui si aspetta che entri una
‫stringa e quindi con questo ovviamente stiamo creando una stringa.
‫Quindi specifichiamo qui l'immagine, ok.
‫Quindi, diamo un'altra occhiata alla
‫bussola per vedere come appare l'immagine di copertina.
‫E quindi abbiamo una proprietà chiamata image
‫cover e quindi qui abbiamo solo il nome dell'immagine stessa.
‫Quindi, non il percorso verso l'immagine. =
‫e quindi dovremo effettivamente specificare manualmente, ok.
‫Quindi, ma ciò che conta qui è che
‫si chiama copertina dell'immagine.
‫E quindi sbarazziamoci di tutto questo.
‫Inizia creando una stringa modello
‫e poi visita la copertina dell'immagine del punto e
‫ora dobbiamo
‫capire l'intero percorso verso quell'immagine, ok.
‫E quindi, come già sappiamo, i dati dell'immagine si
‫trovano all'interno della cartella pubblica.
‫Quindi, la cartella da cui verranno serviti
‫tutti gli asset
‫statici e quindi qui abbiamo le immagini.
‫E poi abbiamo una cartella.
‫Uno per i tour e uno per gli utenti, ok.
‫E così all'interno di ciascuno di questi
‫tour abbiamo poi le tre foto e una foto di copertina.
‫Quindi, sembrerà qualcosa del genere.
‫E quindi il percorso qui è tour punto immagine o tour barra
‫e poi barra il nome dell'immagine, fantastico.
‫Quindi questo dovrebbe rendere gli
‫interi siti Web ancora migliori ora sì.
‫Ora sta davvero cominciando a prendere vita.
‫Quindi, è fantastico.
‫Questo mi fa sentire davvero bene
‫ogni volta che funziona.
‫Ad ogni modo, ora ci occupiamo del resto
‫dei dati che ovviamente
‫sembrano ancora gli stessi su tutte queste carte, ok.
‫E quindi ora usiamo i dati nella nostra raccolta
‫per costruire questa stringa qui.
‫Quindi, vedi che questa è in realtà
‫una combinazione di dati diversi.
‫Quindi, abbiamo la difficoltà e la durata del tour
‫e quindi ora creiamo una stringa modello.
‫Quindi, fondamentalmente assegna questa stringa di modello a questo elemento.
‫E quindi iniziamo qui con la difficoltà del punto del tour,
‫ricordate, quindi lo spazio e poi la durata del tour, il tour
‫di un giorno della durata del punto del tour, ok.
‫Quindi, questa è la traduzione di questo contenuto.
‫Poi quello che abbiamo qui è il riepilogo del tour, ok.
‫Quindi, riassunto del punto uguale del tour, va bene.
‫Quindi il prossimo passo abbiamo la posizione di partenza e quindi
‫questo tour, ad esempio, inizia
‫a Banff Canada e quindi diamo ancora un'occhiata alla
‫bussola qui solo per vedere come
‫appaiono i dati o in realtà
‫non abbiamo bisogno di passare sempre avanti
‫e indietro a bussola.
‫Possiamo anche semplicemente aprire o importare i dati qui.
‫Quindi, nei tour possiamo semplicemente usare questi dati qui
‫invece di andare sempre alla bussola.
‫Quindi, prima di utilizzare il riepilogo ora,
‫andiamo avanti e utilizziamo la posizione di partenza che
‫è effettivamente qui sopra.
‫Quindi, ora vogliamo la descrizione del punto della posizione di partenza, ok.
‫Quindi, la descrizione del punto della posizione di inizio del tour.
‫E così ora
‫inizi a capire perché aveva senso creare
‫effettivamente tutti questi dati diversi che abbiamo creato qui.
‫Bene, la prossima volta useremo per iniziare le date e
‫quindi tieni a mente.
‫Che questo è un array, ok.
‫Perché ora quello che vogliamo nella nostra
‫panoramica è sostanzialmente la data in cui inizia il prossimo tour.
‫Quindi, questo è ciò che significa l'icona con un calendario
‫qui in questo caso.
‫Quindi, questo è fondamentalmente
‫il primo elemento di quell'array di date di inizio.
‫Quindi, inizia le date dalla posizione 0.
‫Successivamente abbiamo questo dato che dice quante fermate ci
‫sono in questi tour.
‫E quindi
‫fondamentalmente questo significa quante posizioni
‫abbiamo e quindi useremo di nuovo le posizioni
‫e questa volta non
‫la posizione iniziale ma davvero queste
‫posizioni e quindi se vuoi specificare quante posizioni abbiamo.
‫Bene, allora dobbiamo contare la lunghezza di questo array, ok.
‫E così semplice pure.
‫Quindi, uguale e quindi impostalo su questa
‫stringa modello perché vogliamo anche
‫aggiungere questa fermata e quindi le posizioni dei punti del tour le fermate
‫della lunghezza dei punti e infine la quantità
‫di persone che fanno parte di ciascuno dei gruppi.
‫Quindi, ricorda che le persone che possono partecipare a un
‫tour e che sono memorizzate
‫nel tour ma nella dimensione massima del gruppo.
‫E poi le persone.
‫Ottimo, quindi quella parte è stata completata
‫ora e quindi torniamo al nostro sito Web
‫e proviamolo.
‫E sì, bella, almeno quasi bella perché questo appuntamento
‫sembra un po' strano qui.
‫Quindi, vogliamo davvero solo il 21 giugno, quindi non abbiamo bisogno
‫di essere così specifici
‫qui in questa panoramica, ok.
‫E quindi quello che vogliamo è che sembri di nuovo giugno 2021 e
‫quindi in questo momento è tutto questo casino e
‫quindi risolviamolo e per
‫fortuna è davvero molto semplice
‫con JavaScript che include un paio di
‫funzioni molto carine per lavorare con le date.
‫E tieni presente che ognuna di queste date
‫di inizio qui è davvero un
‫oggetto data in o database e quindi
‫ora possiamo usare una funzione come questa per la stringa locale, ok.
‫Quindi, fondamentalmente convertirà questa data in
‫una bella stringa leggibile
‫e qui possiamo ora passare un'opzione per la lingua.
‫E quindi questo è inglese per US
‫e quindi anche un oggetto con alcune opzioni e
‫quindi qui ora possiamo specificare che vogliamo che
‫un mese sia lungo.
‫Quindi, invece di solo un'abbreviazione come abbiamo
‫avuto qui.
‫quindi, un aprile, un agosto,
‫ora lo stamperà in questo modo.
‫Quindi, in realtà il nome dell'intero mese e va bene e
‫poi anche dicendo che l'anno dovrebbe essere numerico e se vuoi
‫saperne di più su
‫questa funzione qui, vai avanti e cerca su Google, ok.
‫Quindi, proviamolo di nuovo
‫e ora sembra davvero carino, fantastico.
‫Quindi, continuiamo a muoverci e finiamo quest'ultima parte qui con il
‫prezzo e i dettagli della valutazione.
‫E quindi questo è quaggiù nel piè di pagina della carta
‫e quindi qui questo è solo il prezzo.
‫Quindi, uguale a lasciamolo lì perché ora abbiamo ancora bisogno di
‫una stringa modello perché il prezzo non
‫è solo questo numero, ma in realtà abbiamo bisogno di un segno
‫di dollaro in più qui per il prezzo
‫in dollari.
‫Quindi, questo, giusto.
‫Successivamente abbiamo la valutazione media qui.
‫Quindi, questo è questo e quindi
‫sappiamo già che questo si chiama valutazione media del punto del tour.
‫Quindi, l'abbiamo usato così tante volte, almeno credo.
‫Confermiamolo, quindi in realtà è la media delle valutazioni e quindi
‫anche la quantità delle valutazioni.
‫Quindi, copiamo questo.
‫Quindi, le valutazioni sono nella
‫media e ora qui vogliamo la quantità delle valutazioni.
‫Va bene, ma ovviamente questa deve essere
‫una stringa modello e
‫quindi impostarla su uguale e quindi ovviamente interpolare il nome della variabile
‫qui e ora finalmente dobbiamo creare l'URL
‫per la pagina dei dettagli, ok.
‫Quindi, ricordalo quando clicchiamo su una delle carte.
‫Quindi ci porta alla pagina
‫dei dettagli e quindi ovviamente qui ora dobbiamo
‫specificare quel collegamento perché ovviamente dipenderà da ogni tour.
‫Quindi, vogliamo che i link siano tour slash e poi ricordiamo
‫come ho detto prima che per il
‫rendering di queste pagine vorremmo effettivamente interrogare i
‫tour in base al loro slug e
‫non al loro ID.
‫Il modo in cui l'abbiamo fatto
‫nell'API va bene, perché questo rende l'URL molto più carino, ok.
‫E quindi usiamolo qui ora.
‫Quindi tour dot slug e così solo per spiegarti
‫perché iniziamo questo
‫URL qui con una barra.
‫È perché la creazione di un URL come questo,
‫quindi iniziare solo con la barra viene chiamato URL relativo e
‫ciò che farà
‫è che verrà quindi aggiunto a questa parte dell'URL
‫dopo il nome host.
‫Quindi, quell'host è in questo momento da uno a sette virgola zero zero uno,
‫ma non è necessario specificarlo qui
‫perché di nuovo quando si scrive un URL relativo come
‫questo aggiungerà ciò che abbiamo qui a quel nome host, ok.
‫Quindi, ricarichiamolo di nuovo e quindi abbiamo
‫quasi finito qui, non siamo
‫ancora pronti.
‫Quindi, qui vedi indefinito e
‫quindi probabilmente abbiamo fatto qualcosa di sbagliato lì.
‫E vedi anche che qui non c'è spazio
‫tra il prezzo e il
‫prezzo a persona e anche qui lo stesso adesso.
‫Se passi il mouse su
‫questo pulsante qui, poi laggiù nell'angolo sinistro.
‫Quindi, qui sotto vedrai l'URL che abbiamo
‫appena creato.
‫Può effettivamente fare
‫clic su di esso e
‫quindi ci darà questo errore perché ovviamente
‫non abbiamo ancora definito questo
‫percorso, ma vedi che sembra davvero bello qui con i
‫tour che tagliano l'escursionista della foresta invece di avere quel brutto ID lassù, ok .
‫Ma comunque ora risolviamo questo indefinito in
‫questo spazio mancante.
‫Quindi, diamo un'occhiata a questo.
‫Bene, sembra corretto in realtà le valutazioni, la quantità ma
‫ovviamente ci manca questo punto del tour, ok.
‫Probabilmente lo stavi già vedendo.
‫Ora su quello spazio mancante.
‫C'è qualcosa di nuovo che devo mostrarti su Carlino
‫che è questa cosiddetta corsia vuota o
‫una linea, in realtà.
‫Quindi, ogni volta che abbiamo bisogno
‫di uno spazio reale tra due elementi
‫di blocco in linea che sono queste
‫bande, dobbiamo creare manualmente
‫quello spazio usando questa linea convogliata qui in questo modo, ok.
‫E la stessa cosa
‫quaggiù perché altrimenti,
‫come abbiamo appena visto, incollerà
‫semplicemente tutti questi elementi insieme, va bene.
‫Quindi, ora tutto questo dovrebbe essere
‫risolto e quello spazio non c'è ancora ed
‫è in realtà perché abbiamo dimenticato qualcosa.
‫E quindi torniamo
‫indietro e in realtà dobbiamo
‫aggiungere manualmente quello spazio vuoto qui e qui.
‫Quindi, questa linea di tubi vuota qui fondamentalmente crea
‫uno spazio per noi in cui possiamo creare contenuti al
‫di fuori di un
‫elemento e quindi questo è fondamentalmente questo spazio.
‫Quindi, questo spazio qui che abbiamo appena messo qui.
‫Quindi, questo spazio vuoto è un contenuto che non è
‫all'interno di nessuno di questi due elementi.
‫E così di nuovo, per essere in grado di farlo, è
‫per questo che abbiamo bisogno di questo gasdotto.
‫Quindi, questi due gasdotti.
‫Quindi, riprovaci e ora
‫ecco lo
‫spazio che abbiamo appena creato, perfetto.
‫E con questo concludiamo questa conferenza e questo
‫primo sito web dall'aspetto sbalorditivo o
‫parte del sito web che abbiamo appena costruito qui insieme.
‫Quindi, un momento per apprezzare quanto sia davvero
‫bello e anche come tutto
‫questo codice che abbiamo scritto insieme funzioni effettivamente, ok.
‫E poi torna subito indietro in modo
‫che possiamo costruire insieme la pagina di panoramica del tour.