Documentación · Guía del Frontend
Comparar
Este documento cubre la función de comparación de vehículos del plugin ADP Car Market Hub WordPress: cómo seleccionan los visitantes los vehículos para comparar, cómo funciona la página de comparación y qué limitaciones se aplican.
Cuándo utilizar este documento
Lea este documento si está configurando la función de comparación por primera vez, si está ayudando a un visitante a comprender cómo usarla o si está solucionando un comportamiento inesperado en la vista de comparación.
Descripción general
La función de comparación permite a los visitantes seleccionar hasta un número configurable de vehículos desde el archivo o desde las páginas de detalles de vehículos individuales, y luego verlos uno al lado del otro en una página de comparación dedicada. La selección se almacena en el localStorage del navegador y no requiere cuenta ni inicio de sesión.
La página de comparación es una tabla a pantalla completa con una columna por vehículo. Cada fila muestra la miniatura del vehículo, el título y los campos de especificaciones configurados. Los vehículos se representan en el orden en que fueron seleccionados.
Requisitos o prerrequisitos
- La función de comparación debe estar habilitada en los ajustes del plugin (está habilitada por defecto).
- Una página de comparación debe estar configurada y ser accesible. El plugin puede crear una página de comparación por defecto durante la activación; también puede crear una manualmente y asignarla en los ajustes del plugin.
- La página de comparación debe contener el shortcode
[as24ci_compare], o el plugin debe estar configurado para usar la página a través de la opción as24cipagecompare_id para que pueda resolver la URL de comparación.
Instrucciones paso a paso
Configurar la página de comparación
- En el administrador de WordPress, vaya a Páginas → Añadir nueva.
- Asigne a la página un título como "Comparar vehículos".
- En el contenido de la página, añada el shortcode
[as24ci_compare]. - Publique la página.
- En los ajustes del plugin, anote el ID de la página. El plugin utiliza el ID de la página de comparación almacenado (
as24ci_page_compare_id) para construir los enlaces de comparación en todo el sitio. Si esta opción no está establecida, el plugin recurre ahome_url('/compare-cars/').
Utilizar la función de comparación como visitante
- En el archivo de vehículos, localice una tarjeta de vehículo. Cuando la función de comparación está habilitada y el botón de comparar está activo en el Layout Manager, aparece un botón con el icono de comparar en la superposición de la tarjeta.
- Haga clic en el botón de comparar para añadir el vehículo a la selección de comparación. El botón cambia de estado para indicar que el vehículo está seleccionado.
- Repita el proceso para otros vehículos que desee comparar. El plugin aplica un número máximo configurable de vehículos (por defecto: 4).
- Cuando haya seleccionado los vehículos deseados, haga clic en el enlace o botón de comparar que aparece (la etiqueta dice "Comparar"). Esto le redirigirá a la página de comparación.
- La página de comparación se carga con los vehículos seleccionados mostrados uno al lado del otro en una tabla.
El mismo botón de comparar aparece en la barra flotante fija en las páginas de detalles de vehículos individuales, lo que permite a los visitantes añadir un vehículo a la selección de comparación mientras ven todos sus detalles.
Abrir la página de comparación directamente
La página de comparación lee los ID de los vehículos del parámetro GET ids, que es una lista separada por comas de los ID de publicación de los vehículos:
https://yoursite.com/compare-cars/?ids=123,456,789
El conmutador de comparación de JavaScript construye esta URL automáticamente cuando el visitante hace clic en el enlace "Comparar".
Referencia de configuración
Ajustes de comparación
| Ajuste | Ubicación | Descripción |
|---|---|---|
| Habilitar comparar | Ajustes del plugin → Ajustes (o Asistente de configuración) | Habilita o deshabilita toda la función de comparación |
| Máximo de vehículos | Ajustes del plugin → Comparar | Número máximo de vehículos que un visitante puede añadir a una comparación (por defecto 4, mínimo 2) |
| Página de comparación | Ajustes del plugin → Páginas | ID de página de la página de comparación. Se utiliza para construir las URL de comparación en todo el sitio. |
Campos de la tabla de comparación
Los campos que se muestran en la tabla de comparación se configuran en la zona Layout Manager → Comparar. Cada campo habilitado aparece como una fila en la tabla para cada vehículo seleccionado. Los campos disponibles y sus etiquetas por defecto incluyen:
| ID del campo | Descripción |
|---|---|
conditionType | Estado (nuevo o usado) |
bodyType | Tipo de carrocería |
fuelType | Tipo de combustible |
transmissionType | Transmisión |
driveType | Tipo de tracción |
bodyColorText | Color exterior |
interiorColorText | Color interior |
doors | Número de puertas |
seats | Número de asientos |
mileage | Kilometraje (formateado con km) |
cubicCapacity | Cilindrada del motor (cm³) |
range | Autonomía eléctrica (km) |
firstRegistrationYear | Año de primera matriculación |
firstRegistrationDate | Fecha de primera matriculación |
kiloWatts | Potencia en kW |
horsePower | Potencia en CV |
co2Emission | Emisiones de CO₂ (g/km) |
price | Precio de venta |
listPrice | Precio de lista |
emissionStandard | Norma de emisiones |
energyLabel | Etiqueta energética |
batteryCapacity | Capacidad de la batería (kWh) |
hadAccident | Historial de accidentes (Sí/No) |
Pueden estar disponibles campos adicionales dependiendo de los datos del vehículo importados. Verifique la lista actual en el Layout Manager de su plugin.
Las unidades se aplican automáticamente a los valores numéricos:
- Precio: formateado con la moneda
- Kilometraje, autonomía, kilometraje de garantía, capacidad de remolque, peso en vacío, peso total: km o kg según corresponda
- CO₂: g/km
- Cilindrada: cm³
- Caballos de fuerza: CV
- Consumo: l/100 km
- Capacidad de la batería: kWh
- Consumo de energía: kWh/100 km
- Potencia de carga rápida: kW
- Duración de la garantía: meses
- Campos booleanos (
hadAccident,inspected): se muestran como Sí o No
Los campos sin valor para un vehículo muestran un guion largo (—).
Botón de comparar en la tarjeta de archivo
El botón de comparar aparece en las tarjetas de vehículos del archivo cuando:
- La función de comparación está habilitada en los ajustes del plugin (
FEATURE_COMPARE). - El elemento
compare_btnestá habilitado en la zona Layout Manager → Tarjetas de archivo.
El botón muestra un icono de comparar y alterna el estado seleccionado al hacer clic.
Notas operativas
- Las selecciones de vehículos se almacenan en
localStoragebajo una clave gestionada por el JavaScript de comparación. Las selecciones persisten a través de la navegación por las páginas dentro de la misma sesión del navegador y sobreviven a las recargas de página. - Borrar los datos del navegador (cookies, almacenamiento local) restablecerá la selección de comparación.
- La página de comparación lee el parámetro GET
idsy carga hasta 4 vehículos (límite máximo codificado en la plantilla). Solo se cargan los vehículos publicados del tipo de publicación correcto; los vehículos no publicados o eliminados se excluyen silenciosamente. - El máximo configurable (
COMPARE_MAX_VEHICLES) controla la aplicación del límite por parte de JavaScript durante la selección. La plantilla del lado del servidor aplica su propio límite estricto de 4. Si el máximo configurable supera los 4, el servidor seguirá representando como máximo 4 columnas. - Los datos del vehículo en la tabla de comparación se leen de la tabla personalizada
{prefix}as24_vehiclesdel plugin cuando está disponible, con recurso al payload crudo de la API (columna JSONraw_data) y luego a los metadatos de publicación de WordPress para vehículos heredados. - La página de comparación se puede utilizar tanto como una página independiente de WordPress (a través del shortcode
[as24ci_compare]) como una página basada en plantillas. Ambas representan el mismo resultado. - El recurso JavaScript de comparación se encola solo en las páginas de archivo de vehículos, páginas de detalles de vehículos individuales y páginas que contienen el shortcode
[as24ci_archive]o[as24ci_compare].
Resolución de problemas
El botón de comparar no aparece en las tarjetas de vehículos.
- Verifique que la función de comparación esté habilitada en los ajustes del plugin.
- Compruebe la zona Layout Manager → Tarjetas de archivo y confirme que
compare_btnestá habilitado.
Al hacer clic en el botón de comparar se muestra "Puede comparar hasta X vehículos".
- El visitante ha alcanzado el máximo configurado. Debe eliminar un vehículo de la selección antes de añadir otro.
La página de comparación muestra "No se han seleccionado vehículos para comparar".
- El visitante navegó a la página de comparación sin ningún vehículo en su selección de
localStorage. - Esto también puede ocurrir si el navegador no admite
localStorageo si este se ha borrado.
La página de comparación muestra menos vehículos de lo esperado.
- Solo se cargan los vehículos publicados. Si un vehículo se eliminó o se despublicó después de haber sido añadido a la selección de comparación, se excluye del resultado.
- La plantilla impone un máximo de 4 vehículos independientemente del ajuste configurable.
Los enlaces de comparación apuntan a la página incorrecta.
- Verifique que el ID de la página de comparación esté configurado correctamente en los ajustes del plugin (
as24ci_page_compare_id). Si esta opción falta o apunta a una página eliminada, la URL de comparación recurre ahome_url('/compare-cars/').