Liste de favoris

La liste de favoris permet aux visiteurs de votre site web d’enregistrer des biens intéressants et de les consulter ultérieurement de manière groupée. Les biens enregistrés sont stockés dans un cookie du navigateur et accessibles via une URL dédiée. La liste de favoris est disponible à partir de la licence PLUS. Vous pouvez souscrire une mise à niveau à tout moment et ne payez que la différence. Si vous souhaitez une mise à niveau, veuillez contacter notre Support.

Activer la liste de favoris

Accédez à Back-office WordPress → WP-ImmoMakler → Paramètres → Liste des favoris et activez l’option “Activer la liste de favoris”. Un bouton “Ajouter aux favoris” apparaîtra alors pour chaque bien dans la vue en liste et la vue détaillée.

Paramètres

Dans le back-office de votre site (wp-admin) → WP-ImmoMakler → Paramètres → Liste des favoris, les options suivantes sont disponibles :

Option	Description
Activer la liste de favoris	Affiche le bouton Ajouter aux favoris dans les vues archive et exposé
Bouton de favoris uniquement pour les biens disponibles	Masque le bouton pour les références et les biens déjà commercialisés
Activer « Partager la liste de favoris »	Ajoute au-dessus de la liste de favoris un lien copiable pouvant être partagé par e-mail ou sur les réseaux sociaux
Formulaire de contact sous la liste de favoris	Affiche un formulaire de contact commun pour la demande concernant tous les biens enregistrés

Liste de favoris avec trois biens enregistrés, le lien de partage et le bouton de retour à tous les biens

Page de la liste de favoris

La liste de favoris est automatiquement accessible à l’URL suivante (le chemin exact dépend du slug de biens immobiliers que vous avez configuré) :

/immobilien/merkliste/

Vous pouvez également tester la liste de favoris sur notre page de démonstration.

Bouton de favoris dans les Page Builders

Si vous créez votre liste de biens ou la vue détaillée avec un Page Builder, ajoutez le bouton de favoris comme élément à part : Bien immobilier : bouton Enregistrer est disponible dans Gutenberg, Elementor, Divi 4 et 5, Bricks, WPBakery, Enfold et Avada. Il s’intègre aussi bien dans les cartes d’une boucle (Loop), par exemple sous forme de cœur dans un coin de l’image, que dans la vue détaillée.

Paramètre	Description
Affichage	Icône seule ou Icône et texte
Icône	Cœur, étoile ou marque-page. Tant que le bien n’est pas enregistré, l’icône apparaît en contour, ensuite remplie
Étiquetage	Texte du bouton, « Merken » en l’absence de saisie. Avec Icône seule, les lecteurs d’écran lisent le libellé à voix haute
Couleur de l’icône (enregistré)	Couleur de l’icône remplie, par exemple rouge pour un cœur. Sans indication, l’icône reprend la couleur du texte

Habiller comme un bouton

Vous pouvez donner au bouton de favoris l’apparence d’un bouton de votre thème, avec contour ou rempli, sans CSS personnalisé. Cela vaut pour les deux affichages : avec Icône et texte, vous obtenez un bouton classique ; avec Icône seule, par exemple un cœur sur un disque rond sur lequel on peut cliquer dans son ensemble. Vous trouverez les paramètres dans les paramètres de design de l’élément, dans la plupart des Page Builders sous Style de bouton. Laissés vides, le bouton reste tel quel.

Paramètre	Description
Couleur de remplissage	Remplit le bouton, par exemple avec la couleur d’accent de votre thème
Couleur du texte	Couleur du texte et de l’icône. Dans Gutenberg, Elementor, Bricks et Divi, vous la réglez avec la couleur du texte ou de la police de l’élément
Couleur de la bordure	Couleur de la bordure. Sans largeur de bordure, la bordure mesure 1 px
Largeur du cadre	En px, par exemple 2
Rayon de courbure	En px ou %, par exemple 4 pour des angles légèrement arrondis ou 50% pour un bouton rond
Distance intérieure	Espace entre la bordure et le contenu, par exemple « 10px 20px » : 10 px en haut et en bas, 20 px à gauche et à droite
Pleine largeur	Le bouton occupe toute la largeur, son contenu étant centré

