Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Vídeo na página inicial

Este tutorial te ensinará a subir um vídeo do YouTube ou Vimeo na página inicial da sua loja. É possível gerenciá-lo na seção "Layout > Personalizar layout", dentro do painel de administração.

1. Dentro de home.tpl, você deverá inserir o seguinte código (dependendo do modelo de layout ou layout personalizado que estiver utilizando). Para o caso em que o BS3 é usado, deve-se adicionar o seguinte:

{% if settings.video_embed %}
    <div class="container video-wrapper">
        <div class="row">
            <div class="col-sm-12">
                <div class="js-video-home embed-responsive embed-responsive-16by9">
                    <div class="js-play-button player-container">
                        <div class="btn btn-primary"><i class="fa fa-lg fa-play play-icon"></i></div>
                    </div>
                    <div class="js-video-image">
                        <img src="" class="lazyload js-lazy-loading">
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

2. Adicione o seguinte código JS no layout.tpl

{% if template == 'home' and settings.video_embed %}
<script type="text/javascript">
    LS.ready.then(function(){
        $(document).ready(function(){
                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('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.accent_brand_color | 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('src', thumbSplit[0] + '1280x720' + thumbSplit[1]);
                    });
                }
        });
    });
</script>
{% endif %}

3. Adicione os estilos CSS (Dependendo do modelo de layout ou layout personalizado que estiver utilizando). Deve-se inserir o seguinte em styles.scss.tpl:

{# /* Embed 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;
  }
  .player-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    cursor: pointer;
    .btn-primary {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70px;
      height: 50px;
      margin-top: -25px;
      margin-left: -35px;
      padding: 0;
      line-height: 50px;
      text-align: center;
      .play-icon {
        margin-bottom: 2px;
        margin-left: 3px;
        vertical-align: middle;
      }
    }
  }
}

4. Inclua o seguinte código em settings.txt:

Inicio | Video
    meta
        icon = play
        advanced = true
    i18n_input
        name = video_embed
        description = Link (Youtube o Vimeo)
    description
        description = Ej: https://www.youtube.com/watch?v=dptrWehSI8c

5. Adicione as traduções em translations.txt:

es "Inicio | Video"
pt "Início | Video"
en "Home | Video"


es "Link (Youtube o Vimeo)"
pt "Link (Youtube/Vimeo)"
en "Link (Youtube or 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"