Video en la página de inicio

En el este tutorial vamos a crear una opción para mostrar un video en la página de inicio de la tienda. Esta funcionalidad soporta links de Youtube y Vimeo.


HTML

1.Lo primero que vamos a hacer es crear las carpeta home dentro de la carpeta snipplets, y luego agregar el snipplet home-video.tpl con el siguiente código:

{% if settings.video_embed %}
    <section class="section-video-home">
        <div class="container{% if settings.video_full %}-fluid p-0{% endif %}">
            <div class="row no-gutters">
                <div class="col">
                    <div class="js-video-home embed-responsive embed-responsive-16by9">
                        <div class="js-play-button video-player">
                            <div class="video-player-icon">
                                {% include "snipplets/svg/play-circle.tpl" with {svg_custom_class: "icon-inline icon-2x svg-icon-invert"} %}
                            </div>
                        </div>
                        <div class="js-video-image">
                            <img data-src="" class="lazyload js-lazy-loading img-fluid video-image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endif %}

2. En este paso necesitamos agregar una carpeta SVG dentro de la carpeta snipplets, donde vamos a crear el snipplet para el ícono del botón “play” con el nombre play-circle.tpl 

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z"/></svg>

3. Por último necesitamos llamar al snipplet del video en el template templates/home.tpl, en la ubicación que prefieras dentro de tu diseño.

{% include 'snipplets/home/home-video.tpl' %}

CSS

Requisito:

Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).

1.Agregar los estilos dentro del archivo static/style-critical.tpl 

Si en tu diseño usas una hoja de estilos para el CSS crítico, vamos a necesitar el siguiente código dentro de la misma, pero si no es el caso entonces podés unificar el CSS de los pasos 1 y 2 en un solo archivo.

{# /* // Min width 768px */ #}

@media (min-width: 768px) { 

  {# /* //// Home */ #}

  {# /* Video */ #}

  .video-player-icon {
    width: 64px;
    height: 64px;
    font-size: 30px;
    margin: -32px 0 0 -32px;
  }
}

2. Agregar los estilos dentro del archivo static/style-async.tpl 

Si en tu diseño usas una hoja de estilos para CSS asíncrono, vamos a necesitar el siguiente código dentro de la misma, pero si no es el caso entonces podés unificar el CSS de los pasos 1 y 2 en un solo archivo.

{# /* // Video */ #}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    &.embed-responsive-16by9 {
        padding-bottom: 56.25%;
    }
    .embed-responsive-item,
    embed,
    iframe,
    object,
    video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
}

.video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    cursor: pointer;
}
.video-player-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    padding: 0;
    line-height: 30px;
    text-align: center;
}
.video-image {
    display: block;
    width: 100%;
}

JS

1. El JavaScript necesitamos agregarlo en el archivo store.js.tpl (o donde tengas tus funciones de JS). El código que necesitamos es el siguiente:

{# /* // Youtube or Vimeo video */ #}

{% if settings.video_embed %}
    function parseVideo (url) {

        url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

        if (RegExp.$3.indexOf('youtu') > -1) {
            var type = 'youtube';
        } else if (RegExp.$3.indexOf('vimeo') > -1) {
            var type = 'vimeo';
        }

        return {
            type: type,
            id: RegExp.$6
        };
    }

    var videoObj = parseVideo('{{ settings.video_embed }}');
    var $iframe = $('.js-video-home');
    if (videoObj.type == 'youtube') {
        $('.js-play-button').click(function() {
            $iframe.html('<iframe class="embed-responsive-item" src="https://youtube.com/embed/' + videoObj.id + '?color=white&amp;rel=0&amp;showinfo=0&amp;autoplay=1" allow="autoplay; encrypted-media"></iframe>');
        });
        var thumbYoutube = ('https://img.youtube.com/vi/' + videoObj.id + '/maxresdefault.jpg');
        $('.js-video-image img').attr('data-src', thumbYoutube);
    } else if (videoObj.type == 'vimeo') {
        $('.js-play-button').click(function() {
            $iframe.html('<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/' + videoObj.id + '?color={{ settings.button_bg | ltrim('#') }}&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen></iframe>');
        });
        $.get('https://vimeo.com/api/v2/video/' + videoObj.id + '.json', function(data) {
          var thumbVimeo = data[0].thumbnail_large;
          var thumbSplit = thumbVimeo.split(/\d{3}(?=.jpg)/);
          $(".js-video-image img").attr('data-src', thumbSplit[0] + '1280x720' + thumbSplit[1]);
        });
    }
{% endif %}

2. Como en este tutorial usamos la técnica de lazy load con el plugin Lazysizes, necesitamos agregarlo. Para ver como hacerlo podés leer este corto artículo y luego continuar con este tutorial.

Configuraciones

En el archivo config/settings.txt vamos a agregar el checkbox para poder activar o desactivar el video, así como el campo para el link de Youtube o Vimeo.

collapse
    title = Video
checkbox
    name = video_full
    description = Mostrar video a todo el ancho de la pantalla en computadoras
i18n_input
    name = video_embed
    description = Link (Youtube o Vimeo)
description
    description = Ej: https://www.youtube.com/watch?v=dptrWehSI8c

Traducciones

En este paso agregamos los textos para las traducciones en el archivo config/translations.txt

--- --- Video

es "Video"
pt "Vídeo"
en "Video"
es_mx "Video"

es "Link (Youtube o Vimeo)"
pt "Link (Youtube/Vimeo)"
en "Link (Youtube or Vimeo)"
es_mx "Link (Youtube o Vimeo)"

es "Ej: https://www.youtube.com/watch?v=dptrWehSI8c"
pt "Ex: https://www.youtube.com/watch?v=dptrWehSI8c"
en "Eg: https://www.youtube.com/watch?v=dptrWehSI8c"
es_mx "Ej: https://www.youtube.com/watch?v=dptrWehSI8c"

es "Ver video"
pt "Ver vídeo"
en "Watch video"
es_mx "Ver video"

Activación

Por último podés activar el video desde el Administrador nube, en la sección de Personalizar tu diseño actual dentro de las Página de inicio: