Pesquisar

Otimização de JavaScript e Liquid na Shopify para Popup Interativo com Vídeo

12/12/2024 às 18:25

Descrição do Projeto:

Atualmente, tenho implementado um código em HTML, CSS e JavaScript que adiciona uma funcionalidade de vídeo flutuante com popup na página de produto da minha loja Shopify. Essa funcionalidade permite que os usuários assistam vídeos relacionados ao produto em um formato de galeria interativa, tipo stories do Instagram.

O que o código faz:

1. Exibe um botão flutuante que abre um popup com vídeos.
2. Permite navegação entre vídeos com controles de play/pause e volume.
3. Gerencia dinamicamente o progresso dos vídeos exibidos.

Objetivo:

Otimizar o código para reduzir o impacto no tempo de carregamento da página, mantendo as funcionalidades e garantindo uma melhor experiência para o usuário.

1. Carregamento sob demanda de funções do script e dos vídeos:
• O JavaScript deve ser carregado apenas quando o usuário clicar no botão para abrir o popup.
• Vídeos devem ser carregados apenas sob demanda, também apenas quando o cliente clicar para avançar o vídeo.

2. Remoção de código redundante:
• Eliminar qualquer funcionalidade desnecessária ou duplicada no JavaScript.

3. Reduzir solicitações de rede:
• Consolidar arquivos e minimizar o número de requisições HTTP.

4. Minimização de código:
• Compactar os arquivos HTML, JavaScript e CSS relacionados à funcionalidade para reduzir o tamanho.

5. Adicionar 2 funcionalidades:
• Quando o vídeo está carregando, exibir um ícone de loading ao centro.
• Adicionar a função de rolar para o lado para passar o vídeo no mobile; no momento, está apenas com clique.

CÓDIGO ATUAL

Minha loja é na Shopify e o código atual se encontra da seguinte maneira:

HTML (floating-ball.liquid):
• Estrutura principal dos elementos estáticos, incluindo:
• Botão flutuante com um GIF como ícone.
• Popup de vídeo contendo controles de navegação, botões de volume, play/pause e barra de progresso.
• Lista de fontes de vídeo para diferentes arquivos.

CSS (floating-ball.css):
• Estilos para:
• Aparência do botão flutuante (tamanho, posição e animações).
• Popup de vídeo (posicionamento, transições e design responsivo).
• Barras de progresso e controles do player.
• Ícones SVG (dimensões e cores).

JavaScript (floating-ball.js):
• Funções principais:
• Abertura e fechamento do popup.
• Controle de reprodução de vídeos (play/pause, anterior/próximo).
• Controle de volume (mudo/ativar som).
• Atualização dinâmica da barra de progresso e do título/subtítulo do vídeo.
• Manipulação de eventos de cliques e toques (responsivo).
• Implementação de navegação pelos vídeos com setas e cliques nas laterais do vídeo.

Habilidades desejadas:

CSS HTML Javascript Shopify Shopify Templates

Arquivos anexados:

Entre ou Cadastre-se para ver os arquivos anexados.

Atividades do cliente nesse projeto:

Última visualização: 13/12/2024 às 22:46

Última interação: 13/12/2024 às 01:27

Informações adicionais

Categoria: Web, Mobile & Software
Subcategoria: Desenvolvimento Web
Orçamento: Aberto
Nível de experiência: Intermediário
Visibilidade: Público
Propostas: 4
Propostas excluídas: 1
Interessados: 4
Valor Mínimo: R$ 50,00

Cliente

Freelancer vencedor

Propostas (3)
  • Freelancer novo Promovida Aceita Aceita Rejeitada

    Submetido: | Oferta: Privado | Duração estimada: Privado

  • Freelancer novo Promovida Aceita Aceita Rejeitada

    Submetido: | Oferta: Privado | Duração estimada: Privado

  • Freelancer novo Promovida Aceita Aceita Rejeitada

    Submetido: | Oferta: Privado | Duração estimada: Privado

Nenhuma proposta foi encontrada.

Carregando...
Projetos semelhantes no 99Freelas

Implementar e-commerce de produtos personalizados na Shopify - Gostaria de implementar um site de produtos personalizados na Shopify. Seria basicamente instalar os plugins necessários e os produtos que tenho. Tenho um site gringo para usar como base.

Criação de site para advogado focado na área familiar - Preciso de um site para uma cliente minha, que é advogada. Já tenho todas as informações necessárias prontas e preciso de um valor mais em conta, pois já t...

Criação de website para marca de cosméticos - Criação de website com foco principal em design e branding. O site deve ser bonito e simples, sem a necessidade de muitas ferramentas neste primeiro momento.

Converter design de landing page do Figma para HTML - Preciso de um programador especializado em HTML para converter um design de uma landing page do Figma para código HTML com precisão. A página é simples, porém pr...

Criar página de vendas para evento presencial de advogados - Preciso de uma página de vendas para ontem. O evento presencial será em Teresina-PI. Acontecerá no dia 08/03 (sábado), de 13h30 até 19h30. O público-alvo ...

Carregando...

Carregando...

Pesquisar

FREELANCERS
PROJETOS
Ocorreu um erro inesperado. Caso o erro persista, entre em contato conosco através do e-mail suporte@99freelas.com.br.