Documentation · Guide du Frontend
Comparer
Cette section documente la fonctionnalité de comparaison de véhicules de l'extension ADP Car Market Hub WordPress : comment les visiteurs sélectionnent les véhicules à comparer, comment fonctionne la page de comparaison et quelles sont les limites applicables.
Quand utiliser ce document
Lisez ce document si vous configurez la fonctionnalité de comparaison pour la première fois, si vous aidez un visiteur à comprendre comment l'utiliser ou si vous dépannez un comportement inattendu dans la vue de comparaison.
Aperçu
La fonctionnalité de comparaison permet aux visiteurs de sélectionner jusqu'à un nombre configurable de véhicules à partir de l'archive ou des pages de détails de véhicules individuels, puis de les afficher côte à côte sur une page de comparaison dédiée. La sélection est stockée dans le localStorage du navigateur et ne nécessite aucun compte ni connexion.
La page de comparaison est un tableau pleine page avec une colonne par véhicule. Chaque ligne affiche la miniature du véhicule, son titre et les champs de spécification configurés. Les véhicules sont affichés dans l'ordre où ils ont été sélectionnés.
Configuration requise ou prérequis
- La fonctionnalité de comparaison doit être activée dans les réglages de l'extension (elle est activée par défaut).
- Une page de comparaison doit être configurée et accessible. L'extension peut créer une page de comparaison par défaut lors de l'activation ; vous pouvez également en créer une manuellement et l'attribuer dans les réglages de l'extension.
- La page de comparaison doit contenir le shortcode
[as24ci_compare], ou l'extension doit être configurée pour utiliser la page via l'option as24cipagecompare_id afin de pouvoir résoudre l'URL de comparaison.
Instructions étape par étape
Configurer la page de comparaison
- Dans l'administration WordPress, allez dans Pages → Ajouter une nouvelle page.
- Donnez un titre à la page, par exemple « Comparer les véhicules ».
- Dans le contenu de la page, ajoutez le shortcode
[as24ci_compare]. - Publiez la page.
- Dans les réglages de l'extension, notez l'ID de la page. L'extension utilise l'ID de la page de comparaison enregistré (
as24ci_page_compare_id) pour générer les liens de comparaison sur l'ensemble du site. Si cette option n'est pas définie, l'extension utilise par défauthome_url('/compare-cars/').
Utiliser la fonctionnalité de comparaison en tant que visiteur
- Sur l'archive des véhicules, localisez une carte de véhicule. Lorsque la fonctionnalité de comparaison est activée et que le bouton de comparaison est actif dans le Layout Manager, un bouton d'icône de comparaison apparaît sur la superposition de la carte.
- Cliquez sur le bouton de comparaison pour ajouter le véhicule à la sélection de comparaison. Le bouton change d'état pour indiquer que le véhicule est sélectionné.
- Répétez l'opération pour les autres véhicules que vous souhaitez comparer. L'extension applique un nombre maximum configurable de véhicules (par défaut : 4).
- Une fois que vous avez sélectionné les véhicules souhaités, cliquez sur le lien ou le bouton de comparaison qui apparaît (le libellé indique « Comparer »). Cela vous redirige vers la page de comparaison.
- La page de comparaison se charge avec les véhicules sélectionnés affichés côte à côte dans un tableau.
Le même bouton de comparaison apparaît dans la barre flottante collante sur les pages de détails de véhicules individuels, permettant aux visiteurs d'ajouter un véhicule à la sélection de comparaison tout en consultant ses détails complets.
Ouvrir la page de comparaison directement
La page de comparaison lit les ID de véhicules à partir du paramètre GET ids, qui est une liste d'ID de publications de véhicules séparés par des virgules :
https://yoursite.com/compare-cars/?ids=123,456,789Le script JavaScript de bascule de comparaison génère automatiquement cette URL lorsque le visiteur clique sur le lien « Comparer ».
Référence de configuration
Réglages de comparaison
| Réglage | Emplacement | Description |
|---|---|---|
| Activer la comparaison | Réglages de l'extension → Réglages (ou Assistant de configuration) | Active ou désactive l'ensemble de la fonctionnalité de comparaison |
| Nombre maximum de véhicules | Réglages de l'extension → Comparer | Nombre maximum de véhicules qu'un visiteur peut ajouter à une comparaison (par défaut 4, minimum 2) |
| Page de comparaison | Réglages de l'extension → Pages | ID de la page de comparaison. Utilisé pour générer les URL de comparaison sur l'ensemble du site. |
Champs du tableau de comparaison
Les champs affichés dans le tableau de comparaison sont configurés dans la zone Layout Manager → Comparer. Chaque champ activé apparaît sous forme de ligne dans le tableau pour chaque véhicule sélectionné. Les champs disponibles et leurs libellés par défaut comprennent :
| ID du champ | Description |
|---|---|
conditionType | État (neuf ou d'occasion) |
bodyType | Type de carrosserie |
fuelType | Type de carburant |
transmissionType | Transmission |
driveType | Type de transmission |
bodyColorText | Couleur extérieure |
interiorColorText | Couleur intérieure |
doors | Nombre de portes |
seats | Nombre de sièges |
mileage | Kilométrage (formaté en km) |
cubicCapacity | Cylindrée du moteur (cm³) |
range | Autonomie électrique (km) |
firstRegistrationYear | Année de première immatriculation |
firstRegistrationDate | Date de première immatriculation |
kiloWatts | Puissance en kW |
horsePower | Puissance en CH |
co2Emission | Émissions de CO₂ (g/km) |
price | Prix de vente |
listPrice | Prix catalogue |
emissionStandard | Norme d'émission |
energyLabel | Étiquette énergétique |
batteryCapacity | Capacité de la batterie (kWh) |
hadAccident | Historique d'accident (Oui/Non) |
D'autres champs peuvent être disponibles selon les données de véhicules importées. Vérifiez la liste actuelle dans le Layout Manager de votre extension.
Les unités sont appliquées automatiquement aux valeurs numériques :
- Prix : formaté avec la devise
- Kilométrage, autonomie, kilométrage de garantie, capacité de remorquage, poids à vide, poids total : km ou kg selon le cas
- CO₂ : g/km
- Cylindrée : cm³
- Puissance fiscale/réelle : HP
- Consommation : l/100 km
- Capacité de la batterie : kWh
- Consommation électrique : kWh/100 km
- Puissance de charge rapide : kW
- Durée de la garantie : mois
- Champs booléens (
hadAccident,inspected) : affichés sous la forme Oui ou Non
Les champs sans valeur pour un véhicule affichent un tiret cadratin (—).
Bouton de comparaison de la carte d'archive
Le bouton de comparaison apparaît sur les cartes de véhicules de l'archive lorsque :
- La fonctionnalité de comparaison est activée dans les réglages de l'extension (
FEATURE_COMPARE). - L'élément
compare_btnest activé dans la zone Layout Manager → Cartes d'archive.
Le bouton affiche une icône de comparaison et bascule l'état sélectionné lors du clic.
Notes opérationnelles
- Les sélections de véhicules sont stockées dans
localStoragesous une clé gérée par le script JavaScript de comparaison. Les sélections persistent lors de la navigation entre les pages au cours de la même session de navigation et survivent aux rechargements de page. - Effacer les données du navigateur (cookies, stockage local) réinitialisera la sélection de comparaison.
- La page de comparaison lit le paramètre GET
idset charge jusqu'à 4 véhicules (limite stricte codée en dur dans le modèle). Seuls les véhicules publiés du bon type de publication sont chargés ; les véhicules non publiés ou supprimés sont discrètement exclus. - Le maximum configurable (
COMPARE_MAX_VEHICLES) contrôle l'application de la limite par JavaScript lors de la sélection. Le modèle côté serveur applique sa propre limite stricte de 4. Si le maximum configurable dépasse 4, le serveur n'affichera toujours que 4 colonnes au maximum. - Les données de véhicules dans le tableau de comparaison sont lues à partir de la table personnalisée
{prefix}as24_vehiclesde l'extension lorsqu'elle est disponible, avec un repli sur les données brutes de l'API (colonne JSONraw_data), puis sur les métadonnées de publication WordPress pour les véhicules existants. - La page de comparaison peut être utilisée à la fois comme une page WordPress autonome (via le shortcode
[as24ci_compare]) et comme une page basée sur un modèle. Les deux produisent le même résultat. - Le script JavaScript de comparaison n'est mis en file d'attente que sur les pages d'archive de véhicules, les pages de détails de véhicules individuels et les pages contenant le shortcode
[as24ci_archive]ou[as24ci_compare].
Dépannage
Le bouton de comparaison n'apparaît pas sur les cartes de véhicules.
- Vérifiez que la fonctionnalité de comparaison est activée dans les réglages de l'extension.
- Vérifiez la zone Layout Manager → Cartes d'archive et confirmez que
compare_btnest activé.
Cliquer sur le bouton de comparaison affiche « Vous pouvez comparer jusqu'à X véhicules. »
- Le visiteur a atteint le maximum configuré. Il doit retirer un véhicule de la sélection avant d'en ajouter un autre.
La page de comparaison affiche « Aucun véhicule sélectionné pour la comparaison. »
- Le visiteur a navigué vers la page de comparaison sans aucun véhicule dans sa sélection
localStorage. - Cela peut également se produire si le navigateur ne prend pas en charge
localStorageou si celui-ci a été vidé.
La page de comparaison affiche moins de véhicules que prévu.
- Seuls les véhicules publiés sont chargés. Si un véhicule a été supprimé ou dépublié après avoir été ajouté à la sélection de comparaison, il est exclu du résultat.
- Le modèle applique un maximum de 4 véhicules, quel que soit le réglage configurable.
Les liens de comparaison pointent vers la mauvaise page.
- Vérifiez que l'ID de la page de comparaison est correctement défini dans les réglages de l'extension (
as24ci_page_compare_id). Si cette option est manquante ou pointe vers une page supprimée, l'URL de comparaison se replie surhome_url('/compare-cars/').