Coder Social home page Coder Social logo

mybooking-js-engine's Introduction

Mybooking JS Engine

Librería JS del motor de reservas mybooking. Está diseñada para ser utilizada en el frontend de una página de reservas.

Permite la creación de motores de reservas para:

  • Alquiler de vehículos
  • Alquiler de material deportivo (kayak, surf, paddle, ...)
  • Actividades o tours.

Funcionalidades:

  • Creación de una web de reservas.
  • Creación de un calendario de disponibilidad para integrarlo en una página existente.

Version de Node

Probar con la versión a partir de 15.10.1

Instalar

$ npm install

Configuración

Crear un fichero config/env.json con el siguiente contenido para indicar la conexión con el API

{ "baseURL": "http://mbctransfer.test", "apiKey": "", "port": 8000 }

Desarrollo

Crear una carpeta config con un archivo env.json con los siguientes atributos

{
  "baseURL": "MY-BOOKING INSTANCE URL",
  "apiKey": "API-KEY",
  "port": 8000
}

Ejecutar

$ npm run start

Abrir el navegador

http://localhost:8000

Construir

$ npm run build

En la carpeta dist/js se generan dos ficheros:

  • mybooking-js-engine.js
  • mybooking-js-engine-bundle.js

El primero contiene todas las librerías para hacer funcionar el motor de reservas.

El segundo está preparado para ser utilizado en plugin de WordPress.

Usar

Configuración de la librería motor de reservas

Para configurar la librería del motor de reservas se necesita definir el objeto mybookingEngine en el contexto window con la información que detallamos a continuación.

Podemos incluirlo antes del final de la etiqueta </body> de cada una de las páginas del proceso de reserva o también podemos externalizarlo en un fichero JS, que es lo que recomendamos.

<script type="text/javascript">
    window.mybookingEngine = function(){
      var baseURL = 'BASE-URL';
      var chooseProductUrl = '/choose_product.html';
      var chooseExtrasUrl = '/choose_extras.html';
      var completeUrl = '/complete.html';
      var summaryUrl = '/summary.html';
      function getBaseURL() {
        return baseURL;
      }
      function getChooseProductUrl() {
        return chooseProductUrl;
      }
      function getChooseExtrasUrl() {
        return chooseExtrasUrl;
      }
      function getCompleteUrl() {
        return completeUrl;
      }
      function getSummaryUrl() {
        return summaryUrl;
      }
      return{
        baseURL: getBaseURL,
        chooseProductUrl: getChooseProductUrl,
        chooseExtrasUrl: getChooseExtrasUrl,
        completeUrl: getCompleteUrl,
        summaryUrl: getSummaryUrl
      }
    }();
</script>
<script src="/assets/js/mybooking-js-engine.js"></script>

Creación de las páginas

El proceso de reserva se implementa en 4 páginas html independientes. Se han de crear en el sitio web y han de seguir las siguientes convenciones:

  • Una clase en la etiqueta body que permite identificar el paso del proceso en el que estamos.
  • Una serie de contenedores que se utilizarán para presentar la información.
  • Un conjunto de micro templates para personalizar la presentación.
  1. Inicio

    <body class="index"></body>
  2. Choose product

    <body class="choose_product"></body>
  3. Complete

    <body class="complete"></body>
  4. Summary

    <body class="summary"></body>

mybooking-js-engine's People

Contributors

amvisualdesigner avatar anabel-mybooking avatar

Stargazers

Bogdan avatar

Watchers

 avatar Marcel Reig avatar mybooking avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.