Comment créer un site Web de rendez-vous dynamique avec OceanWP et Crocoblock

Vous cherchez à créer un site web de prise de rendez-vous dynamique ? Pour ceux qui pensent que c'est difficile à déployer, il y a de bonnes nouvelles - ce n'est pas le cas. De nos jours, vous n'avez plus besoin de développeurs, de codeurs et de concepteurs. Vous avez juste besoin des bons outils.

Dans cet article, vous découvrirez ce qui fait un bon site de rendez-vous. Nous vous guiderons tout au long de la routine de création de site et vous remettrons les outils que nous avons utilisés. À la fin, vous comprendrez comment créer un système de réservation en utilisant uniquement OceanWP et plusieurs plugins Crocoblock.

Ce qui rend OceanWP et Crocoblock formidables ensemble

• Construction visuelle du site . Étant donné que Gutenberg est un éditeur de blocs visuel, les développeurs de sites Web peuvent gagner du temps en alternant entre le panneau d'administration et le front-end. Il suffira de créer une structure de page dans l'éditeur et de s'assurer que la version frontale a la même apparence.
• Moins de plugins externes . Oubliez les plugins séparés pour les types de publication personnalisés, les formulaires, la gestion des réservations, les champs personnalisés, etc. Pour que la fonctionnalité de rendez-vous soit opérationnelle, vous n'aurez besoin que de deux plugins Crocoblock.
• Pas d'intermédiaires . Cela signifie que les développeurs n'ont pas à compter sur les concepteurs. Vous pouvez prendre un modèle de démonstration par OceanWP, retravailler sa mise en page à votre guise et y ajouter la fonctionnalité dynamique Crocoblock.

Site de rendez-vous 101

Qu'est-ce qu'un site de prise de rendez-vous ?

Les sites de rendez-vous sont des plateformes de prestation de services où il est possible de réserver un créneau horaire particulier. Souvent, ces sites Web offrent des services payants à l'heure.

À quoi ressemblent les sites Web de rendez-vous ?

Il peut s'agir de sites Web de cartes de visite d'une page, où il est possible de réserver un service particulier auprès d'un seul fournisseur. D'un autre côté, les sites Web de rendez-vous peuvent héberger plusieurs fournisseurs. Dans ce cas, le site Web a des pages et des catalogues dédiés aux fournisseurs et aux services.

Est-il difficile de créer un site de rendez-vous ?

Pas plus. De nos jours, vous pouvez créer un site Web dynamique à partir de zéro en utilisant les bons outils - un constructeur de page que vous préférez, un fournisseur de thème, un plugin de contenu dynamique et le noyau de réservation de rendez-vous.

Quels sont les principaux éléments du site Web de rendez-vous ?

Il s'agirait d'un thème, de types de publication personnalisés, d'un moteur de réservation de rendez-vous, de formulaires de réservation, de pages de fournisseur, de pages de service, de pages de catalogue et de listes.

Puis-je ajouter plusieurs fournisseurs sur le même site ?

Pourquoi pas? Plusieurs professionnels peuvent fournir un service. Assurez-vous d'attribuer un fournisseur au service pour éviter toute confusion au moment de remplir le formulaire de réservation.

Site Web de rendez-vous : préparatifs de base

Nous avons décidé d'omettre les préparations initiales telles que l'obtention d'un nom de domaine et le choix d'un fournisseur d'hébergement. Au lieu de cela, nous nous concentrerons sur l'essentiel. Pour ceux qui veulent plonger dans les détails, il y a une vidéo super informative de Ferdy Korpershoek.

Obtenir les plugins Crocoblock

Crocoblock a présenté sa tarification mise à jour il y a six mois. Qu'est-ce qui le rend cool ? C'est le plan d' abonnement personnalisé . Maintenant, pour créer un site Web de rendez-vous fonctionnel, vous n'aurez pas à dépenser beaucoup. Accédez à la page de tarification de Crocoblock, dépliez l'onglet JetPlugins et ajoutez les plugins nécessaires au panier.

Vous aurez besoin de JetEngine – un plugin de contenu dynamique qui permet de créer des types de publication personnalisés – et JetAppointment – un plugin WordPress de réservation de service.

Un tel forfait personnalisé vous coûtera 45 $/an pour un site Web et 93 $/an pour un nombre illimité de sites Web. De plus, vous bénéficierez de mises à jour de plugins et d'un support de qualité pendant une année entière. Téléchargez ces plugins sur le tableau de bord WordPress et préparez-les pour un travail ultérieur.

