Personalizar la tarjeta en el listado de resultados del selector
Una de las personalizaciones más demandadas es la personalización de la tarjeta en el listado de productos que se obtiene como resultado de la búsqueda en el selector principal situado en la home page.
Desde Apariencia > Personalizar > Mybooking reservation engine > Tarjeta de producto se pueden seleccionar diferentes tipos de tarjeta, sin embargo no siempre se encuentra una tarjeta que se adapte bien a las necesidades de cada tipo de negocio.
Cuando sucede esto lo que podemos hacer es sobreescribir esta parte de la plantilla.
1 - Explicación teórica de la estructura y funcionamiento.
2 - Ejemplo practico de la personalización de una tarjeta y enlace al repositorio con el proyecto.
Estructura y funcionamiento
Para hacerlo debemos tener instalado un child theme que tenga a Mybooking Theme como padre. Puedes consultar este árticulo para ver como instalarlo fácilmente a partir del código en el repositorio de Mybooking con Mybooking Child.
Una vez instalado podemos seguir los siguientes pasos:
1 - Copiar la plantilla del plugin que se adapte más a nuestras necesidades. En este momento tenemos cuatro en producción:
- mybooking-plugin-reservation-product-card-grid-tmpl.php (Grid 3 productos por fila)
- mybooking-plugin-reservation-product-card-list-tmpl-php (Grid 1 producto por fila)
- mybooking-plugin-reservation-product-card-reduce-list-tmpl.php (Grid un producto por fila en formato reducido - la imagen y altura de la tarjeta es menor que la anterior)
- mybooking-plugin-reservation-product-card-list-multiple-rate-type-tmpl (solo para negocios con multiples tarifas - este no es seleccionable y se muestra por defecto cuando se configuran varias tarifas desde el programa de gestión - hasta 3 tarifas)
2 - Añadirla en la carpeta mybooking-templates. Para hacer esto tenemos que abrir la carpeta que contiene nuestro child theme en Wordpress desde app > public > wp-content > mybooking-child-master.
3 - Modificar el HTML teniendo en cuenta que es una plantilla con unos parámetros dinámicos que serán sustituidos por los datos procedentes del API como respuesta a la búsqueda realizada en la página precedente (donde se haya el selector).
Por ejemplo, en el código:
<% if (product.highlight_message && product.highlight_message != '') { %>
<div class="mybooking-product_custom-message">
<%=product.highlight_message%>
</div>
<% } %>
<%=product.highlight_message%> será sustituido por el parámetro highlight_message procedente de la respuesta del API de Mybooking. Este parámetro contiene el mensaje destacado de la tarjeta definido desde el programa de gestión dentro de la ficha de cada producto.
Si decidimos mover este mensaje a cualquier otra parte de la tarjeta veremos que lo muestra en el lugar donde lo hemos colocado. Obviamente deberemos añadir el CSS necesario para que se muestre correctamente.
|
|
De igual manera podemos mover cada uno de los elementos según lo necesitemos, eliminarlos, añadir otros o crear una tarjeta ex novo añadiendo estos parámetros donde nos convenga.
Si se crea desde cero sera necesario prestar especial atención en crear todas los estados que se pueden verificar, como por ejemplo que el producto no este disponible para ser alquilado, que no llegue algún atributo debido a que aún no se ha completado en la ficha del producto u otras situaciones con la finalidad de que no se produzcan errores.
Puedes consultar todos los parámetros disponibles en la documentación de la API.
También puedes visualizar los parámetros directamente en el panel de desarrollo del navegador en el panel de red y en la respuesta de la llamada API.
Ejemplo practico de la personalización de una tarjeta
Vamos a crear una tarjeta personalizada siguiendo el siguiente diseño.
Para hacerlo vamos a seguir los siguientes pasos:
2 - Añadir un fichero con el mismo nombre del fichero que se va a sobrescribir.
4 - Añadir los estilos CSS personalizados.
5 - Verificar que se visualiza correctamente y se puede realizar la reserva.
Analizar los datos y los estados
Para maquetar esta tarjeta necesitamos los parámetros destacados en negrita en la tabla. Entre ellos están los valores visibles en la tarjeta y también valores que sirven para crear los condicionales necesarios a mostrar u ocultar en el código avisos, botones etc.
| Parámetro en product y plantilla | Descripción |
|---|---|
| name | Nombre del producto |
| short_description | Descripción corta |
| description | Descripción larga |
| highlight_message | Mensaje destacado |
| photos | Fotos del producto (imágenes para mostrar un slide) |
| photo | Path de la foto (tamaño medio) |
| full_photo | Path de la foto (tamaño completo) |
| exceeds_max | Excede la duración máximo de reserva |
| be_less_than_min | Inferior a la duración mínima de reserva |
| days | Días de facturación |
| hours | Horas de facturación |
| minutes | Minutos de facturación |
| price_units | Unidad de tiempo : "days" (días) "hours" (horas) |
| unit_base_price | Precio sin descuento de 1 unidad 1 día/hora |
| unit_base_price_without_taxes | Precio sin descuento de 1 unidad 1 día/hora sin impuestos |
| unit_price | Precio con descuento (código de promoción u oferta) de 1 unidad 1 día/hora |
| unit_price_without_taxes | Precio con descuento (código de promoción u oferta) de 1 unidad 1 d/h sin impuestos |
| vat_type | Porcentaje de impuestos |
| base_price | Precio sin descuento de 1 unidad todos los días/horas |
| price | Precio incluyendo descuento (código de promoción u oferta) de 1 unid. todos los d/h |
| deposit | Fianza por 1 unidad todos los días/horas |
| availability | Disponibilidad |
| available | Número de vehículos disponibles |
| offer_discount_type | Tipo de la oferta(“percentage” o “amount”) |
| offer_value | Valor de la oferta |
| offer_name | Nombre de la oferta |
| offer_conditions | Condiciones de la oferta |
| min_days | Número mínimo de días para alquiler |
| payment_availability | Se permite el pago online |
| category_supplement_1_cost | Suplemento de categoría 1 (combustible) |
| category_supplement_2_cost | Suplemento de categoría 2 |
| category_supplement_2_cost | Suplemento de categoría 3 |
| key_characteristics | Características clave : Conjunto de atributos y valor |
| few_available_units | Aviso últimas unidades |
Además en la tarjeta se tendrán que añadir las siguientes condiciones (en la tabla no incluyo los condicionales para verificar la existencia de cada parámetro que se dan por entendidos)
| Estado | Parámetro o condición | Descripción |
|---|---|---|
| Aviso de duración mínima (tarjeta) | be_less_than_min | Si no se supera la duración mínima no se mostrará el botón para el alquiler sino un aviso en su lugar. |
| Aviso de duración máxima (tarjeta) | exceeds_max | Si se supera la duración máxima no se mostrará el botón para el alquiler sino un aviso en su lugar. |
| Aviso de disponibilidad (tarjeta) | availability | Si no hay disponibilidad de alquiler no se mostrará el botón para el alquiler sino un aviso en su lugar. |
| Aviso que informa de que no se han encontrado elementos en la búsqueda (listado) | products.length === 0 | Si no se encuentran productos se mostrará un aviso en lugar del listado. |
También podemos utilizar la configuración del negocio cuyos parámetros podemos encontrar en la misma llamada en la propiedad settings para personalizar los datos ulteriormente, ejemplos:
| Parámetro en settings | Parámetro en plantilla | Descripción |
|---|---|---|
| hide_price_if_zero | hidePriceIfZero | Oculta el precio si es cero |
| hide_price_if_not_available | hidePriceIfNotAvailable | Oculta el precio si no esta disponible el producto. |
Añadir un fichero con el mismo nombre del fichero que se va a sobrescribir.
Después de este análisis preliminar podemos seguir añadiendo un fichero que sobrescriba una de las tarjetas definidas en el plugin. En esto caso la que se parece más a nuestro diseño es:
- mybooking-plugin-reservation-product-card-reduce-list-tmpl.php
Podemos abrir el fichero del plugin con este nombre en nuestro editor y analizarlo usándolo como ejemplo para nuestra tarjeta personalizada.
Para que se muestre es importante mantener el id del script original. El Engine lo encontrará y lo incorporará en la página en el lugar establecido.
Crear la estructura HTML dentro del fichero y añadir los parámetros de la plantilla
Al interior de este script podemos añadir la estructura de nuestra tarjeta.
Recuerda seleccionar en la personalización del plugin en Wordpress la tarjeta que estas sobrescribiendo. De esta manera podrás ver en la web la tarjeta que estas editando.
Añadir los estilos CSS personalizados
En paralelo puedes ir añadiendo el CSS personalizado en el fichero styles.css de la root principal en el child theme y viendose reflejados estos estilos en la página o añadirlos tras construir la estructura HTML.
Verificar que se visualiza correctamente y se puede realizar la reserva
Una vez concluida la maquetación de la tarjeta es conveniente realizar un testeo con las diferentes variaciones que se pueden verificar en la tarjeta asegurandose además que se puede realizar la reserva (dentro de las condiciones establecidas en el programa gestor) abriéndose la página de checkout correspondiente al producto seleccionado.
Para finalizar puedes descargar el proyecto desde este repositorio de Github.