Documentación · Guía del Frontend
Páginas de detalles del vehículo
Este documento cubre la página de detalles del vehículo del plugin ADP Car Market Hub WordPress: su estructura de contenido, galería, especificaciones, visualización de precios, acciones de contacto y comportamiento de la plantilla.
Cuándo usar este documento
Lea este documento si necesita comprender qué se muestra en la página de un único vehículo, cómo se configura el diseño de la página, cómo interactúan los visitantes con el formulario de contacto o cómo puede personalizar la plantilla un desarrollador de temas.
Descripción general
Cada vehículo publicado tiene su propia página de detalles. La página presenta el vehículo al visitante en un diseño estructurado con una galería, especificaciones clave, datos técnicos, lista de equipamiento, precios, un formulario de contacto y características opcionales como calculadora de financiación, descarga de PDF datasheet, compartir en redes sociales y solicitudes de prueba de conducción.
La página de detalles del vehículo se renderiza mediante la plantilla integrada del plugin (single-as24ci_car-classic.php). El diseño se divide en tres zonas configurables gestionadas a través del Layout Manager:
- Contenido principal (columna izquierda): galería, descripción, especificaciones, datos de energía, equipamiento y bloques adicionales opcionales.
- Barra lateral (columna derecha): caja de precio, datos clave y calculadora de financiación.
- Sección inferior: formulario de contacto, información del concesionario y vehículos similares.
El tema activo puede invalidar la plantilla colocando un archivo single-as24ci_car.php en el directorio del tema. El plugin comprueba esta invalidación antes de cargar su propia plantilla.
Requisitos o prerrequisitos
- El plugin debe estar instalado y activado.
- Se debe haber importado y publicado al menos un vehículo.
- Los enlaces permanentes amigables deben estar habilitados en WordPress (Ajustes → Enlaces permanentes) para que funcione el formato de URL predeterminado de un único vehículo. Sin enlaces permanentes amigables, es posible que no se pueda acceder a las páginas de un único vehículo a través de la estructura de URL esperada.
Instrucciones paso a paso
Navegar a una página de detalles del vehículo
- Desde el archivo de vehículos, haga clic en cualquier tarjeta de vehículo. El enlace lleva a la página de detalles de ese vehículo.
- Alternativamente, vaya a la administración de WordPress, abra Vehicles y haga clic en Ver debajo del título de un vehículo para abrir su página de detalles en el frontend.
Configurar el diseño de un único vehículo
- En la administración del plugin, abra el Layout Manager.
- Seleccione la zona Single Vehicle – Main Content, Single Vehicle – Sidebar o Single Vehicle – Bottom.
- Arrastre los bloques para reordenarlos o alterne su visibilidad.
- Guarde la configuración.
Los cambios se aplican inmediatamente a todas las páginas de detalles de los vehículos sin necesidad de volver a importar.
Referencia de configuración
Zonas de diseño y bloques disponibles
Los siguientes bloques están disponibles en cada zona. La configuración por defecto se muestra debajo de cada zona; el Layout Manager permite cambiar el orden o desactivar bloques individuales.
Vehículo individual – Contenido principal (orden por defecto):
gallery– Galería de imágenesdescription– Texto de descripción del vehículospecs– Tabla de especificaciones técnicasenergy– Datos de energía y emisionesequipment– Listas de equipamiento de serie y opcionalwarranty– Información de la garantía
Vehículo individual – Barra lateral (orden por defecto):
price_box– Visualización del precio con precio de lista y etiqueta de ahorrokey_facts– Cuadrícula de datos clave (marca, modelo, kilometraje, año, tipo de combustible, etc.)financing_calc– Calculadora de financiación (si está activada)
Vehículo individual – Parte inferior (orden por defecto):
contact_form– Formulario de contacto para consultas con información del vendedordealer_info– Tarjeta de información del concesionario (independiente)similar_vehicles– Vehículos relacionados de la misma marca y modelo
Se pueden colocar bloques adicionales de estas listas en otras zonas si el Layout Manager lo permite, a excepción de la calculadora de financiación, que se renderiza como máximo en una zona (la barra lateral tiene prioridad sobre el contenido principal, y el contenido principal tiene prioridad sobre la parte inferior).
Galería
La galería muestra todas las imágenes adjuntas al vehículo. Las imágenes se recopilan de dos fuentes: imágenes importadas (_as24ci_image_ids) e imágenes subidas manualmente (_as24ci_manual_image_ids). Las imágenes subidas manualmente aparecen primero.
Opciones de visualización de la galería:
| Ajuste | Opciones | Descripción |
|---|---|---|
| Diseño de la galería | slider, masonry, thumbnails | Diseño visual de la galería |
| Relación de aspecto | 16:9 (y otras relaciones) | Relación de aspecto aplicada a la imagen principal de la galería |
| Lightbox | Activado / Desactivado | Define si al hacer clic en una imagen se abre un lightbox |
| Lazy loading | Activado / Desactivado | Define si las imágenes se cargan de forma diferida (lazy-load) |
Si no hay imágenes disponibles, la sección de la galería no renderiza ningún marcador de posición (placeholder) alternativo para la imagen principal.
Visualización del precio
El cuadro de precio en la barra lateral muestra:
- Precio de venta: el precio del vehículo importado o establecido manualmente, formateado con la moneda configurada.
- Precio de lista (si está disponible y es superior al precio de venta): se muestra tachado, con la diferencia de ahorro calculada automáticamente.
- Moneda: utiliza el propio campo de moneda del vehículo o, en su defecto, la moneda por defecto configurada en los ajustes del plugin.
Barra lateral de datos clave
El bloque de datos clave muestra una cuadrícula con las especificaciones importantes. Los campos visibles y su orden se controlan mediante la configuración del bloque Registro de campos → Datos clave. Se admiten los siguientes campos:
| Campo | Descripción |
|---|---|
| Marca | Marca del vehículo |
| Modelo | Modelo del vehículo |
| Tipo de carrocería | Estilo de carrocería |
| Tipo de combustible | Tipo de combustible |
| Tipo de tracción | Configuración de tracción |
| Transmisión | Tipo de caja de cambios |
| Estado | Nuevo o usado |
| Primera matriculación | Año de matriculación |
| Kilometraje | Lectura del odómetro en km |
| Potencia (CV) | Potencia del motor en CV |
| Potencia (kW) | Potencia del motor en kW |
| Color exterior | Color de la carrocería |
| Puertas | Número de puertas |
| Plazas | Número de asientos |
| Emisiones de CO₂ | CO₂ en g/km |
| Listing ID | Número de inventario interno |
Los campos que no tengan ningún valor para el vehículo actual se ocultan automáticamente.
Especificaciones técnicas
El bloque specs en el área de contenido principal muestra una lista detallada de campos técnicos. Los campos renderizados dependen de los datos del vehículo y de lo que se haya importado. Las unidades se aplican automáticamente:
- Kilometraje: km
- Potencia del motor: CV / kW
- Cilindrada del motor: cc
- Emisiones de CO₂: g/km
- Consumo de combustible: l/100 km (urbano, extraurbano, combinado) o kg/100 km para GNC
- Consumo de energía eléctrica: kWh/100 km
- Capacidad de la batería: kWh
- Autonomía: km
- Peso: kg
- Dimensiones (altura, anchura, longitud, distancia entre ejes): mm
- Volumen del maletero: l
- Potencia de carga: kW
- Tiempo de carga: min
Los valores se leen de la tabla de base de datos de vehículos personalizada del plugin cuando están disponibles, recurriendo a los metadatos de la entrada (post meta) para los vehículos importados antes de la estructura de tabla actual.
Equipamiento
El bloque equipment renderiza dos listas:
- Equipamiento de serie: características incluidas de fábrica.
- Equipamiento opcional: características disponibles como opción.
Ambas listas se importan desde la fuente de datos del vehículo y se almacenan en la tabla de vehículos personalizada. Las listas de equipamiento solo se muestran cuando contienen al menos un elemento.
Rutas de exploración (Breadcrumbs)
La página de detalles del vehículo incluye una ruta de exploración: Inicio → Vehículos → Marca → Modelo. Los enlaces de Marca y Modelo prefiltran el archivo por esa marca o modelo. El enlace "Vehículos" apunta a la página de archivo configurada.
Compartir en redes sociales
Si la función de compartir en redes sociales está activada, se renderizan botones para compartir en la página de detalles. Las redes compatibles son WhatsApp, Facebook, Instagram, X (anteriormente Twitter), Correo electrónico y Copiar enlace (el conjunto visible es configurable). La ubicación es configurable: Debajo de la galería, Barra lateral derecha flotante o Final de la página:
- Debajo de la galería y Final de la página renderizan una fila horizontal de botones (debajo de la galería o en la parte inferior de la página, debajo de la sección de contacto) y son visibles en todos los tamaños de pantalla.
- Barra lateral derecha flotante es una barra fija en el borde derecho de la pantalla que también contiene los botones rápidos de Favoritos, Comparar y PDF datasheet (cuando esas funciones están activadas). Se oculta en pantallas de tamaño móvil (≤ 600 px), por lo que en teléfonos se recomienda usar Debajo de la galería o Final de la página para mantener visible la opción de compartir.
La ubicación y las redes visibles se configuran en Diseño y estilos → Botones para compartir en redes sociales; consulte la Referencia de diseño y estilos.
Formulario de contacto
El formulario de contacto permite a los visitantes enviar una consulta sobre el vehículo. El formulario se envía mediante una solicitud HTML POST estándar.
Campos del formulario de contacto:
| Campo | Requerido | Configurable |
|---|---|---|
| Nombre | Sí | No |
| Correo electrónico | Sí | No |
| Teléfono | No | Sí (se puede desactivar) |
| Mensaje | Sí | Sí (se puede desactivar) |
| Casilla de consentimiento de privacidad | Sí | Sí (se puede desactivar) |
La casilla de consentimiento de privacidad muestra un texto de consentimiento configurable. Si se configura una URL de política de privacidad en los ajustes del plugin, el texto "política de privacidad" dentro del texto de consentimiento se convierte automáticamente en un enlace.
Los mensajes de éxito y error tras el envío del formulario son configurables en los ajustes del plugin.
Solicitud de prueba de conducción
Si la función de prueba de conducción está activada, el formulario de contacto incluye una casilla opcional "¿Le interesa una prueba de conducción?". Cuando se marca, aparecen campos de fecha y hora que permiten al visitante solicitar un horario específico para la prueba de conducción. Verifique la configuración de la prueba de conducción en los ajustes de su plugin antes de publicar esta función.
Información del vendedor / concesionario
La sección del formulario de contacto incluye un panel del vendedor que muestra:
- Nombre del vendedor
- Puesto de trabajo
- Dirección
- Dirección de correo electrónico (como un enlace
mailto:en el que se puede hacer clic) - Número de teléfono (como un enlace
tel:en el que se puede hacer clic) - Foto de perfil
- Enlaces a perfiles sociales (Facebook, Instagram, X, LinkedIn)
El contacto que se muestra en este panel se resuelve mediante el enrutamiento de contactos de CMH Team. El plugin busca primero un contacto de CMH Team para el vehículo (una asignación por vehículo, el contacto por defecto para la sucursal del vehículo o el contacto por defecto global) y recurre al contacto general del concesionario cuando está configurado. Un miembro del equipo configurado como "sin contacto visible" oculta el panel, y un miembro inactivo nunca se muestra. Solo cuando CMH Team no se aplica, el panel recurre al perfil de vendedor heredado (metadatos de usuario WordPress determinados por el campo de metadatos de la entrada _as24ci_seller_user_id, o el autor de la entrada). Consulte CMH Team and Contact Routing.
Botones de favoritos y comparación
Cuando se selecciona la ubicación Barra lateral derecha flotante para compartir en redes sociales, la barra fija en el borde derecho de la página de detalles también incluye:
- Botón de favoritos (icono de corazón): añade o elimina el vehículo de los favoritos guardados del visitante. Se muestra cuando la función de favoritos está activada.
- Botón de comparar: añade o elimina el vehículo de la selección de comparación. Se muestra cuando la función de comparación está activada.
- Botón de PDF datasheet: se muestra cuando la función de PDF datasheet está activada.
Esta barra del borde derecho se oculta en pantallas de tamaño móvil (≤ 600 px). Con las otras ubicaciones de uso compartido (Debajo de la galería / Final de la página), estos botones rápidos no se agrupan en una barra lateral. Independientemente de la ubicación, la función de comparación muestra su propia barra de comparación flotante una vez que el visitante ha seleccionado vehículos para comparar.
Vehículos similares
El bloque similar_vehicles muestra hasta cuatro vehículos publicados de la misma marca y modelo. Cada tarjeta muestra la miniatura, el título, el precio, el tipo de combustible, la transmisión, el año y el kilometraje. Un enlace "Mostrar todos los vehículos" devuelve al visitante al archivo completo.
PDF datasheet
Si la función de PDF datasheet está activada, hay un botón de descarga disponible en la página de detalles. Verifique que esta función esté activada y configurada en los ajustes de su plugin antes de publicarla.
Notas de funcionamiento
- La plantilla de vehículo individual se carga a través del filtro WordPress
single_template. El plugin comprueba si existe una invalidación de la plantilla en el tema (single-as24ci_car.phpen el tema activo) antes de cargar su propia plantilla. Si existen ambas, el archivo del tema tiene prioridad. - Los datos del vehículo se leen de la tabla de base de datos personalizada
{prefix}as24_vehiclesdel plugin cuando está disponible. Para los vehículos importados antes de que existiera esta tabla, los datos recurren a los campos de metadatos de la entrada WordPress. - La galería combina imágenes subidas manualmente e imágenes importadas, apareciendo siempre primero las imágenes subidas manualmente.
- La calculadora de financiación se renderiza como máximo en una zona. Si se coloca tanto en la barra lateral como en el contenido principal, solo se renderiza la instancia de la barra lateral.
- El gancho de acción (action hook)
as24ci_after_contact_formse ejecuta después de la sección del formulario de contacto, lo que permite a las integraciones inyectar contenido adicional.
Resolución de problemas
La página de detalles del vehículo muestra un error 404.
- Verifique que los enlaces permanentes amigables estén activados (Ajustes → Enlaces permanentes en la administración de WordPress). Después de cambiar los ajustes de los enlaces permanentes, guárdelos una vez para vaciar las reglas de reescritura.
- Confirme que el vehículo está publicado y no se encuentra en estado de borrador o privado.
La galería no muestra imágenes.
- Compruebe que las imágenes se hayan importado correctamente. En la administración, abra la página de edición del vehículo y verifique que las imágenes de la galería estén adjuntas.
- Si las imágenes se subieron manualmente, confirme que están guardadas en el campo de IDs de imágenes manuales.
No se muestra ningún precio.
- El cuadro de precio solo muestra un precio si el vehículo tiene un valor de precio superior a cero. Compruebe los datos del vehículo importado.
El formulario de contacto no envía mensajes.
- Verifique que su sitio de WordPress pueda enviar correos electrónicos. Muchos entornos de hosting requieren un plugin de SMTP o una configuración de correo adicional.
- Compruebe la configuración de leads del plugin para ver si hay campos obligatorios o restricciones.
La calculadora de financiación no aparece.
- Confirme que la función de financiación está activada en los ajustes del plugin (está desactivada por defecto).
- Confirme que está activa en la zona del Layout Manager para la página de vehículo individual.
Los datos clave muestran valores vacíos o en cero.
- Algunos campos dependen de la tabla de vehículos personalizada. Si un vehículo se importó antes de que se creara la tabla, volver a importar el vehículo puede resolver la falta de valores.