Manual del Desarrollador de Plantillas
Ambiente de Desarrollo
El ambiente de desarrollo de plantillas se base en 2 módulos: el editor de plantillas y el administrador de sitios Web.
Editor de Plantillas
Ailoo dispone de un ambiente de desarrollo para la creación y edición de plantillas. El editor plantillas se encuentra en Web > Editor de Plantilla:
Las plantillas de Ailoo se componen de un conjunto de archivos y recursos que se alojan en un directorio. La estructura de un directorio Ailoo es la siguiente:
| Directorio | Descripción |
|---|---|
| components | Directorio que aloja las vistas de los plugins |
| content | Contiene recursos de la plantilla. Generalmente aquí se dejan las imágenes, js, y css. |
| Home | Plantilla de la página Home |
| layouts | Plantillas que definen la estructura del sitio |
| Product | Plantillas de las páginas de detalle del producto y listado de productos |
| ProductJson | Plantillas adicionales utilizados en invocaciones JSON |
| recues | Plantillas para las páginas de errores |
| Widgets | Plantillas de los distintos Widgets |
Administrador de Sitios Web
El administrador de sitios Web permite administrar su plantillas subiendo imagenes y agregando contenidos. Es en el administrador de plantillas donde el usuario puede subir las imágenes del carrusel, ingresar posts para su blog o cambiar el logo del sitio.
Para ingresar en el administrador de plantillas se debe ir a Web > Paginas2. En la imagén de abajo se muestra el contenido de la página Home:
Creando su Primera Plantilla
Para entender mejor el ambiente de desarrollo de plantillas en Ailoo vamos hacer un ejemplo. Vamos a crear un sitio de eCommerce utilizando Bootstrap. Para esto deben ir a el editor de plantillas y presionar el botón “Agregar” plantilla:
En la ventana deben ingresar el nombre de la plantilla, esta debe ser unico entre todos los dominios por lo que sugerimos usar el nombre del dominio donde se ha ingresado, por ejemplo: Prueba123 (donde Prueba es el nombre del dominio). El nombre del dominio se puede ver en la url del administrador de Ailoo, por ejemplohttp://prueba.admin.ailoo.cl.
Subida de Archivos
Una vez creado el directorio principal de la plantillas vamos a agregar los directorio requeridos por el motor de plantilla. Primero creamos el directorio “content”. Para esto se debe seleccionar la carpeta raíz de la plantilla y luego presionar el botón “Agregar Directorio”:
En la ventana de “Agregar directorio” se debe colocar el nombre del directorio, en esta case es “content”.
Luego, dentro de “content” creamos los directoriosimages,css,fontsyjs. Los pasos son los mismos que seguimos para crear el directorio “content”, pero ahora se debe seleccionar primero la carpeta “content” y luego se agregan las subcarpetas:
Una vez creado los directorios debemos subir los archivos de bootstrap. Estos se pueden encontrar enhttp://getbootstrap.com/getting-started/#download. Al descomprimir Bootstrap se generá 3 directorios: css, fonts, y js. El contenido de cada uno de estos directorio se deben subir a Ailoo.
Primero vamos a subir el directorio /css de bootstrap. Para esto primero hay que abrir el directorio css que se encuentra en content/css y luego presionar el botón “Subir archivos”:
En la ventana se subida de archivo se debe presionar el botón “Elegir archivos”:
Se debe seleccionar los archivos locales que se encuentran en la carpeta /css de bootstrap:
Una vez seleccionado los archivos de debe presionar el botón “Subir Todo”:
Cuando se haya completado la subida de todos los archivos se debe cerrar la ventana de subida de archivo (presionar el botón x en la parte superior derecha).
A continuación se muestra el listado de los archivos que se subieron:
Este proceso se debe repetir para las carpetas defontsyjsde bootstrap.
Creación de Plantilla
Una vez subido los archivos de bootstrap podemos iniciar el desarrollo de la plantilla. Primero debemos agregar el archivo de plantilla, para esto se debe crear el directoriolayoutsen la carpeta principal de la plantilla:
Una vez creado el directorio agregamos el archivodefault.vmal directorio:
Se debe hacer doble clic sobre el archivo creado default.vm para editarlo.
Antes de continuar, vamos definir la estructura de la plantilla. La plantilla que vamos desarrollar tiene la siguiente estructura:
A continuación se muestra el código HTML donde definimos está estructura básica:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi Tienda</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Templates/AilooPrueba/content/css/bootstrap.min.css">
<link rel="stylesheet" href="/Templates/AilooPrueba/content/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/Templates/AilooPrueba/content/css/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="/">Mi Tienda</a>
</div>
<div class="panel panel-default row">
<div class="col-xs-3">menú</div>
<div class="col-xs-8">contenido</div>
</div>
<footer>
<div class="panel panel-default row">
<div class="col-xs-12">footer</div>
</div>
</footer>
</div>
</body>
</html>
Ahora estamos listo para ver como se ve nuestro sitio. Para eso debemos crear un sitio web que utilice nuestra plantilla.
Creación de un sitio Web
Para crear un nuevo sitio Web se debe ingresar al administrador de sitios en Web > Pagina2. En el administrador de sitio se debe seleccionar “Agregar Sitio”:
En la ventana de agregar sitio se debe ingresar el nombre del sitio, el host y seleccionar la plantilla.
El nombre del sitio es cualquier nombre descriptivo, por ejemplo “Mi Sitio Prueba”. El host es el nombre del host donde se encuentra tu sitio. Este puede ser cualquier nombre de host comowww.mitienda.cl. Para esta prueba vamos a utilizar cualquier host del dominio Ailoo, por ejemplo prueba1.ailoo.cl. Ojo, debido a que otros usuarios pueden haber utilizado este dominio, puede ser necesario probar con otro ya que el dominio va estar tomado. Por ejemplo se puede probar con prueba2.ailoo.cl, xd12xf.ailoo.cl o cualquier otro nombre de host que no esté siendo utilizado.
Una vez creado su sitio podemos agregar la primera página, la página “Home”. Para esto se debe hacer botón derecho sobre la raíz del sitio y seleccionar “Agregar Página”:
En la ventana de agregar página debes colocar el nombre de la página y seleccionar el tipo de página. En este caso vamos colocar “Home” como el nombre de la página y seleccionamos “Home” como el tipo de página. Luego se presiona el botón “Aceptar”:
Lo números que salen dentro de los corchetes es el identificador del contenido. Estos números se utilizan en la configuración de varios plugins que puedes agregar a Ailoo, lo cual veremos más adelante.
Ahora podemos visualizar nuestra página colocando el nombre del host que utilizamos al crear el sitio en el navegador:
