Comment ajouter la recherche Ajax en temps réel à votre site Web Divi

Divi Ajax Search est disponible sur la place de marché de Divi ! Cela signifie qu’il a passé notre examen et a été jugé conforme à nos normes de qualité. Vous pouvez visiter Divi Extended sur la place de marché pour voir tous leurs produits disponibles. Les produits achetés sur la place de marché de Divi sont accompagnés d’une utilisation illimitée du site et d’une garantie de remboursement de 30 jours (tout comme Divi).

Acheter sur la place de marché de Divi

Ajax est un excellent moyen d’ajouter la recherche en direct à Divi. Avec Ajax, la page n’a pas besoin d’être rechargée pour afficher les résultats de la recherche aux utilisateurs. Vos visiteurs voient ainsi les résultats beaucoup plus rapidement, ce qui les incite à rester plus longtemps sur vos pages. Le résultat est un site Web plus propre et plus fluide.

La recherche Ajax n’est pas intégrée à Divi, mais elle peut facilement être ajoutée à l’aide d’un plugin tiers. Dans ce tutoriel, nous allons voir comment ajouter la recherche Ajax à Divi et comment adapter la recherche au design de votre site Web.

Découvrez le tutoriel.

Coup d’œil rapide

Avant de commencer, voici un aperçu de l’aspect de notre recherche Ajax lorsque nous aurons terminé. Il s’agit de la vue Desktop. Je vais ajouter une recherche Ajax à un magasin WooCommerce. J’utilise la page de présentation du pack de mise en page Boutique en ligne. Nous allons également adapter le style de la recherche à la mise en page. Bien sûr, comme il s’agit d’un site de test, je triche en utilisant les produits de test de WooCommerce. Les résultats seront les mêmes avec n’importe quel produit.

Voici comment le même design se présente sur un téléphone.

Comment ajouter la recherche Ajax en temps réel à votre site Divi

1. Installation de Divi Ajax Search

Tout d’abord, achetez Divi Ajax Search sur la place de marché de Divi. Il coûte normalement 29 $ et comprend une utilisation illimitée et un an d’assistance et de mises à jour. Divi Ajax Search vous permet de rechercher des pages, des articles, des projets et des produits WooCommerce. Elle fonctionne de la même manière avec chacun de ces types d’articles. Elle peut rechercher le titre, l’extrait et l’image vedette et les afficher en fonction de vos paramètres.

Pour installer le plugin, allez dans Plugins > Add New et sélectionnez Upload Plugin.

Sélectionnez Choose File et naviguez jusqu’à l’emplacement du fichier sur votre ordinateur, puis sélectionnez-le. Cliquez sur Installer maintenant.

Une fois le plugin installé, sélectionnez Activer le plugin.

2. Ajouter Ajax Search à votre site Divi

Voici un aperçu de la mise en page originale. Elle comprend l’en-tête, les catégories qui recouvrent l’image d’en-tête, et le module WooCommerce pour afficher les produits. Je vais ajouter la fonction de recherche Ajax au-dessus du module de boutique. Je vais également la styliser pour qu’elle corresponde aux éléments de la mise en page.

Ajouter Divi Ajax Search à la mise en page

Cliquez sur l’icône sous le module boutique pour ouvrir la modale du module. Faites défiler jusqu’à Divi Ajax Search ou recherchez-le et ajoutez-le à la mise en page. Je vous montre la vue filaire, mais toutes les vues fonctionnent de la même manière.

Faites glisser et déposez le module au-dessus du module de la boutique.

Configuration de la boîte de recherche

Cliquez sur l’engrenage pour ouvrir les options. J’ai basculé vers la vue de bureau pour pouvoir voir mes modifications en direct.

Tout d’abord, nous allons ajuster le texte de l’espace réservé. Le texte par défaut utilise le mot « Search ». C’est très bien, mais je vais le changer en  » Rechercher nos produits » pour que l’utilisateur sache qu’il cherche dans la boutique plutôt que dans des articles de blog ou d’autres contenus. Je laisserai les textes Ordre par, Ordre et Aucun résultat à leur valeur par défaut.

• Texte générique – Rechercher nos produits
• Résultat de la recherche – 10
• Trier par – date
• Commande – desc
• Texte d’absence de résultat – Aucun résultat trouvé

Décidez de ce que vous voulez afficher dans les résultats de recherche

Dans la section intitulée Zone de recherche, sélectionnez ce que vous voulez rechercher. Je vais laisser les paramètres par défaut, qui comprennent le titre, le contenu et l’extrait.

Ensuite, choisissez les types de messages. Vous pouvez faire en sorte que la recherche porte sur les articles, les pages, les projets, les produits ou tous ces éléments. J’ai choisi Produits.

Rechercher dans :

Types de messages :

Sélectionnez ce qui doit être affiché

Faites défiler l’écran jusqu’à la zone d’affichage pour choisir la façon dont les résultats seront affichés. Je conserve les paramètres par défaut pour l’icône de recherche, le titre, l’extrait et l’image vedette. J’ai également activé le prix du produit, modifié le nombre de colonnes à 4 et choisi d’utiliser la maçonnerie. Cela me permettra d’obtenir la mise en page que je souhaite.

Afficher l’icône de recherche :

Afficher les champs :

