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 |
| Interessados: | 4 |
| Valor Mínimo: | R$ 50,00 |
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
Criação de site de e-commerce - Criação de site de e-commerce com rolagem infinita no WordPress. Descrição do projeto: Olá, estou procurando um freelancer com experiência em WordPress e W...
Resolver problema em website - Estamos com um problema em um site nosso, https://metaideiasimobiliarias.com.br/. O mesmo aparenta estar fora do ar e com vários erros. Estamos tentando atualizar plugins para evitar conflit...
Desenvolvimento de site institucional em WordPress - Olá, estou em busca de um profissional freelancer para desenvolver um site institucional simples em WordPress. A ideia é criar um site funcional, com foco em apresentar informaç...
Plugin de delivery para loja de açaí - Olá, meus amigos! Preciso de um profissional especialista na criação de plugins que tenham a função de delivery. Esse plugin será adicionado ao meu site Wo...
Implementação de e-commerce para canal do YouTube - Implementar um site de e-commerce para produtos e serviços relacionados aos 7 chakras (playlists do canal): https://www.youtube.com/@Path4LightBrazil
