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

  1. En el administrador de WordPress, vaya a Páginas → Añadir nueva.
  2. Asigne a la página un título como "Comparar vehículos".
  3. En el contenido de la página, añada el shortcode [as24ci_compare].
  4. Publique la página.
  5. 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 a home_url('/compare-cars/').

Utilizar la función de comparación como visitante

  1. 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.
  2. 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.
  3. 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).
  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.
  5. 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

AjusteUbicaciónDescripción
Habilitar compararAjustes del plugin → Ajustes (o Asistente de configuración)Habilita o deshabilita toda la función de comparación
Máximo de vehículosAjustes del plugin → CompararNú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ónAjustes del plugin → PáginasID 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 campoDescripción
conditionTypeEstado (nuevo o usado)
bodyTypeTipo de carrocería
fuelTypeTipo de combustible
transmissionTypeTransmisión
driveTypeTipo de tracción
bodyColorTextColor exterior
interiorColorTextColor interior
doorsNúmero de puertas
seatsNúmero de asientos
mileageKilometraje (formateado con km)
cubicCapacityCilindrada del motor (cm³)
rangeAutonomía eléctrica (km)
firstRegistrationYearAño de primera matriculación
firstRegistrationDateFecha de primera matriculación
kiloWattsPotencia en kW
horsePowerPotencia en CV
co2EmissionEmisiones de CO₂ (g/km)
pricePrecio de venta
listPricePrecio de lista
emissionStandardNorma de emisiones
energyLabelEtiqueta energética
batteryCapacityCapacidad de la batería (kWh)
hadAccidentHistorial 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_btn está 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 localStorage bajo 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 ids y 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_vehicles del plugin cuando está disponible, con recurso al payload crudo de la API (columna JSON raw_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_btn está 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 localStorage o 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 a home_url('/compare-cars/').

Documentos relacionados