npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mybooking-js-engine

v2.1.0

Published

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

Downloads

103

Readme

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>