Pour un bouton avec contour, définissez la couleur de la bordure, le rayon de courbure et la distance intérieure ; pour un bouton rempli, ajoutez la couleur de remplissage et une couleur de texte adaptée. Pour un cœur sur un disque rond, choisissez Icône seule, une couleur de remplissage comme le blanc, le rayon de courbure 50% et une distance intérieure comme 10px ; la couleur du texte colore alors le cœur. Dans le bloc Gutenberg, le rayon de courbure se règle en px ; une valeur au moins égale à la moitié de la taille du bouton le rend rond. Dans Bricks, les paramètres propres à Bricks Bordure (largeur, couleur, rayon de courbure) et Marge intérieure regroupent ces valeurs.

La taille et la couleur de l’icône suivent la police de l’élément, que vous définissez dans les paramètres de design de votre Page Builder. Le bouton n’apparaît que si la liste de favoris est activée, et pas pour les biens de référence. Si l’option « Bouton de favoris uniquement pour les biens disponibles » est activée, il est également masqué pour les biens en intermédiation.

Pour que les visiteurs puissent accéder à leur liste de favoris depuis n’importe quelle page, affichez dans l’en-tête ou dans la navigation un lien vers la liste de favoris avec le nombre de biens enregistrés.

Compteur de la liste de favoris dans les Page Builders

PLUS

Dans Gutenberg, Elementor, Divi 4 et 5, Bricks, WPBakery, Enfold et Avada, l’élément Compteur de la liste des favoris est prévu à cet effet. Il s’intègre aussi bien dans un modèle d’en-tête qu’à tout autre emplacement de votre site.

Paramètre	Description
Affichage	Icône et nombre ou Icône, texte et nombre
Icône	Cœur, étoile ou marque-page, assorti au bouton de favoris
Étiquetage	Texte du lien, « Merkliste » en l’absence de saisie. Avec Icône et nombre, les lecteurs d’écran lisent le libellé à voix haute
Afficher aussi quand la liste de favoris est vide	Sans ce paramètre, le compteur n’apparaît que lorsque le visiteur a enregistré un bien
Couleur de fond du nombre, couleur du texte du nombre	Couleurs du nombre. Sans indication, il apparaît avec une bordure dans la couleur du texte

La taille et la couleur de l’icône et du texte suivent la police de l’élément, que vous définissez dans les paramètres de design de votre Page Builder. Le compteur n’apparaît que si la liste de favoris est activée. Dans l’éditeur, il est toujours visible, même si votre propre liste de favoris est vide.

Shortcode

À tout autre emplacement, par exemple dans un widget de texte, utilisez le shortcode :

[immomakler-cart-indicator]

Le shortcode génère un bouton avec badge indiquant le nombre actuel de biens enregistrés.

L’élément et le shortcode lisent le nombre à chaque chargement de page dans le cookie de la liste de favoris du visiteur, de sorte qu’il est exact même avec un cache de page. Lorsque le visiteur clique sur un bouton de favoris, le nombre change immédiatement.

Partager la liste de favoris

Lorsque l’option « Partager la liste de favoris » est activée, un champ de saisie avec un lien copiable apparaît au-dessus de la liste de favoris. Ce lien contient tous les identifiants des biens actuellement enregistrés en tant que paramètres et peut être transmis à des tiers, qui pourront ainsi consulter la même sélection de biens — sans cookie propre.

Personnaliser le libellé du bouton

Le libellé par défaut “merken” peut être modifié via un filtre dans le fichier functions.php du WP-ImmoMakler Child-Skin-Plugin :

add_filter( 'immomakler_cart_add_to_cart', function() {
    return 'auf Merkliste';
} );

Personnaliser les classes d’icônes

Les icônes du bouton Merken (activé/désactivé) utilisent les Glyphicons Bootstrap et peuvent être modifiées via des filtres. Veuillez ajouter les filtres suivants dans le fichier functions.php de votre WP-ImmoMakler Child-Skin-Plugin :

add_filter( 'immomakler_cart_checked_class', function() {
    return 'glyphicon-heart';
} );
add_filter( 'immomakler_cart_unchecked_class', function() {
    return 'glyphicon-heart-empty';
} );

WP-ImmoMakler fournit ces glyphicons : glyphicon-heart, glyphicon-heart-empty, glyphicon-star, glyphicon-star-empty, glyphicon-bookmark, glyphicon-check, glyphicon-unchecked, glyphicon-ok, glyphicon-link et glyphicon-file. Pour un autre glyphicon, activez l’option “Vollständiges Bootstrap CSS und vollständige glyphicons verwenden”, voir Paramètres : Affichage.