Vitrine de Vídeos de Produto - Slider YouTube, Vimeo e Dailymotion com lightbox, página inicial ou coluna lateral, sem jQuery

Os seus vídeos de produto a trabalhar como ferramenta de venda

Um vídeo colocado numa ficha de produto só é visto por quem já lá chegou. Este módulo põe os seus vídeos de produto onde os visitantes começam realmente a visita: a página inicial, ou uma coluna lateral presente em todas as páginas.

Cada slide usa a imagem de capa do próprio produto como miniatura e liga diretamente a esse produto. Demonstrações, unboxings e vídeos explicativos deixam de estar enterrados e passam a puxar visitantes para as fichas de produto.

Três plataformas, nenhuma chave de API

Cole um link e o módulo trata do resto. Reconhece YouTube, Vimeo e Dailymotion e, enquanto escreve, aparece um distintivo que nomeia a plataforma e lhe devolve o ID do vídeo que extraiu — assim vê que interpretou o vídeo certo antes sequer de guardar.

O YouTube é reconhecido em todas as formas comuns: watch?v=…, youtu.be/…, Shorts, live, links de incorporação e links /v/. O Vimeo funciona com links simples e também com o hash de privacidade dos vídeos não listados (vimeo.com/123456789/abcdef1234) — cole o link completo e o hash é preservado. O Dailymotion aceita os seus URL de vídeo padrão.

Não há nenhuma chave de API para obter nem nenhuma conta de programador para criar em nenhuma das três.

Uma lightbox que não manda os visitantes embora

Clicar num slide abre o vídeo numa sobreposição sem distrações, dentro do seu próprio site, para que ninguém seja encaminhado para o YouTube a meio da visita. Fecha com um clique ou com a tecla Esc, e está marcada como uma verdadeira caixa de diálogo para tecnologias de apoio. Ao fechar, o leitor é esvaziado em vez de apenas escondido, pelo que o som para mesmo em vez de continuar em segundo plano.

Os vídeos do YouTube são reproduzidos através do leitor youtube-nocookie.com, respeitador da privacidade.

Página inicial, coluna lateral, ou onde quiser no seu tema

O slider aparece por predefinição na página inicial. Para o colocar numa coluna, vá a Design → Posições, localize Product Video Showcase e transplante-o para displayLeftColumn ou displayRightColumn. Quem trabalha o tema pode ainda inseri-lo em qualquer ponto com {widget name='productvideoslider'}.

As colunas laterais mostram automaticamente um vídeo de cada vez, independentemente do número de vídeos por linha que tiver definido — uma coluna estreita não consegue mostrar quatro de forma legível.

Responsivo por lógica real, não por boa vontade

Escolhe 1 a 6 vídeos por linha em computador. O módulo reduz depois esse número automaticamente em JavaScript, medindo a largura real da janela: no máximo 2 abaixo de 576 px, 3 abaixo de 768 px, 4 abaixo de 992 px, e o número que escolheu acima disso. A sua definição é um máximo, não um número fixo.

O deslize funciona por toque nativo em telemóveis e tablets. Setas, pontos, reprodução automática, velocidade da reprodução automática e pausa ao passar o rato são todos opcionais e configuráveis, e o slider fica contido na largura de conteúdo do seu tema em vez de se estender de ponta a ponta do ecrã.

Ordem, visibilidade e uma lista que lhe diz a verdade

A lista Your product videos (os seus vídeos de produto) reordena-se com setas para cima e para baixo e permite-lhe ocultar qualquer vídeo com um clique, sem o apagar. Cada linha mostra o produto, a plataforma e o estado.

Se o produto de um vídeo for apagado mais tarde, a lista di-lo com todas as letras através de um aviso "Product deleted" (produto apagado), em vez de o deixar às escuras — e pode apontar essa linha para outro produto ou removê-la.

Nada de partido chega alguma vez à sua loja

Um slide só é apresentado quando o vídeo está ativo e o respetivo produto está ativo na loja atual. Isso é imposto na própria consulta, com uma junção ao estado do produto ao nível da loja, pelo que um produto desativado ou fora da loja simplesmente desaparece. Apagar um produto remove automaticamente os seus vídeos.

A versão 2 fechou um ponto de escrita sem autenticação

Vale a pena dizê-lo sem rodeios, porque é a verdadeira razão para atualizar.

A versão 1.x incluía um ficheiro ajax.php autónomo cuja verificação de autenticação passava sempre que era enviado um ID de produto. Qualquer visitante anónimo podia enviar por POST um ID de produto e texto arbitrário e vê-lo escrito diretamente na tabela product do núcleo. O mesmo ficheiro concatenava um valor do pedido diretamente em SQL e executava error_reporting(0), escondendo todas as falhas que provocava.

Pior ainda, o valor guardado era impresso tal e qual dentro de um href, pelo que um link construído com um pseudoprotocolo malicioso de execução de código era executado ao clique.

