Esta librería te permite integrar fácilmente funcionalidades de EventoSimple en tu sitio web. Actualmente, la funcionalidad principal es listadoEventos(), que muestra los eventos vigentes de un portal de ventas específico.
La función listadoEventos() inyecta en tu página web un listado de eventos activos de una cuenta de EventoSimple, mostrando información relevante y permitiendo a los usuarios acceder a la compra de tickets.
Para utilizar el plugin, simplemente incluye el script de la librería y luego instancia eventoSimple.listadoEventos() con los parámetros de configuración deseados.
Aquí tienes un ejemplo básico:
<div id="eventos-container"></div>
<script src="https://cdn.eventosimple.com/pluginjs/eventosimple.js"></script>
<script type="text/javascript">
new eventoSimple.listadoEventos({
contenedor: 'eventos-container', // ID del elemento donde se mostrará el listado
portal: 'https://www.ticketsforlovers.com' // URL de tu portal de ventas EventoSimple
});
</script>La función listadoEventos() acepta un objeto con los siguientes parámetros:
contenedor(Obligatorio):- Tipo:
StringoHTMLElement - Descripción: El ID del elemento HTML (ej:
'mi-div') o la referencia directa al elemento (ej:document.getElementById('mi-div')) donde se renderizará el listado de eventos.
- Tipo:
portal(Obligatorio):- Tipo:
String - Descripción: La URL completa de tu portal de ventas en EventoSimple (ej:
'https://www.tuportal.com'). Debe ser una URL HTTPS válida.
- Tipo:
buscador(Opcional):- Tipo:
Boolean - Por defecto:
true - Descripción: Si es
true, se mostrará un campo de búsqueda para filtrar los eventos. Si esfalse, se ocultará.
- Tipo:
target(Opcional):- Tipo:
String - Por defecto:
'_blank' - Descripción: Define cómo se abrirán los enlaces de los eventos. Puede ser
'_blank'(abrir en una nueva pestaña) o'_self'(abrir en la misma pestaña).
- Tipo:
lazyLoad(Opcional):- Tipo:
Boolean - Por defecto:
true - Descripción: Si es
true, los eventos se cargarán progresivamente a medida que el usuario haga scroll (carga perezosa), mejorando el rendimiento inicial. Si esfalse, se intentarán cargar todos los eventos inicialmente.
- Tipo:
modoOscuro(Opcional):- Tipo:
Boolean - Por defecto:
false - Descripción: Si es
true, el plugin aplicará un tema oscuro.
- Tipo:
filtro(Opcional):- Tipo:
String - Por defecto:
''(vacío) - Descripción: Permite definir un término de búsqueda inicial que se aplicará al cargar el listado de eventos.
- Tipo:
limite(Opcional):- Tipo:
nulloInteger - Por defecto:
null - Descripción: Limita la cantidad total de eventos a cargar. Si es
null, no hay limitación.
- Tipo:
saltear(Opcional):- Tipo:
Integer - Por defecto:
0 - Descripción: Cantidad de eventos a omitir al inicio del listado (offset inicial).
- Tipo:
soloDestacados(Opcional):- Tipo:
Boolean - Por defecto:
false - Descripción: Si es
true, solo se listarán eventos marcados como "destacados" en el slider del portal de ventas de EventoSimple.
- Tipo:
<div id="eventos-container"></div>
<script src="https://cdn.eventosimple.com/pluginjs/eventosimple.js"></script>
<script type="text/javascript">
new eventoSimple.listadoEventos({
contenedor: 'eventos-container',
portal: 'https://www.ticketsforlovers.com',
buscador: true,
target: "_self",
lazyLoad: true,
modoOscuro: false,
filtro: 'concierto',
limite: 4,
saltear: 1,
soloDestacados: false
});
</script>Puedes ver un ejemplo funcional del plugin en ejemplos/listadoEventos.html. Este archivo te permitirá interactuar con el listado de eventos y probar las diferentes configuraciones.
Si deseas una integración visual rápida y sencilla, puedes utilizar el estilo gráfico "Barcelona" que proveemos desde nuestro CDN. Simplemente añade la siguiente línea dentro de la etiqueta <head> de tu HTML:
<link rel="stylesheet" href="https://cdn.eventosimple.com/pluginjs/css/barcelona.css">Esto aplicará un conjunto de estilos predefinidos al listado de eventos.
Si deseas personalizar completamente la apariencia del listado de eventos para que se adapte al diseño de tu sitio web, puedes utilizar la maqueta HTML proporcionada en maqueta/listadoEventos.html.
Este archivo contiene la estructura HTML que genera el plugin, permitiéndote:
- Copiar la estructura.
- Aplicar tus propios estilos CSS.
- Asegurarte de que tu diseño personalizado funcione correctamente con la estructura del plugin.
Nota sobre las imágenes: Ten en cuenta que las imágenes de los eventos que se muestran a través del plugin son siempre de proporciones cuadradas. Ajusta tus estilos CSS en consecuencia si necesitas modificar su visualización.
- Esta librería está diseñada para ser integrada en sitios web existentes y no funciona como una aplicación independiente.
- Actualmente,
listadoEventos()es la única funcionalidad disponible, pero se podrían incorporar más en el futuro.
¡Esperamos que esta herramienta te sea de gran utilidad!