Otimização de JavaScript e Liquid na Shopify para Popup Interativo com Vídeo
12/12/2024 às 18:25Descrição do Projeto:
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:
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 |
Criação de landing page institucional em WordPress - Criação de landing page institucional para empresa de vistoria com menu âncora.
Integração de API e ajuste de layout em páginas WordPress - Olá, Tenho um site WordPress no nicho de saúde já pronto e funcionando. Preciso de um desenvolvedor com experiência comprovada em WordPress e, se necessário, outr...
Integração do Lovable com Stripe para pagamentos - Integrar Lovable com Stripe para pagamentos e conciliação de assinaturas. O cliente deve conseguir comprar uma assinatura no site, e a assinatura deve ser atribuída ao cliente,...
Ajustes em página Elementor - Meu site roda em WordPress com Elementor. Tenho alguns pequenos ajustes e correções que preciso fazer. Preciso de um freelancer para me auxiliar nesses ajustes. É necessá...
Site modelo WordPress para escritório de advocacia - Olá, gostaria que fosse elaborado um site que possa ser utilizado como blog para postar sobre assuntos jurídicos. Quero algo direto, com poucas abas (área de atuaç&atild...