Esse ficheiro desapareceu. Os links passaram a ser validados e só são guardados URL do YouTube, Vimeo e Dailymotion reconhecidos, cada ação de administração corre por trás do token de empregado padrão, e as saídas são escapadas nos templates.

Já não modifica a tabela de produtos do PrestaShop

A versão 1.x executava ALTER TABLE ps_product ADD product_video_field_1 na instalação e nunca a removia — desinstalar deixava uma coluna permanente na tabela de produtos do núcleo.

A versão 2 guarda os seus dados numa tabela própria. A atualização migra todos os vídeos existentes para fora da coluna do núcleo, deteta a plataforma de cada um e depois elimina a coluna. A desinstalação também a elimina, caso tenha sobrevivido de alguma forma. Qualquer link migrado que não tenha sido reconhecido fica oculto em vez de aparecer partido, para que o possa corrigir e reativar a partir da lista.

A parte pública perdeu todas as dependências

A versão 1.x carregava jQuery 1.4.4, Fancybox e o plugin mousewheel em todas as páginas da loja, entrando em conflito com o jQuery que o seu tema já tinha. Tudo isso desapareceu. A parte pública é JavaScript e CSS nativos, sem qualquer dependência — um ficheiro pequeno de cada.

O módulo regista esses dois ficheiros apenas nas páginas onde tem efetivamente algo para mostrar. Convém saber: se usar a opção Combinar, comprimir e colocar em cache do PrestaShop, a plataforma junta os recursos de todos os módulos em pacotes partilhados, pelo que o código deste módulo viajará dentro desse pacote como o de todos os outros — é assim que o PrestaShop funciona, não é algo que um módulo possa recusar.

Duas outras coisas que a versão 1.x fazia mal estão corrigidas: a apresentação na coluna esquerda e direita que anunciava nunca chegou a ser registada, pelo que não fazia rigorosamente nada; e a lógica da página inicial pegava nos primeiros N produtos da categoria Início e só depois procurava vídeos, de modo que uma loja cujos primeiros produtos não tinham vídeo ficava com um slider vazio.

Compatibilidade

PrestaShop 1.7 a 9. A interface do próprio módulo está disponível em oito idiomas — alemão, espanhol, francês, inglês, italiano, neerlandês, polaco e turco — pelo que não é apresentada em português.

Sem overrides, sem modificação do núcleo ou do tema, sem jQuery. A desinstalação remove a tabela do módulo e as suas definições, e elimina a antiga coluna do núcleo — deixando a sua base de dados tal como estava antes da instalação.

Perguntas frequentes

Preciso de uma chave de API do YouTube, Vimeo ou Dailymotion?

Não. Cola um link de vídeo normal e o módulo reconhece a plataforma sozinho. Não há nenhuma chave para obter nem nenhuma conta de programador para criar em nenhuma das três.

Onde é que o slider pode aparecer?

Na página inicial por predefinição, na coluna esquerda ou direita transplantando-o em Design → Posições, ou em qualquer ponto do seu tema com {widget name='productvideoslider'}.

Porque é que a minha coluna lateral mostra apenas um vídeo de cada vez?

É intencional. As colunas laterais são estreitas, por isso o slider mostra aí sempre um vídeo de cada vez, independentemente da definição de vídeos por linha.

Defini seis vídeos por linha mas vejo menos.

O número por linha é um máximo, válido para computador. O módulo mede a largura real da janela em JavaScript e mostra no máximo 2 abaixo de 576 px, 3 abaixo de 768 px e 4 abaixo de 992 px.

O meu vídeo do Vimeo não arranca na lightbox.

Se for um vídeo não listado, precisa do hash de privacidade no link, como vimeo.com/123456789/abcdef1234 — cole o URL completo a partir do botão Partilhar. Um vídeo cujo proprietário desativou a incorporação não pode ser reproduzido em nenhum site.

Um link não é aceite.

Cole o URL completo a partir da barra de endereço ou do botão Partilhar. O distintivo por baixo do campo diz-lhe de imediato se o link é reconhecido, nomeia a plataforma e devolve-lhe o ID do vídeo extraído, pelo que nunca tem de guardar à sorte.

Um dos meus vídeos mostra um aviso "Product deleted".

O produto para o qual esse vídeo apontava foi removido. Edite a linha para escolher outro produto, ou apague a linha.

O slider não aparece de todo.

Só é apresentado quando existe pelo menos um vídeo ativo e o respetivo produto está ativo na loja atual. Verifique a coluna Status (estado) na lista e verifique também o estado do próprio produto.

O que acontece à coluna que a versão 1 acrescentou à minha tabela de produtos?

A atualização migra os seus vídeos para fora dela e depois elimina-a. A desinstalação elimina-a também. A sua base de dados fica tal como estava antes de o módulo alguma vez ter sido instalado.