![Shopify Ajax Cart Drawer for Shopify [No APP or external library]](http://made4uo.com/cdn/shop/articles/CART_DRAWER_c923acdb-abff-4802-bff1-4eab67bad3c9.jpg?v=1754773035&width=1){kind=small}
Compatibilidade: Dawn 5.0 e versões anteriores SOMENTE
Muitos de nossos clientes têm perguntado sobre uma gaveta de carrinho Ajax para Shopify. Criar uma barra lateral é simples, mas desenvolver um carrinho que seja atualizado em tempo real sem a necessidade de atualizar a página é mais complexo. É aqui que a gaveta do carrinho Ajax entra em ação. Este recurso permite que você adicione uma gaveta de carrinho usando apenas código JavaScript puro com API Shopify Ajax e API de renderização de seção do Shopify, sem a necessidade de aplicativos ou bibliotecas externas.
Observe que esta funcionalidade já está incluída nas versões mais recentes dos temas GRATUITOS do Shopify 2.0, embora o design e a funcionalidade possam ser diferentes
Confira a loja DEMO aqui 💻. Botão de visualização rápida não incluído. Senha: made4uo
O que você está comprando:
- Mude o fundo da gaveta
- Adicionar uma nota de carrinho
- Tem a opção de abrir o carrinho sempre que o cliente acessar a URL do carrinho
- C art atualiza sem atualizar o navegador
- Você também pode gostar do recurso adicionado
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Vá para Admin store > Temas > Ações > Editar código.
2. Vá para a pasta Seções e crie uma nova seção, nomeie-a como “shopify-ajax-cart-drawer” e cole o código abaixo.
3. Na mesma pasta, Seções, encontre o header.liquid. Encontre a palavra "cart_url". Substitua o código destacado (consulte a imagem abaixo) pelo código abaixo.
4. Na mesma área, você pode ver a “notificação de carrinho”. Consulte a imagem abaixo.
5. Vá para a pasta Ativos, abra product-form.js e substitua o código pelo código abaixo.
6. Ainda na mesma pasta, Asset, encontre cart.js e substitua o código pelo código abaixo.
7. Vá para a pasta de layout e abra theme.liquid. Encontre a "barra de anúncio" e cole o código abaixo antes dela.
8. Quase pronto, só falta limpar. Precisamos excluir os arquivos da seção a seguir para remover os erros. Abra a pasta Seção e encontre "main-cart-items.liquid", abra o arquivo e clique em "excluir arquivo". O mesmo acontece com "main-cart-footer.liquid".
É isso. (",)
Copied!
2 comentários
Hi @Sanjay,
Line item properties will need to be added to the code. Regarding the selling plan, the code is derive from Dawn cart, if the original code of Dawn supports it then yes.
IS this code support extra line items property and selling plan option ?