Documentación Bootic

Todo la información para empezar a vender en línea.

Galería o slideshow de productos

Ejemplo 1

Galería de imágenes de productos

Los "banners" o imágenes rotativas de productos pueden ser resueltos utilizando las galerías.

The stage

Ejemplos

El diseño por defecto de las tiendas Bootic usa la librería JavaScript jQuery con el plugin Cycle para hacer imágenes rotativas fácilmente.

El código

El HTML para mostrar la galería destacados:

<div id="myGallery">
    {% for item in galleries.destacados %}
      <div class="imageElement">
        <a href="{{ item.url }}" title="Ver más" class="open"></a>
        <img src="{{ item.image | resize:'540x' }}" class="full" alt="{{ item.descripcion }}" />
      </div>
    {% endfor %}
  </div><!-- /myGallery -->

A continuación es necesario incluír las librerías JavaScript jQuery y el plugin Cycle. La primera puede ser incluída directamente desde los repositorios de Google. En layout.html, en la sección head:

{{ 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' | javascript_tag }}

El plugin Cycle debes descargarlo y subirlo como archivo al editor de tu tienda. Una vez subido lo puedes incluír en layout.html, justo despues de jQuery:

{{ 'jquery.cycle.all.latest.js' | asset_url | javascript_tag }}
Lee "jQuery y librerías externas" para saber más sobre cómo trabajar con javaScript en Bootic.

Por último, necesitarás un poco de CSS para que la galería de imágenes se vean bien (en master.css):

#myGallery{
  width: 500px !important;
  height: 200px !important;
  border: 20px solid #f3f3f3 !important;
  margin-bottom: 20px;
  overflow: hidden;
}

/* esto es para cuando .imageElement tenga solo un elemento */
.imageElement{
  text-align: center;
}

.imageElement a.open{
  width: 500px;
  height: 200px;
  display: block;
  position: absolute;
}

.imageElement h3,
.imageElement p,
.imageElement .thumbnail{
  display: none;
}
.imageElement .full{
  margin-top: -15%;
  margin-bottom: 15%;
}

Lo único que falta es inicializar la galería de imágenes usando jQuery Cycle (en home.html):

<script type='text/javascript' charset='utf-8'>
  $(function () {
    $('#myGallery').cycle({
      fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
  });
</script>

Ejemplo 2

En el 99% de las veces querrás que la galería aparezca en la portada de tu tienda entonces deberías incluir el siguiente trozo de código en la plantilla home.html.

...
{% include 'galeria' %}
...

Aspecto dinámico - requerido la primera vez

Los tres pasos anteriores son suficientes para mostrar una galería. Sin embargo la primera vez que creas una es necesario un paso adicional: Agregar los archivos necesarios para darle un aspecto más dinámico a tu galería.

galeria

Pasos para configurar aspecto dinámico

  1. Anda a Diseño > Editar Plantilla Actual > Crear nueva.
  2. En nombre pones galeria
  3. Selecciona html
  4. Clic en Crear

Repite los tres pasos anteriores para crear además:

  1. galeria-header
  2. galeria-footer

El contenido de cada una de las tres plantillas que acabas de crear lo encuentras acá (haz clic en el nombre, luego copia y pega). No olvides darle clic en botón Guardar.

En el siguiente video se muestra el procedimiento de copia-pegar:

Para finalizar la configuración solo resta llamar a galeria-header y galeria-footer. Esto lo hacemos en layout.html En la Figura 2 puedes ver el lugar desde donde se hace la llamada. Antes del </header> y antes del </body>.

Layout
Figura 2. Llamada de plantillas necesarias para el funcionamiento dinámica de la galería

La plantilla layout.html debería verse así:

Layout
Llamada de galeria-header
Layout
Llamada de galeria-footer

Listo, en la portada de tu tienda ahora deberías poder ver la galería funcionando.

Crea tu tienda hoy mismo. Sin compromisos. Ver planes