Installez le thème OceanWP et choisissez un modèle de site Web

Il existe deux façons d'installer le thème principal - la méthode traditionnelle et la méthode Crocoblock.

Installer le thème OceanWP de manière traditionnelle

Allez dans Apparence > Thèmes dans le panneau d'administration de WordPress et appuyez sur « Ajouter nouveau ». Vous pouvez utiliser la barre de recherche pour localiser le thème. Une fois trouvé, installez OceanWP et activez-le.

Installer le thème OceanWP à la manière Crocoblock

Utilisez l'assistant d'installation de Crocoblock. Il peut être téléchargé depuis le compte Crocoblock puis utilisé pour installer OceanWP.

Pour choisir un modèle de démonstration, accédez à Panneau de thème > Installer des démos et choisissez celui dont vous avez besoin. Nous allons utiliser le modèle de démonstration Gym aujourd'hui. N'oubliez pas qu'une démo ne peut pas fonctionner comme prévu si certaines des extensions premium sont manquantes. Vous voudrez peut-être les obtenir en premier.

Dès que l'installation du modèle de démonstration est terminée, vous êtes prêt à créer un site Web de rendez-vous dynamique.

Créer un site Web de rendez-vous personnalisé

Dans chaque site Web de planification de rendez-vous et d'événements, il existe des types de publication personnalisés pour les fournisseurs et les services , un noyau de prise de rendez-vous automatisé, une intégration de calendrier et un formulaire de réservation. Ce sont des éléments essentiels, mais vous êtes libre d'étendre la liste comme bon vous semble.

Maintenant, utilisons les plugins JetEngine et JetAppointment à bon escient.

Création de types de publication personnalisés

Pourquoi avez-vous besoin de créer un CPT ? Ils vous aideront à organiser les publications du site Web - des services aux services, des fournisseurs aux fournisseurs. Par la suite, ces publications peuvent être facilement interconnectées pour permettre aux utilisateurs du site Web de réserver un service particulier auprès de ceux qui le fournissent.

Suivez le chemin JetEngine> Types de publication> Ajouter un nouveau dans le panneau d'administration WordPress pour créer un CPT. N'oubliez pas que vous avez besoin de deux types de publication - un pour les fournisseurs et un pour les services. Puisque nous construisons un site Web Gym, les types de publication seront nommés Trainers et Workouts en conséquence.

Ajoutez les champs méta nécessaires aux deux types de publication. Pour les formateurs CPT , ceux-ci pourraient être :

• photo;
• Courte biographie;
• l'expérience professionnelle;
• réalisations;
• Galerie;
• Contacts.

Pour le Workouts CPT , les méta-champs peuvent être les suivants :

• Galerie;
• la description;
• capacité maximale;
• équipement;
• avantages pour la santé.

Petite astuce : JetEngine a une fonctionnalité de glossaire utile. Il vous permet de créer un ensemble de champs méta et de les utiliser comme options pour les types de publication personnalisés.

Ensuite, ajoutez autant de publications que nécessaire aux types de publication nouvellement créés. Pour ce faire, passez la souris sur le nom CPT dans le panneau d'administration de WordPress, puis appuyez sur " Ajouter un nouveau ".

Une fois cela fait, vous pouvez procéder à la configuration du plugin JetAppointment.

Configuration de JetRendez-vous

Il n'est pas si difficile de configurer le plugin de prise de rendez-vous par Crocoblock. Tout ce que vous avez à faire est d'exécuter l'assistant de configuration et de suivre les quatre étapes d'installation.

Accédez à Rendez-vous > Configurer dans le panneau d'administration. Vous serez redirigé vers la page Paramètres de JetPlugins , à savoir l'onglet Configuration de JetAppointment. Cliquez sur le bouton portant le même nom pour exécuter l'assistant.

• Étape 1 . Vous devez choisir les types de publication Services et Fournisseurs dans les sélections déroulantes correspondantes. N'oubliez pas d'activer la bascule Ajouter des fournisseurs ; sinon, le champ n'apparaîtra pas. Cliquez sur « Suivant ».

• Étape 2 . Ici, vous pouvez voir les colonnes de table de base de données requises. Continuez l'installation si vous n'avez pas envie d'ajouter plus de colonnes. Nous ajouterons le téléphone et les commentaires.

