1. ¿Qué es un Widget de Reserva React?
El widget de reservas es una alternativa para los operadores que ya proporcionan una descripción detallada de sus ofertas. Con el widget de reserva, sólo se procesarán los procedimientos de reserva realizados a través de su tienda de entradas. La presentación de sus ofertas se dejará en su totalidad en manos de usted y de su sitio web. Su configuración se encuentra en su cuenta Regiondo:
Nota
Haga clic en Reservar Widget (React.JS) para configurar el nuevo widget de reserva. Si no ve esta opción, por favor envíe un correo electrónico a support@regiondo.com.
2. ¿Cuáles son las ventajas?
- Utiliza la última tecnología
- Tiene tiempos de carga más rápidos
- El diseño es nuevo y limpio
- Hay varias opciones de personalización que no son posibles con el antiguo widget, p. adaptación de los widgets individuales en lugar de todos a la vez, widget sólo para cupones (sin venta de tickets con fecha) > CSS
3. ¿Qué ajustes puedo elegir para el widget de reserva?
Por favor, defina los siguientes ajustes antes de generar tu código:
1. Seleccione Producto: Seleccione su idioma preferido y la oferta para la que desea configurar el proceso de reserva como widget. Rellene el ancho deseado del iFrame. Tiene la opción entre Auto, pantalla completa y un ancho específico en píxeles.
2. Su código HTML: Después de que haya realizado la configuración, su código HTML personal se generará automáticamente.
3. Vista previa: Se muestra una vista previa del widget de reserva.
4. ¿Dónde se puede colocar el widget de reserva en el sitio web?
Al cargar la página, el widget se mostrará dentro de una etiqueta DIV. La etiqueta SCRIPT se puede colocar
- dentro de una etiqueta HEAD, junto con una etiqueta DIV o
- antes de cerrar la etiqueta BODY.
Si se implementan múltiples fragmentos de código de widget en la misma página, cada etiqueta DIV se procesará sólo una vez.
Atención:
Para las medidas de seguridad, muchos sistemas de gestión de contenido (CMS) bloquean etiquetas SCRIPT dentro del contenido. Algunos sistemas tienen la posibilidad de cambiar la restricción para permitir etiquetas SCRIPT dentro del contenido. Cuando no hay posibilidad de eliminar esta restricción, se puede añadir una etiqueta SCRIPT a la página con el campo correspondiente "script personalizado" si está presente, o cambiando los archivos del tema directamente.
Tenga en cuenta:
Cuando el widget está integrado a la página dinámicamente, por ejemplo, dentro de las ventanas emergentes modales o secciones de barra lateral de deslizamiento, es necesario tener la etiqueta SCRIPT del widget inicialmente cargado en la página, para que PayPal funcione correctamente cuando el cliente es devuelto al sitio web después de una cancelación exitosa de la compra o el método de pago.
Añadir widget en WordPress:
Para añadir widgets en WordPress, Regiondo creó un plugin Widget de reserva. Después de la instalación, se pueden añadir fragmentos de código como widgets o códigos cortos. Lea más aquí.
5. ¿Cómo personalizar la funcionalidad del widget?
La funcionalidad del widget se puede personalizar añadiendo atributos adicionales a la etiqueta DIV.
5.1 Atributos por defecto del widget:
Aquí está la lista de atributos de widget esenciales:
- data-locale = "es_US"
Atributo indica el idioma del producto seleccionado.
- proveedor de datos = "RE000"
El atributo indica el código único del proveedor.
- data-product = "T-RE000-000000"
Atributo indica el código SKU único del producto seleccionado. Es posible sustituir dinámicamente el código SKU de los productos, para implementar fácilmente muchos widgets de productos en su sitio web.
- data-url = "https://regiondo-demo.regiondo.com/"
Atributo indica el título del producto seleccionado. Es un atributo informativo y puede ser omitido.
- data-font = "Open Sans"
El atributo establece la fuente base para el widget. Si se establece, el archivo de fuente correspondiente se cargará desde Google Fonts. Si el sitio web ya tiene el mismo archivo de fuente cargado desde Google, se recomienda desactivar la carga de fuentes para el widget. Ver data-disable-font sobre cómo desactivar la carga de fuentes.
Aquí está la lista de fuentes más populares de Google Fonts:
- Abrir Sans
- Roboto
- Lato
- Oswald
- Source Sans Pro
- Montserrat
- PT Sans
- Raleway
- Lora
- Noto Sans
El Widget no cargará archivos de fuentes de Google Fonts, si la fuente especificada coincide con una de las fuentes estándar del sistema:
Arial
Verdana
Tahoma
Helvetica
Helvetica Neue
Nuevos tiempos Romanos
Veces
Nuevo mensajero
Correo
Georgia
Geneva
Palatino
Linotipo de Palatino
Candara
Cambria
Calibri
Segoe UI
Garamante
Librero
Libro Antiqua
Lucida Sans Unicode
Lucida Grande
Consolas
Avant Garde
Comic sin MS
MS de Trebuchet
Negro Arial
Impacto
- data-ancho = "400px"
Atributo establece el ancho máximo de los widgets. El valor por defecto es auto, lo que significa que el widget tomará todo el ancho disponible. Si necesita limitar el ancho máximo del widget, el valor puede establecerse como fijo "400px" o porcentaje "50%". Se puede omitir para permitir que el widget reaccione automáticamente.
- datos-layout = "pantalla completa"
Este atributo aparece en lugar del ancho de datos seleccionado como "Pantalla completa". Si se selecciona, el widget se posicionará como absoluto, con anchura y altura establecida como 100%, para cubrir todo el espacio disponible. Esto es útil si el widget tiene que ser implementado dentro de una caja de luces o una barra lateral de deslizamiento.
5.2 Atributos adicionales del widget:
- data-gift-option = "true"
El atributo permite anular la configuración de la opción de regalo del producto en el panel de control. Si se establece en "verdadero", este atributo obligará al widget a mostrar las pestañas de producto y regalo. Si se establece en "falso", la opción de regalo se desactivará y las pestañas se ocultarán.
- data-gift-option-highlighted = "true"
Además de la opción de regalo de datos, este atributo permite sobreescribir la configuración para mostrar la opción de regalo tal como está habilitada por defecto. Si se establece en "verdadero", la opción de regalo estará activa. Si se establece en "falso" - La pestaña de producto estará activa y la pestaña de regalo estará inactiva.
- data-gift-option-only = "true"
Atributo permite mostrar el widget con opción de regalo solamente. Si se establece en "verdadero", las pestañas de widget se ocultarán y sólo la opción de regalo estará disponible.
Esto es útil para una flexibilidad adicional, cuando es necesario para deshabilitar la reserva de citas debido a dificultades temporales o renovaciones.
- data-date = "2020-12-31"
El atributo permite establecer una fecha preseleccionada para una reserva, formateado como "AAA-MM-DD:. Si se establece, la fecha especificada se seleccionará en el calendario. El cliente todavía puede cambiar la fecha. Esto es útil cuando el sitio web tiene listas de eventos o un calendario y el widget debe abrirse en la caja de iluminación para una fecha específica.
- datos-tiempo = "20:20"
Además de la fecha de datos, este atributo permite establecer la hora preseleccionada para una reserva, formateada como "HH:MM". Si se establece, se seleccionará el tiempo especificado de una cita. El cliente todavía puede cambiar el tiempo preseleccionado.
- dato-máximo-meses = "2"
El atributo permite establecer la cantidad máxima de meses que se mostrarán a la vez en el calendario. El widget tiene ancho adaptativo y dependiendo del espacio disponible, el cliente puede ver hasta 6 meses naturales. Este atributo es útil cuando necesita limitar la cantidad de meses naturales, por ejemplo cuando el ancho de un mes calendario se ve afectado por CSS personalizado y sólo un mes puede caber en una fila.
- datos-paso = "carrito"
Atributo establece el widget para abrir un paso especificado como paso inicial. Con un valor vacío o cuando se omite el widget se comporta normalmente. Ejemplo. Si se establece en "carrito", el widget cargará la vista del carrito de compras.
Este atributo se puede utilizar para mostrar el widget en una página de carrito de compras separada del sitio web, por ejemplo donde el cliente puede obtener haciendo clic en el botón del carro de la compra en el encabezado. O cuando sea necesario para agregar un paso adicional a la experiencia de pago.
Los valores posibles son: "carrito", "contacto", "pago", y "envío".
- data-skip-carrito = "verdadero"
El atributo permite cambiar el comportamiento por defecto del widget para omitir el paso del carrito de la compra. Si se establece en "verdadero", después de que el producto se agrega al carrito, el cliente procede directamente a la compra.
- data-disable-loading-animation = "true"
El atributo permite desactivar la animación de carga del widget.
Esto es útil si el sitio web tiene su propia animación de carga.
- data-disable-font = "verdadero"
El atributo permite desactivar la carga de archivos de fuentes de Google Fonts, especificados en "data-font". Si el sitio web ya tiene la misma fuente personalizada, se recomienda añadir este atributo a "true", para evitar peticiones adicionales al cargar la página.
- data-font-size = "16px"
El atributo establece el tamaño de fuente base para el widget. Esto permite cambiar el tamaño de fuente base de los widgets fácilmente, para que coincida mejor con la tipografía del sitio web. También puede ser útil si el sitio web tiene un tamaño de fuente adaptable, basado en el ancho de la pantalla de los visitantes.
- data-font-size-large = "20px"
Similar a "tamaño de fuente de datos", el atributo establece el tamaño de fuente para títulos, nombres de productos, botones, etc.
- data-font-size-small = "14px"
Similar a "data-font-size", el atributo establece el tamaño de fuente para el texto de advertencia, etiquetas de campo de entrada, etc.
- data-font-line-height = "1.4"
Atributo establece la altura de línea base de las líneas de texto.
- relleno de datos = "0" o relleno de datos = "20px"
El atributo establece los bordes horizontales para el lado izquierdo y derecho de los elementos dentro del widget. Esto permite la eliminación de relleno cuando un widget es implementado en un sitio web con bordes integrados.
- data-disable-currency-dropdown="true"
Atributo permite deshabilitar el desplegable de monedas.
- data-disable-language-dropdown="true"
Atributo permite desactivar el menú desplegable de idiomas.
- data-disable-cart-button="verdadero"
Cuando el carrito no está vacío, es posible utilizar el botón "Ir al carrito"-para comprobar el contenido del carrito. Este atributo permite ocultar el botón, con el fin de hacer el widget más pequeño en altura cuando hay un espacio limitado para el widget en una página.
- data-disable-reservation-timer="verdadero"
Este atributo también es útil para reducir la altura de los widgets ocultando la cuenta regresiva de la reserva en la página del carrito de compras.
- data-disable-back-button="true"
El atributo permite desactivar el botón "Atrás"-en el carrito de compras y el checkout, que es útil para las implementaciones de widgets dentro de pequeñas ventanas modales cuando hay adicionales "Cerrar"-botones disponibles para iniciar la selección de producto.
- data-disable-carrito-cupón="verdadero"
Cuando los cupones y cupones no están en uso o el campo de cupón debe estar oculto para productos específicos o por un corto periodo de tiempo. entonces este atributo puede ser útil.
- data-disable-invoice-form="verdadero"
Este atributo permite ocultar el formulario de factura de "Contacto" paso en el proceso de compra, para hacer el proceso de pago menos complejo.
6. ¿Cómo se puede personalizar la funcionalidad del widget con CSS?
El nuevo Widget de Libras se puede personalizar fácilmente con CSS, ya que todo el contenido del widget se muestra en la página sin iFrames. To do so, it needs to add CSS rules to the website with a .css file and <link> tag or just with <style></style> tags allowed.
1. When it is possible to upload a .css file to the server, adding the .css file with <link> tag is recommended, as a .css file will be cached by the browser after the first page load. Para enlazar el archivo "custom.cs" con todas las reglas CSS en el interior, puedes incluirlo en la sección <head> de la página web:
<link rel="stylesheet" href="/css/custom.css">
2. Si no hay posibilidad de añadir una etiqueta de enlace a la cabeza, es posible inyectar el archivo .css con JavaScript de la siguiente manera:
<script>
(function(d) {
var css = d.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('href', '/css/custom.css');
d.getElementsByTagName('head')[0].appendChild(css);
}(document));
</script>
De lo contrario, las reglas CSS pueden colocarse dentro de etiquetas <style> </style> y pueden incluirse en cualquier parte de la página, como este:
<style>
.regiondo-booking-widget {
border:2px solid #d0d0d0;
border-radius:10px;
}
</style>
7. ¿Cómo se pueden cambiar los textos y las traducciones?
Las reglas específicas de CSS permiten cambiar no sólo los colores o estilos del elemento html, sino también su contenido de texto.
Aquí hay ejemplos de cómo cambiar el texto de los diferentes elementos dentro del widget de reserva.
7.1 Texto de la pestaña Producto y Regalo
Este ejemplo también muestra cómo cambiar el texto de un idioma local específico:
Código:
<style>
.regiondo-widget .regiondo-tabs__tab[data-tab="product"]:after {
content: 'Ticket';
}
.regiondo-widget . egiondo-tabs__tab[data-tab="gift"]:after {
contenido: 'Regalo';
}
.regiondo-booking-widget[data-locale="de_DE"] . egiondo-tabs__tab[data-tab="product"]:after {
content: 'Eintrittskarte';
}
.regiondo-booking-widget[data-locale="de_DE"] . egiondo-tabs__tab[data-tab="gift"]:after {
contenido: 'Geschenk';
}
</style>
Resultado:
7.2 Texto de la línea de introducción
En algunos casos, para sobrescribir una regla "!important" puede ser añadido. Sin embargo, es mejor utilizar normas más específicas. Al indicar uno o más elementos antes del elemento objetivo, la regla se vuelve más específica y obtiene una prioridad más alta:
Nota
Si utiliza las mismas clases de CSS que dentro del widget en el CSS como lo hace en su sitio web, podría sobrescribirse. Con el fin de sobrescribir las reglas de CSS con tus propias reglas de censo, puedes usar "!important".
Código:
<style>
.regiondo-widget .regiondo-intro-text:after {
content: 'Elija una fecha abajo para ver las horas disponibles:' !important;
}
</style>
Código:
<style>
.regiondo-widget .regiondo-content .regiondo-intro-text:after {
content: 'Elija una fecha abajo para ver las horas disponibles:';
}
</style>
Resultado:
7.3 Texto del título del paso Fecha/Hora/Opción
Algunos elementos tienen clases específicas basadas en el estado del elemento o la acción del usuario que puede utilizarse para cambiar texto, también después de que el usuario haya seleccionado una opción:
Código:
<style>
.regiondo-widget .regiondo-step-variation .regiondo-step__title:after {
content: 'Select an Option';
}
.regiondo-widget .regiondo-step-date . egiondo-step__title:after {
content: 'Select a Date';
}
.regiondo-widget .regiondo-step-time . egiondo-step__title:after {
content: 'Select a Time';
}
.regiondo-widget . egiondo-step-variation.regiondo-step--selected .regiondo-step__title:after {
content: 'Option:';
}
.regiondo-widget .regiondo-step-date.regiondo-step--selected . egiondo-step__title:after {
content: 'Fecha:';
}
.regiondo-widget .regiondo-step-time.
Resultado:
7.4 Texto de los períodos de tiempo
En el paso de la selección de tiempo, hay títulos de período de tiempo. Ranuras de tiempo separadas por periodos de tiempo:
- de 0 a 5 es "Noche"
- de 6 a 11 es "Mañana"
- de 12 a 17 es "Después de la mediodía"
- de 18 a 23 es "Noche"
Estos títulos del período de tiempo pueden cambiarse con CSS de la siguiente manera:
Código:
<style>
.regiondo-widget .regiondo-times__period.regiondo-times--night:after {
content: 'NIGHT:';
}
. egiondo-widget .regiondo-times__period.regiondo-times--morning:after {
contenido: 'MORNING:';
}
. egiondo-widget .regiondo-times__period.regiondo-times--afternoon:after {
contenido: 'AFTERNOON:';
}
.
Resultado:
Alternativamente, los títulos del período de tiempo pueden ocultarse. Puedes añadir "mostrar: en línea" para eliminar saltos de línea en los grupos de tiempo:
Código:
<style>
.regiondo-widget .regiondo-times__period {
display: ninguno;
}
.regiondo-widget .regiondo-times__group {
display: inline;
}
</style>
Resultado:
7.5 Texto de "Añadir a la Carrito" y "Proceder a los botones de Verificar"
Aquí hay un ejemplo de cómo cambiar el texto del botón, incluyendo el caso de letra:
Código:
<style>
.regiondo-widget .regiondo-addtocart .regiondo-button-addtocart:after {
content: 'Añadir al carrito';
}
. egiondo-booking-widget[data-locale="de_DE"] .regiondo-addtocart .regiondo-button-addtocart:after {
content: 'In den Warenkorb';
}
.regiondo-widget .regiondo-button. egiondo-button-checkout:after {
content: 'Proceder a Checkout';
text-transform:uppercase;
}
. egiondo-booking-widget[data-locale="de_DE"] . egiondo-button.regiondo-button-checkout:after {
content: 'Zur Kasse';
text-transform:uppercase;
}
</style>
Resultado:
7.6 Texto de "Continuar la compra" y "Canjear código" botones
Este ejemplo muestra cómo cambiar el texto de los botones secundarios así como el texto en una vista de carrito de la compra vacía. Los elementos tienen los mismos nombres de clase para diferentes páginas. Para distinguirlos necesitamos añadir más especificidad a nuestras normas:
Código:
.regiondo-widget .regiondo-checkout--cart .regiondo-button-back:after {
contenido: 'Volver';
}
. egiondo-widget .regiondo-checkout--cart .regiondo-button-coupon:after {
contenido: '¿Tienes un cupón?';
}
. egiondo-widget .regiondo-empty-cart .regiondo-button-continue:after {
content: '« Volver al Producto';
}
. !importante;
}
Resultado:
7.7 Texto de los títulos de los pasos de progreso del checkout
Los pasos de progreso se muestran en el carrito de la compra y en las secciones de pago. Aquí está la lista de todos los pasos de pago disponibles:
- Carrito
- Añadido
- Contacto
- Envío
- Pago
Pasos "Complemento" y "Envío" solo se puede ver cuando hay un Complemento (Merudedising) producto