Widget na gaveta do carrinho
A gaveta do carrinho (em inglês, cart drawer) é o painel que abre na lateral quando o cliente adiciona um produto. Em muitos temas, o cliente vai dali direto para o checkout, sem passar pela página do carrinho. Se a cotação não está na gaveta, esse cliente não vê o frete.
A gaveta pede atenção porque cada tema a monta de um jeito, e na maioria deles ela não aceita bloco de app pelo editor. Por isso o caminho é a inserção automática: a incorporação CotaFrete (automático) procura, na página, o elemento indicado por um seletor CSS e insere o widget ali.
O que é um seletor#
Seletor CSS é o nome que o tema dá a uma parte da página. A classe drawer__footer, por exemplo, marca o rodapé da gaveta em alguns temas. No campo do app, o seletor vai com o ponto na frente: .drawer__footer.
O campo Seletor de carrinho / drawer aceita vários seletores, separados por espaço, vírgula ou quebra de linha. O widget tenta um por um, na ordem, e entra no primeiro elemento encontrado. Só um widget de carrinho aparece por página.
Como o espaço separa seletores, não dá para escrever um seletor com espaço interno (do tipo .drawer .totals). Para apontar um elemento dentro de outro, use > sem espaços: .drawer>.totals.
Configurar#
- Em Widgets da lojaWidget de cotação, confirme que a incorporação está ligada: clique em Ativar no tema e salve o editor com CotaFrete (automático) ligado.
- No cartão Posicionamento, clique em Escolher posição no tema.
- No editor que abre, adicione um produto ao carrinho para abrir a gaveta. O app desenha linhas sobre os elementos possíveis.
- Clique em Adicionar CotaFrete aqui na linha do ponto desejado (por exemplo, logo acima do botão de finalizar a compra).
- Clique em Concluir na barra do seletor e volte para a aba do app. O campo Seletor de carrinho / drawer já mostra o novo valor.
O seletor de posição é a forma mais segura: ele só oferece elementos que têm um seletor único na página. Se você já sabe a classe, também pode digitá-la no campo e clicar em Salvar.
Posição e margens#
No mesmo cartão Posicionamento:
- Posição de inserção: antes do elemento, depois do elemento (padrão), dentro no início ou dentro no final. Vale para a página do produto e para o carrinho.
- Margem superior (padrão 20 px), Margem inferior (padrão 0 px) e Espaçamento interno (padrão 0 px).
Se o widget aparece colado no total ou longe demais do botão, ajuste a posição e as margens antes de trocar de seletor.
Testar#
Abra a loja numa aba nova, adicione um produto e abra a gaveta. O campo de CEP e as opções de frete devem aparecer no lugar escolhido. Adicione outro produto e consulte de novo para ver o frete do carrinho inteiro.
Se não apareceu#
Temas muito customizados usam outros nomes de classe. Para achar o seletor à mão:
- Abra a gaveta na loja.
- Clique com o botão direito no bloco de totais e escolha Inspecionar.
- Procure a classe do elemento que envolve os totais ou o botão de finalizar.
- Use essa classe no Seletor de carrinho / drawer, com o ponto na frente, e salve.
Outros motivos comuns estão em A cotação não aparece na gaveta do carrinho.
A mesma incorporação também insere a barra de frete grátis na gaveta, com seletores próprios, configurados na aba Barra de frete grátis.