• Étape 3 . Cette étape est dédiée à la configuration du service et des détails spécifiques au fournisseur tels que la durée, le temps tampon, les jours de congé, les heures de travail, etc. Pour un aperçu détaillé de l'étape, veuillez consulter ce didacticiel vidéo.

• Étape 4 . Enfin, vous pouvez intégrer WooCommerce et créer deux formulaires de prise de rendez-vous. Les options disponibles incluent "JetEngine Forms" et "JetFormBuilder". Le premier est destiné à Elementor et le second à Gutenberg.

Appuyez sur le bouton "Terminer" pour finaliser la configuration.

Avant de modifier les formulaires de prise de rendez-vous, vous devez mettre en relation les messages Fournisseurs et Services. Ouvrez la publication d'un fournisseur et recherchez l'onglet Services connexes dans la barre latérale gauche. Tapez trois caractères dans cette zone de texte et choisissez le service nécessaire une fois que le système le suggère.

Renouveler la procédure autant de fois qu'il y a de postes Prestataire dédiés. Une fois cela fait, vous êtes prêt à jouer avec les formulaires.

JetFormBuilder et ajout de formulaire aux pages

Ce qui est excellent avec les produits Crocoblock, c'est que certains sont en fait gratuits. Prenez JetFormBuilder. Il s'agit d'un plugin de création de formulaires WordPress permettant aux développeurs de sites de créer des formulaires dynamiques dans l'éditeur de page Gutenberg. Vous pouvez télécharger le plugin, l'activer et l'utiliser immédiatement.

Accédez à JetFormBuilder > Formulaires . Les deux formulaires générés seront là. Nous devrons les modifier puisque nous avons ajouté deux colonnes à la table DB lors de la configuration du rendez-vous. Maintenant, nous devons ajouter les champs méta nécessaires au formulaire et aux actions post-soumission.

Cliquez pour modifier le formulaire de réservation de page statique et ajoutez les champs méta manquants en glissant-déposant les blocs Gutenberg correspondants. Nous en aurons besoin de deux - un champ de texte et un champ de zone de texte - pour ajouter les champs Téléphone et Commentaire.

Ensuite, vous devez saisir ces champs dans les actions Post Submit. Pour ce faire, appuyez sur l'onglet JetForm , faites défiler jusqu'à la section Post Submit Actions et cliquez sur l'icône en forme de crayon sous le nom de l'action. Vous verrez une fenêtre d'édition Post Submit Action, où vous êtes censé sélectionner les champs de formulaire auxquels ils appartiennent.

En plus de cela, vous pouvez configurer l'intégration WooCommerce ici, à condition que vous l'ayez activée à l'étape 4. Une fois cela fait, cliquez sur le bouton " Mettre à jour ".

Conseil rapide . N'hésitez pas à ajouter plusieurs actions Post Submit à la fois mais assurez-vous que leurs conditions ne se contredisent pas. Dans ce cas, la soumission du formulaire échouera.

Une fois que vous avez fini de personnaliser le formulaire de réservation de page statique, mettez-le à jour et ajoutez-le à la page du site Web. Nous avons créé une page dédiée à tous les entraînements , qui affiche une liste JetEngine dynamique. Un formulaire de réservation aura fière allure sous la grille.

Ouvrez la page où vous souhaitez placer le formulaire, recherchez le bloc JetForm dans la barre latérale gauche, faites-le glisser et déposez-le dans la zone souhaitée, puis sélectionnez le formulaire que vous venez de modifier dans le menu déroulant Choisir un formulaire sur la barre latérale droite .

Mettez à jour la page et voyez à quoi elle ressemble sur le front-end.

Maintenant, les lecteurs les plus attentifs sont comme, "Comment se fait-il que le formulaire soit stylé?". C'est parce que nous avons ajouté un autre plugin au mix. Continuez à lire pour savoir lequel.

Revenez au tableau de bord WordPress et ouvrez le chemin Rendez-vous > Rendez-vous . Voilà, tous les rendez-vous sont serrés. Vous pouvez les afficher, les modifier, les supprimer, les filtrer et modifier leur statut ici.

Comme vous pouvez le constater, la fonctionnalité de prise de rendez-vous est opérationnelle. Cependant, il y a d'autres choses que vous pouvez faire pour rendre le site Web de prise de rendez-vous encore plus dynamique.