Deutsch
English
Español
Français
NederlandsEn este artículo te explicaremos:
- Los requisitos previos
- El código
- Configurar el motor de reservas
Los requisitos previos
Asegúrate de completar todos los requisitos previos. Si no lo haces, puede ser difícil entender el código de los casos de uso y el comportamiento del código puede diferir.El código
Los comentarios con números incluyen más detalles debajo del código. Nota: Esta guía es para el entorno de producción. Si deseas probar este código en un entorno diferente, por favor, consulta la guía acerca de probar en un entorno de demostración/estudio/prueba.El código utiliza un escenario de ejemplo con tres hoteles, uno en París y dos de ellos de la misma localidad de Londres.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<!-- 1. Install Distributor loader script as close to the opening <head/> tag as possible -->
<script src="https://api.mews.com/distributor/distributor.min.js"></script>;
<title>My page</title>
</head>
<body>
<!-- 2. Añadir botones para abrir Distribuidor con ubicación específica preseleccionada -->
<button disabled type="button" id="london-button">Loading...</button>
<button disabled type="button" id="paris-button">Loading...</botón>
<script>
// 3. Inicializa el Widget Distribuidor justo antes de la etiqueta de cierre </body> .
Mews. Distributor(
// 3.1 Set configuration ids of your Distributor.
{
configurationIds: [
'id de configuración del primer hotel de Londres',
'id de configuración del segundo hotel de Londres.',
'Id de configuración del hotel de París',
],
},
// Añade una llamada de retorno que hará que los botones abran el Widget del Distribuidor y establezcan la ciudad/ubicación.
function (api) {
const initializeButton = (buttonId, cityId, buttonText) => {
const buttonElement = document.getElementById(buttonId);
buttonElement.addEventListener('click', event => {
event.preventDefault();
// Utiliza la API del Widget Distribuidor para establecer la ciudad/ubicación y abrir el Widget Distribuidor.
api.setCity(cityId);
api.open();
});
buttonElement.innerHTML = buttonText;
buttonElement.disabled = false;
};
// 3.2 Prepara los identificadores de ciudad.
const londonCityId = 'Tu id de ciudad de Londres';
const parisCityId = 'Tu id de ciudad de París';
initializeButton('london-button', londonCityId, 'hoteles de Londres');
initializeButton('paris-button', parisCityId, 'hotel de París');
}
// 4. Esta guía es para entornos de producción.
);
</script>
</body>
</html>
Cómo configurar el motor de reservas
Paso 1: Instalar el script de Mews Booking Engine
Para más información, consulta este enlace este enlace.
Paso 2: Añadir botones para abrir Mews Booking Engine con una ciudad concreta preseleccionada
Los botones se desactivan al cargar la página, por lo que los usuarios no pueden hacer clic en los botones hasta que el widget Mews Booking Engine esté listo para su uso. Lo habilitamos más tarde cuando esté listo.
Paso 3: Inicializar el widget de Mews Booking Engine
Si sabes dónde encontrar los identificadores de configuración, consulta este enlace para más información.
Aunque en la interfaz del usuario figure como ubicación, la API necesita un identificador de ciudad.
- Si no sabes dónde encontrar el identificador de ciudad, consulta este enlace para obtener más información.
- Si cuentas con varios hoteles en la misma ciudad/localidad, el identificador de la ciudad es el mismo para todos ellos. Así que utiliza el primero que encuentres.
Esta guía es para el entorno de producción. Si deseas probar este código en un entorno diferente, por favor, consulta la guía acerca de probar en un entorno de demostración/estudio/prueba.
El Mews Booking Engine Widget API soporta más que preseleccionar y abrir la ciudad/ubicación. Consulta el resto de opciones para Mews Booking Engine Widget API para echar un vistazo al resto de opciones a tu disposición.
Puedes consultar otros casis de uso en este enlace.