Vídeo na página inicial

Neste tutorial, criaremos uma opção para mostrar um vídeo na home page da loja. Esta funcionalidade suporta links do YouTube e do Vimeo.


HTML

1. A primeira coisa que vamos fazer é criar a pasta home dentro da pasta snipplets e em seguida, adicionar o snipplet home-video.tpl com o seguinte 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. Nesta etapa, precisamos adicionar uma pasta SVG dentro da pasta snipplets, onde criaremos o snipplet para o ícone do botão “play” com o nome 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. Finalmente, precisamos chamar o snipplet de vídeo no template templates/home.tpl, no local que você preferir em seu layout.

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

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

Adicione estilos dentro do arquivo static/style-critical.tpl 

Se em seu design você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, mas se não for o caso, você poderá unificar o CSS dos passos 1 e 2 em um único arquivo.

{# /* // 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. Adicione os estilos dentro do arquivo static/style-async.tpl

Se em seu layout você usar um stylesheet para CSS assíncrono, precisaremos do seguinte código dentro dele, mas se esse não for o caso, você poderá unificar o CSS dos passos 1 e 2 em um único arquivo.

{# /* // 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. O JavaScript precisam ser adicionados no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos é o seguinte:

{# /* // 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 neste tutorial usamos a técnica de lazy load com o plugin Lazysizes, precisamos adicioná-lo. Para ver como fazer isso, você pode ler este pequeno artigo e continuar com este tutorial.

Configurações

No arquivo config/settings.txt, adicionaremos a caixa de seleção para ativar ou desativar o vídeo, bem como o campo para o link do YouTube ou do 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

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo 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"

Ativação

Você pode ativar o pop-up do Administrador Nuvem, na seção “Personalizar seu layout atual” em “Página inicial”: