Come creare un sito Web per appuntamenti dinamici con OceanWP e Crocoblock

Stai cercando di creare un sito web dinamico per la prenotazione degli appuntamenti? Per coloro che pensano che sia difficile da implementare, ci sono buone notizie: non lo è. Al giorno d'oggi, non hai bisogno di sviluppatori, programmatori e designer. Hai solo bisogno degli strumenti giusti.

In questo articolo, scoprirai cosa rende un buon sito web per appuntamenti. Ti guideremo attraverso l'intera routine di creazione del sito e distribuiremo gli strumenti che abbiamo utilizzato. Alla fine, scoprirai come creare un sistema di prenotazione utilizzando solo OceanWP e diversi plug-in Crocoblock.

Cosa rende OceanWP e Crocoblock fantastici insieme

• Costruzione visiva del sito . Poiché Gutenberg è un editor di blocchi visivi, gli sviluppatori di siti Web possono risparmiare tempo passando avanti e indietro tra il pannello di amministrazione e il front-end. Sarà sufficiente creare una struttura di pagina nell'editor e assicurarsi che la versione front-end abbia lo stesso aspetto.
• Meno plugin esterni . Dimentica i plug-in separati per i tipi di post personalizzati, i moduli, la gestione delle prenotazioni, i campi personalizzati, ecc. Per rendere operativa la funzionalità degli appuntamenti, avrai bisogno solo di due plug-in Crocoblock.
• Nessun intermediario . Significa che gli sviluppatori non devono fare affidamento sui designer. Puoi prendere un modello demo di OceanWP, rielaborarne il layout come preferisci e aggiungere la funzionalità dinamica Crocoblock ad esso.

Appuntamento Sito 101

Che cos'è un sito Web per la prenotazione di appuntamenti?

I siti web per appuntamenti sono piattaforme di fornitura di servizi in cui è possibile prenotare una determinata fascia oraria. Spesso, questi siti Web offrono servizi a pagamento.

Che aspetto hanno i siti web degli appuntamenti?

Possono essere siti web di biglietti da visita di una pagina, dove è possibile prenotare un determinato servizio da un unico fornitore. D'altra parte, i siti Web di appuntamenti possono ospitare più fornitori. In tal caso, il sito web dispone di singole pagine e cataloghi di Provider e Servizio dedicati.

È difficile creare un sito web per appuntamenti?

Non più. Al giorno d'oggi, puoi creare un sito Web dinamico da zero utilizzando gli strumenti giusti: un generatore di pagine che preferisci, un fornitore di temi, alcuni plug-in di contenuti dinamici e il nucleo di prenotazione degli appuntamenti.

Quali sono i principali elementi del sito web degli appuntamenti?

Questi sarebbero un tema, tipi di post personalizzati, un motore di prenotazione degli appuntamenti, moduli di prenotazione, pagine del fornitore, pagine del servizio, pagine del catalogo ed elenchi.

Posso aggiungere più provider allo stesso sito Web?

Perchè no? Diversi professionisti possono fornire un servizio. Assicurati di assegnare un fornitore al servizio per evitare confusione nella fase di compilazione del modulo di prenotazione.

Appuntamento Sito: Preparativi di base

Abbiamo deciso di omettere i preparativi nella fase iniziale come ottenere un nome di dominio e scegliere un provider di hosting. Invece, ci concentreremo sull'essenza. Per chi vuole approfondire i dettagli, c'è un video super informativo di Ferdy Korpershoek.

Ottieni plug-in Crocoblock

Crocoblock ha introdotto i suoi prezzi aggiornati sei mesi fa. Cosa lo rende bello? È il piano di abbonamento personalizzato . Ora, per creare un sito web per appuntamenti funzionante, non dovrai spendere molto. Vai alla pagina dei prezzi di Crocoblock, apri la scheda JetPlugins e aggiungi i plug-in necessari al carrello.

Avrai bisogno di JetEngine – un plug-in di contenuti dinamici che consente di creare tipi di post personalizzati – e JetAppointment – un plug-in WordPress per la prenotazione di servizi.

Un tale pacchetto personalizzato ti costerà $ 45 all'anno per un sito Web e $ 93 all'anno per un numero illimitato di siti Web. Inoltre, riceverai aggiornamenti dei plug-in e supporto di qualità per un anno intero. Carica questi plugin sulla dashboard di WordPress e preparali per ulteriori lavori.

Installa il tema OceanWP e scegli un modello di sito Web

Esistono due modi per installare il tema principale: quello tradizionale e il modo Crocoblock.

Installazione del tema OceanWP nel modo tradizionale

Vai su Aspetto > Temi nel pannello di amministrazione di WordPress e premi " Aggiungi nuovo ". Puoi utilizzare la barra di ricerca per individuare il tema. Una volta trovato, installa OceanWP e attivalo.

Installazione del tema OceanWP nel modo Crocoblock

Usa la procedura guidata di installazione di Crocoblock. Può essere scaricato dall'account Crocoblock e quindi utilizzato per installare OceanWP.

Per scegliere un modello demo, vai su Pannello temi > Installa demo e scegli quello che ti serve. Utilizzeremo il modello demo di Gym oggi. Ricorda che una demo non può funzionare come previsto se mancano alcune delle estensioni premium. Potresti volerli prima prendere.

Non appena l'installazione del modello demo è completata, sei pronto per creare un sito Web per appuntamenti dinamico.

Realizzazione di un sito web per appuntamenti personalizzati

All'interno di ogni sito Web di pianificazione di appuntamenti ed eventi, ci sono tipi di post personalizzati per fornitori e servizi , nucleo di prenotazione automatica degli appuntamenti, integrazione del calendario e un modulo di prenotazione. Questi sono elementi essenziali, ma sei libero di estendere l'elenco come preferisci.

Ora, facciamo buon uso dei plug-in JetEngine e JetAppointment.

Creazione di tipi di post personalizzati

Perché è necessario creare un CPT? Ti aiuteranno a organizzare i post del sito Web: servizi a servizi, fornitori a fornitori. Successivamente, questi post possono essere facilmente correlati per consentire agli utenti del sito Web di prenotare un servizio particolare da coloro che lo forniscono.

Segui JetEngine > Tipi di post > Aggiungi nuovo percorso nel pannello di amministrazione di WordPress per creare un CPT. Ricorda che hai bisogno di due tipi di post: uno per i fornitori e uno per i servizi. Dal momento che stiamo costruendo un sito Web per la palestra, i tipi di post verranno chiamati Allenatori e Allenamenti di conseguenza.

Aggiungi i meta campi necessari a entrambi i tipi di post. Per i Trainers CPT , questi potrebbero essere:

• foto;
• breve biografia;
• Esperienza lavorativa;
• risultati;
• galleria;
• contatti.

Per gli allenamenti CPT , i metacampi possono essere i seguenti:

• galleria;
• descrizione;
• capacità massima;
• attrezzatura;
• benefici alla salute.

Suggerimento rapido : JetEngine ha un'utile funzione Glossario . Ti consente di creare una serie di meta campi e usarli come opzioni per i tipi di post personalizzati.

Successivamente, aggiungi tutti i post necessari ai tipi di post appena creati. Per fare ciò, passa il mouse sopra il nome CPT nel pannello di amministrazione di WordPress e quindi premi " Aggiungi nuovo ".

Una volta terminato, puoi procedere con la configurazione del plug-in JetAppointment.

Configurazione di JetAppuntamento

Non è così difficile impostare il plug-in per la prenotazione degli appuntamenti di Crocoblock. Tutto quello che devi fare è eseguire l'Installazione guidata e completare quattro passaggi di installazione.

Vai su Appuntamenti > Configurazione nel pannello di amministrazione. Verrai indirizzato alla pagina Impostazioni di JetPlugins , in particolare alla scheda Configurazione di JetAppointment. Fare clic sul pulsante dal nome simile per eseguire la procedura guidata.

• Passaggio 1 . È necessario selezionare i tipi di post Servizi e Fornitori nelle corrispondenti selezioni a discesa. Non dimenticare di abilitare l'interruttore Aggiungi fornitori ; in caso contrario, il campo non verrà visualizzato. Fare clic su " Avanti ".

• Passaggio 2 . Qui puoi vedere le colonne della tabella del database richieste. Continua l'installazione se non hai voglia di aggiungere altre colonne. Aggiungeremo Telefono e Commenti.

• Passaggio 3 . Questo passaggio è dedicato alla configurazione del servizio e ai dettagli specifici del fornitore come durata, tempo di buffer, giorni di riposo, orario di lavoro, ecc. Per una panoramica dettagliata del passaggio, guarda questo tutorial video.

• Passaggio 4 . Infine, puoi integrare WooCommerce e creare due moduli di prenotazione degli appuntamenti. Le opzioni disponibili includono "JetEngine Forms" e "JetFormBuilder". Il primo è destinato a Elementor e il secondo a Gutenberg.

Premere il pulsante "Fine" per finalizzare la configurazione.

Prima di modificare i moduli di prenotazione degli appuntamenti, è necessario correlare i post Fornitori e Servizi. Apri il post di un provider e trova la scheda Servizi correlati nella barra laterale di sinistra. Digita tre caratteri in quell'area di testo e scegli il servizio necessario una volta che il sistema lo suggerisce.

Ripetere la procedura tante volte quante sono le postazioni Provider dedicate. Una volta terminato, sei pronto per giocare con i moduli.

JetFormBuilder e aggiunta di moduli alle pagine

La cosa eccellente dei prodotti Crocoblock è che alcuni sono effettivamente gratuiti. Prendi JetFormBuilder. È un plug-in per la creazione di moduli di WordPress che consente agli sviluppatori di siti di creare moduli dinamici nell'editor di pagine di Gutenberg. Puoi scaricare il plugin, attivarlo e usarlo subito.

Vai a JetFormBuilder > Moduli . I due moduli generati saranno lì. Dovremo modificarli poiché abbiamo aggiunto due colonne alla tabella DB durante l'impostazione dell'appuntamento. Ora, dobbiamo aggiungere i metacampi necessari al modulo e alle azioni successive all'invio.

Fare clic per modificare il modulo di prenotazione della pagina statica e aggiungere i metacampi mancanti trascinando e rilasciando i blocchi Gutenberg corrispondenti. Ne serviranno due, un campo di testo e un campo area di testo, per aggiungere i campi Telefono e Commento.

Successivamente, è necessario inserire questi campi nelle Azioni di invio post. Per fare ciò, premi la scheda JetForm , scorri verso il basso fino alla sezione Post Submit Actions e fai clic sull'icona a forma di matita sotto il nome dell'azione. Vedrai una finestra di modifica dell'azione post invio, in cui dovresti selezionare i campi del modulo a cui appartengono.

Oltre a ciò, puoi impostare l'integrazione di WooCommerce qui, a condizione che tu l'abbia abilitata al passaggio 4. Una volta terminato, fai clic sul pulsante " Aggiorna ".

Consiglio veloce . Sentiti libero di aggiungere più azioni di post invio contemporaneamente, ma assicurati che le loro condizioni non siano in contraddizione tra loro. In tal caso, l'invio del modulo non andrà a buon fine.

Una volta terminata la personalizzazione del modulo di prenotazione della pagina statica, aggiornalo e aggiungilo alla pagina del sito web. Abbiamo creato una pagina dedicata a Tutti gli allenamenti , che mostra un elenco dinamico di JetEngine. Un modulo di prenotazione starà benissimo sotto la griglia.

Apri la pagina in cui desideri posizionare il modulo, trova il blocco JetForm nella barra laterale di sinistra, trascinalo e rilascialo nell'area desiderata, quindi seleziona il modulo che hai appena modificato nell'elenco a discesa Scegli modulo nella barra laterale di destra .

Aggiorna la pagina e guarda come appare sul front-end.

Ora, i lettori più attenti sono tipo: "Come mai il modulo è stato modificato?". Questo perché abbiamo inserito un altro plugin nel mix. Continua a leggere per scoprire quale.

Torna alla dashboard di WordPress e apri il percorso Appuntamenti > Appuntamenti . Ecco qua: tutti gli appuntamenti sono stretti. Puoi visualizzarli, modificarli, eliminarli, filtrarli e cambiarne lo stato qui.

Come puoi vedere, la funzionalità di prenotazione degli appuntamenti è attiva e funzionante. Tuttavia, ci sono più cose che puoi fare per rendere il sito web di pianificazione degli appuntamenti ancora più dinamico.