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 |
Criar sheet responsivo em sidebar genérica - Criar um sheet dentro de uma sidebar genérica. O design está finalizado no Figma. Biblioteca: TailwindCSS Tenho assinatura do plano Plus e posso fornecer os componentes necessá...
Desenvolvimento de marketplace - Olá! Tudo bem? Estou em busca de um(a) desenvolvedor(a) para criar um site responsivo e moderno chamado “Clica Aqui”, com foco em ser um marketplace regional e vitrine digital p...
Desenvolvimento de ferramenta de processo mining - Preciso de alguém que desenvolva uma ferramenta de processo mining, usando a biblioteca em Python - PM4py. Referência de ferramenta de processo mining: Celonis, Processo Intelligence (...
Criação de site de vendas de artigos de festas - Olá, Gostaria de criar um site de vendas, totalmente editável e funcional, sem limitações de acessos e sem cobrança de comissão por parte de plataformas. P...
Automação de releases e integração com Instagram e WordPress - Descrição do projeto: Precisamos de uma solução simples, funcional e de baixo custo para automatizar: 1. O recebimento e organização de releases enviados ...
