Formulario de búsqueda

El formulario de busqueda es un componente adicional que te permite mostrar el formulario en cualquier lugar de página web, para luego redigirte al buscador principal

Script

Para insertar el formulario necesitas agregar el siguiente script, preferentemente en el elemento head.

<script>
!function(e,t){
    var a = {
        token:"widget-demo",
        host:"http://stage.masterkeyeducation.com:8080/masterkey",
        resultHost:"http://yoursite.com/courses/#/",
        element: '#custom-element'
    };

    e.addEventListener("DOMContentLoaded",function(){var n=e.createElement("script");n.type="text/javascript",n.readyState?n.onreadystatechange=function(){"loaded"!==n.readyState&&"complete"!==n.readyState||(n.onreadystatechange=null,t.searchForm(a))}:n.onload=function(){t.searchForm(a)},n.src="https://bookandlearn2dev.s3.amazonaws.com/builds/course-widget/master/script.js?"+(new Date).getTime(),e.getElementsByTagName("head")[0].appendChild(n)},!0)
}(document,window);
</script>

Y en el body deberás agregar un elemento donde quieras mostrar el buscador con el id que hayas definido en el script

<div id="custom-element"></div>

Parámetros

  • token Cadena de caracteres que permite autenticar las peticiones y obetner los datos correspondientes a la agencia
  • host Servidor de B&L al que se harán las peticiones
  • resultHost URL a la que redireccionará el formulario cuando se envíe, hay dos opciones:
    • Si el buscador está integrado en tu sitio web, deberás poner la URL donde está alojado y agregar un hash, ejemplo: http://yoursite.com/courses/#/
    • Si el buscador está aún alojado en nuestro servidor, la URL a incluir es: http://search.bookandlearn.com/<token>
  • element Opcional Default: widget Selector del elemento donde se mostrará el formulario
  • loadBootstrap Opcional Default: false Bandera para definir si se carga o no Twitter Bootstrap 3.3.7. También es posible agregarlo de manera externa con el siguiente código
  • loadDefaultTheme Opcional Default: true Carga el CSS del tema por default.

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    

Ejemplos

Puedes usar estos ejemplos para tener una mejor idea de como funciona la integración del buscador:

a b
Simple Landing

results matching ""

    No results matching ""