• Titre
• Extrait
• Image en vedette
• Prix du produit

Nombre de colonnes :

Utiliser la maçonnerie :

Afficher la barre de défilement

Allez dans les paramètres de la barre de défilement et décidez d’afficher ou de masquer la barre de défilement. J’inclus la barre de défilement pour que l’utilisateur sache mieux qu’il peut faire défiler la page.

Barre de défilement :

Résultat de recherche Divi Ajax

La saisie d’un terme de recherche affiche les résultats sous le champ de recherche. Ce résultat est superbe, mais il ne se démarque pas du contenu du site Web. Nous allons le styliser de manière à ce qu’il s’intègre au design du site et ne se fonde pas dans les images des produits.

3. Adaptez le module à votre site Web

Pour styliser la boîte de recherche, je vais utiliser les éléments de conception de la mise en page que j’utilise. Au bas de la page de la boutique de la mise en page de la boutique en ligne se trouvent quelques éléments de conception. L’un d’entre eux est un module intéressant d’opt-in par e-mail. Je vais m’en inspirer pour l’arrière-plan et le champ. Je vais également utiliser la couleur d’arrière-plan du CTA « Acheter maintenant » pour les résultats de recherche. J’accorde une attention particulière à trois éléments de conception :

• Couleur d’arrière-plan de la newsletter – #757d79
• Couleur d’arrière-plan du CTA de la boutique – #dcae83
• Rembourrage pour les deux – 50px (haut, bas), 60px (droite, gauche)

Stylisation du champ de recherche

Ouvrez les paramètres d’arrière-plan dans l’onglet Contenu. Cette section comporte trois zones d’arrière-plan différentes. Allez à la dernière. Elle s’appelle simplement Arrière-plan. Entrez la couleur ici.

• Couleur d’arrière-plan – #757d79

Dans l’onglet Design, allez dans les paramètres d’espacement et entrez le padding. Cela nous permettra de voir la zone autour du champ afin de mieux visualiser les résultats au fur et à mesure. Cela donne également beaucoup de couleur autour du champ de recherche, ce qui correspondra aux éléments de la mise en page.

• Remplissage 50px (haut, bas), 60px (droite, gauche)

Dans les paramètres du champ de recherche, ajoutez la couleur d’arrière-plan du champ et la couleur du texte du champ. J’ai fait en sorte que le champ corresponde à l’arrière-plan du module et j’ai simplement sélectionné le blanc pour le texte.

• Couleur d’arrière-plan du champ – #757d79
• Couleur du texte du champ – #ffffff

Dans les mêmes paramètres, faites défiler jusqu’à Field Border Color et choisissez blanc. Nous pouvons également ajuster l’épaisseur et le rayon de la bordure. Je vais la laisser carrée pour qu’elle corresponde au champ de texte du module optin.

• Couleur de la bordure du champ – #ffffff

Ouvrez les paramètres de l’icône de recherche et sélectionnez le blanc.

• Couleur de l’icône de recherche – #ffffff

Ouvrez les paramètres du chargeur et sélectionnez le blanc comme couleur du chargeur. Le chargeur ne sera vu que momentanément, mais il sera plus beau s’il est assorti au reste des éléments.

Stylisation du champ de résultats

Ouvrez les paramètres d’arrière-plan dans l’onglet Contenu et ajoutez la couleur aux arrière-plans de la boîte de résultats de recherche et de l’élément de résultat de recherche. Cette couleur ne sera pas visible pendant que nous stylisons le module, car elle ne s’affiche que lorsque le module affiche les résultats de la recherche.

• Couleur d’arrière-plan – #dcae83

Dans l’onglet Conception, ouvrez les paramètres du texte de l’élément de résultat de recherche. Dans l’onglet Titre, sélectionnez le style de police tout en majuscules et choisissez le blanc pour la couleur du texte. Je laisse tous les autres paramètres du titre par défaut.

• Style de police du titre – TT
• Couleur du texte du titre – #ffffff

Ouvrez l’onglet Extrait et sélectionnez blanc pour la couleur du texte de l’extrait.

• Couleur du texte de l’extrait – #ffffff

Ouvrez l’onglet Prix. Sélectionnez Semi Bold pour la pondération du prix et white pour la couleur du texte.

• Poids de la police du prix – Semi Bold
• Couleur du texte de l’extrait – #ffffff

Résultats

Voici comment la recherche Ajax se présente sur le bureau avec mon style. Les résultats de la recherche s’affichent presque immédiatement. C’est élégant et fluide.

Voici comment cela se présente sur un téléphone. Les résultats s’empilent et s’adaptent à l’écran.

Réflexions finales

Ajouter la recherche Ajax à votre site Divi est rapide et facile avec le plugin Divi Ajax Search. Il est facile à utiliser, facile à styliser pour correspondre à votre site Web, et les résultats sont rapides et ont un aspect fantastique. Vous avez beaucoup d’options pour les types d’articles qu’il peut rechercher et pour les types de contenu qu’il affichera dans les résultats.

Votre site Divi peut désormais disposer d’une fonction de recherche Ajax de conception professionnelle que vos visiteurs apprécieront !

Nous voulons connaître votre avis. Avez-vous ajouté une recherche Ajax en temps réel à votre site Web Divi ? Faites-nous part de votre expérience dans les commentaires