Crear un PopUp

Queridas o no muchas veces es necesaria una ventana modal o PopUp en la portada de nuestra tienda. A continuación te contamos como crear una usando la API, por cierto.

Nota: Este demo usa el módulo modal, el cual forma parte de una librería Javascript desarrollada por Bootic

Requerimiento

El requerimiento para este ejercicio es simple: Cada vez que un cliente ingrese a la portada se quiere mostrar una ventana modal o popup.

Importante: la foto (jpg), la plantilla (html) y los script (rb) deberán estar en la misma carpeta.

Paso 1: Foto y link

El primer paso será tener la foto que aparecerá y no menos importante hacia qué colección, tipo de producto o página enlazará el link de la misma.

Nuestra foto se llamará popup.jpg y el link apuntará a la colección cyberday.

Paso 2: Subir la foto

El segundo paso será subir la foto a la tienda, para esto usaremos la API y el script upload_popup_photo.rb. Lo debes llamar de la siguiente forma:


$ bootic runner upload_popup_photo.rb

Cuando finalice te mostrará la URL de la foto que acabas de subir, este dato eventualmente podrías necesitarlo.

Paso 3: la URL de la foto en la plantilla

Tal cual como está la plantilla _popup.html la URL se genera de forma automática gracias al helper Liquid (asset_url): 


...
  "image_url": "{{ 'popup.jpg' | asset_url }}",
...

Ahora bien, también es posible ingresar la URL completa de la foto, tal cual como se ve en la siguiente captura:

Popup

Por eso en el paso 2 se muestra la URL de la foto que se acaba de subir.

Paso 4: Crear plantilla

Ya tenemos todo, ahora solo resta subir la plantilla (AKA popup). Para ello debe correr en tu línea de comandos los siguiente: 


$ bootic runner create_popup.rb

Paso 5 y final: publicar popup

Para publicar debes agregar lo siguiente al final de la plantilla layout. Esto hará público el popup.


{% include_optional '_popup.html' %}

Importante: usamos include_optional, el cual no generará error si la plantilla no existiera.

Te debería quedar así:

Popup

Bonus: Borrar popup

Así como rápidamente queríamos publicar un popup, rápidamente también sería bueno borrarlo. Para ello corremos lo siguiente en la línea de comandos: 

$ bootic runner delete_popup.rb

Anexos: Scripts y plantilla usada en este tutorial