Como desenvolver
Antes de tudo, dê uma olhada nos temas dos nossos parceiros aqui 😉
Passo 1
Crie uma conta grátis em http://lojaintegrada.com.br.
Passo 2
Configure sua loja como se você fosse realmente vender:
Nome;
E-mail (criado exclusivamente para o tema);
Dados da loja;
Endereço;
Meio de pagamento;
Forma de envio;
Categoria;
Insira produtos testes, com descrições para que sua loja fique parecendo uma loja real
URL: é obrigatório que na URL da loja de demonstração do tema tenha a palavra DEMO.
Passo 3
Implante seu tema na plataforma, editando CSS, incluindo códigos HTML e JS, fazendo upload de imagens e principalmente personalizando o visual da loja (ferramenta da Loja Integrada para parametrizar estilos básicos da loja, como fonte, banners e cores principais).
É importante que seu tema possa se comportar da melhor forma possível, independente das escolhas que o cliente que comprou o seu tema fizer. Lembre-se que você está criando um produto que será vendido para muitos clientes, onde cada um tem uma necessidade diferente.
Veja aqui como editar HTML e CSS na Loja Integrada e como acessar a documentação!
Conhecendo o ambiente
É indicado que se conheça o ambiente da Loja Integrada e que faça as configurações básicas no painel antes de iniciar qualquer projeto: criação de categorias, produtos, páginas, configuração de meio de pagamento, entre outros.
Personalizando o tema na loja de demonstração
Para a personalização você irá inicialmente acessar o menu lateral "Personalize sua loja".
Antes de criar qualquer código é necessário que as configurações dos blocos estruturais sejam feitas para evitar conflitos futuros. Selecione as opções que melhor convém para seu projeto.
Personalização avançada
Tendo feito todas as configurações prévias, vamos à personalização.
Atualmente a personalização é feita através do editor de tema, Javascript, CSS e HTML.
O HTML e CSS são liberados apenas para lojas de planos pagos ou lojas que compraram um tema. Para liberar a sua loja de demonstração, nos envie uma solicitação através do Slack ou Suporte.
É indicado que durante a personalização tenha sempre adicionado ao menos um produto ao carrinho, como se estivesse navegando como cliente em uma loja real.
Para fazer alterações somente com CSS, acesse e clique em Editar CSS. Nesta página é possível adicionar código apenas do tipo CSS que será carregado dentro da <head> no arquivo avancado.css.
Caso somente adicionando CSS não tenha o resultado esperado será necessário trabalhar com Javascript ou HTML para alterar a estrutura da loja.
Trabalhando com Javascript
A estrutura do layout padrão pode ser alterada somente utilizando Javascript para manipular o DOM (Document Object Model). ⚙️
Acesse e clique em Incluir código HTML. Caso seja uma loja nova será exibida uma estrutura com opções para se adicionar texto em dois blocos, sendo eles Código no cabeçalho e Código no rodapé. Se for uma loja em que o modo avançado foi ativado será exibida uma lista que dá acesso aos blocos de código.
Até aqui nada novo para você que já está familiarizado com a plataforma, mas algumas dicas podem ser muito úteis antes de começar seu projeto de front.
Organize suas funções
Ao invés de ficar digitando sempre condicionais e código sem necessidade, crie uma variável que contenha suas funções para serem utilizadas sempre que precisar. Dessa forma a criação e manutenção de seu tema será mais simples.
Verifique se sua biblioteca já não foi carregada
Devido a grande quantidade de parceiros que integram ou tem widgets que podem ser utilizados no layout da Loja Integrada, algumas bibliotecas sempre são carregadas previamente, tanto pela nossa equipe quanto pelos parceiros. Um exemplo comum é o Slick Slider, que é uma galeria utilizada para criação de sliders responsivos bem conhecida pela comunidade de front-end, portanto é comum ela já ter sido carregada por algum outro parceiro. Segue um exemplo de como testar se o script desejado já foi carregado:
No exemplo acima na condição do if podemos utilizar $.slick() para verificar se essa função existe dentro da página carregada. O mesmo serve para qualquer outra biblioteca que utiliza jQuery ou não, basta que ela seja testada na condicional para verificar se a mesma existe.
Verifique se o elemento existe antes de manipulá lo
Para manipular um elemento com jQuery utilizamos sempre $(‘seletor-do-elemento’) e adicionamos as funções necessárias, seja para editar algum texto, movê-lo de posição, entre outros. Para isso sempre faça o seguinte:
No código acima você literalmente está contando quantos objetos foram selecionados. Caso a contagem seja maior que zero quer dizer que o elemento existe, então está liberado para fazer seu código. Atualmente acontecem muitos erros por motivos como esse, quebrando o Javascript da página e ocasionando erros não somente em suas funções personalizadas, mas também em alguns serviços integrados.
Elementos do sistema
Evite ao máximo remover dos objetos classes e objetos utilizados no tema padrão, como por exemplo os objetos .carrinho-interno-ajax e comprar-ajax-status. Assim como você durante a personalização, nós e outros integradores utilizam em suas ferramentas o layout padrão como base para iniciar qualquer personalização, e nesses objetos e classes padrões estão informações que são utilizadas como gatilho para executar determinadas funções dentro do layout.
No geral, faça o possível para não remover nada. Caso isso estrague seu layout de alguma maneira apenas aplique um display:none via CSS no elemento e deixe ele escondido da visão dos usuários.
Chamadas AJAX internas
A Loja Integrada trabalha com planos que possuem limites de pageviews para manter uma relação custo x benefício saudável para seus clientes, mas algumas ações de personalização podem ser desastrosas. Uma delas são as chamadas AJAX efetuadas no layout com destino à própria loja. É comum encontrar temas com produtos no dropdown do menu, algo que não iremos permitir mais caso a chamada seja feita via $.get com destino a própria loja.
No exemplo acima é comum consumir produtos de uma página de categoria, como por exemplo utilizar /camisetas para pegar o primeiro produto de uma lista e adicionar ao menu. Caso seu projeto tenha 6 categorias no menu sempre que a página for carregada serão contabilizados 7 pageviews, o que com certeza deve afetar o plano contratado do lojista em algum momento.
“Mas como fazer então?”
Caso seja uma agência, faça um sistema externo, em sua própria hospedagem e consuma dados via API da loja do cliente e use o $.get puxando informações do seu sistema externo.
“Não tenho conhecimento para algo desse tipo”
Se for extremamente necessário, faça uso de recursos do navegador para armazenar as informações, como localStorage e sessionStorage.
No exemplo acima utilizando sessionStorage podemos salvar e consultar valores sempre que necessário, isso sem utilizar nenhum recurso de servidor já que fica salvo no navegador.
Neste outro exemplo vemos um exemplo prático da utilização do sessionStorage. Primeiro fazemos um .each nas categorias principais do menu do topo e verificamos se existe algum sessionStorage utilizando i (index do loop) + _produto, algo como 1_produto na prática. Caso não exista quer dizer que o ajax não foi efetuado nesta sessão do cliente, então podemos fazer a chamada ao custo do pageview, onde iremos criar um registro com nome de 1_produto que contém os dados que precisamos para exibir o item no dropdown do menu ou fazer qualquer outra ação desejada.
Isso pode ser feito para qualquer chamada, mas lembrando que as informações ficarão salvas no navegador do cliente e não em algum banco de dados da plataforma.
Carregar somente o necessário
É bem comum carregar scripts em todas as páginas, mas caso seja algo utilizável em uma página específica é interessante cadastrar o bloco de código com o ****campo Página publicação correto.
No exemplo acima selecionamos todas as páginas para a publicação de nosso bloco de código, mas caso seja um recurso utilizado somente na página principal poderíamos ter selecionado Página Inicial - Home e economizar recursos e/ou tempo de carregamento nas outras páginas.
Caso esteja organizando todo seu código em somente um bloco e não seja possível seguir essa orientação, trabalhe com condicionais para identificar a página que está sendo navegada e depois aplique suas funções.
Para trabalhar com economia de recursos podemos também criar condicionais para dispositivos móveis. Em alguns lugares é possível que encontre algo para identificar o navegador, mas podem acontecer problemas de acordo com o dispositivo e usaremos uma regra adicional que se enquadra mais no cenário de layout responsivo.
No exemplo acima temos um código muito simples, mas que no geral funciona bem. Podemos fazer algo mais trabalhado como trabalhar com resoluções de tablet ou outros triggers
Existem várias formas de se identificar um dispositivo mobile, mas trabalhando com resolução é a que encontramos menos problemas. Fique à vontade para utilizar os mesmos valores dos media queries do Bootstrap 3 não somente no CSS, mas também no Javascript para manter uma padronização.
Utilizando try e catch
Essas declarações de Javascript podem ajudar muito a evitar problemas e até mesmo debugar funções do seu layout. É comum em personalizações que ocorra algum erro seja em funções de terceiros ou de quem está personalizando uma loja e este evento trava todos os códigos que deveriam ser carregados, gerando reclamações no chat de suporte que podem ser facilmente evitadas.
Caso queira efetuar alguma função e não tem certeza se ela pode quebrar completamente a execução dos eventos faça da seguinte maneira:
De acordo com o exemplo poderia ter qualquer maluquice dentro das chaves do try e mesmo assim o erro seria ignorado pelo navegador e os scripts seguintes seriam carregados, mas com o diferencial de que no console seria exibido NomeDaAgência - Instagram - Err Console. Dessa forma fica claro para que a equipe de suporte notifique a agência responsável pelo código e o mesmo seja tratado o quanto antes sem gerar problemas para o lojista.
Use este recurso sempre que possível e identifique os erros da melhor maneira que conseguir.
Plugins instalados por default
Sempre dê prioridade para os plugins já utilizados no tema padrão, sendo eles:
Fancybox - Popup com galeria de fotos;
FlexSlider - Slider
jQuery Cookie - Criação de cookies no navegador
Faça um cheklist técnico:
Requests excedentes com a feature de produtos no menu (usar session_storage ou local_storage)
DIV <carrinho-interno-ajax> não carrega no checkout - É importante para a aplicações de recuperação de carrinho
Plugins não carregam (por exemplo, do Instagram)
Erros no console
Erros na versão mobile
Quebras no layout (mobile e desktop)
Verificar a experiência do usuário desktop e mobile
Observações importantes:
Em caso de personalização do tema e não da plataforma, o suporte é de responsabilidade de quem alterou. O tema poderá ser atualizado e quem alterou terá que dar suporte a alteração, ou informar ao cliente que a mesma está sujeitas a alterações/melhorias por parte da agência do tema.
Quem realiza personalizações não poderá utilizar funcionalidades do tema como base para a personalização, você deve utilizar apenas elementos da plataforma que não irão ser alterados por updates de funcionalidade do tema.
Uma vez que um tema é construído em uma determinada disposição, a mesma não poderá ser alterada/atualizada.
Last updated
