shopify wishlist

Lista de desejos do Shopify

Um conjunto de arquivos usados ​​para implementar uma lista de desejos simples do cliente em uma loja Shopify.

Versão: 2.3.0 - Compatível com Loja Online 2.0

Versões anteriores:

• v2.1.0 (Loja Online 1.0)
• v2.0.0
• v1.0.0

Instalação

Para começar a usar a lista de desejos do Shopify , você deve copiar alguns dos arquivos deste repositório para o código do tema do Shopify.

Observação : esta configuração pressupõe que você tenha um snippet para exibir um cartão de produto.

Arquivos para copiar:

Arquivo de repositório	Localização do tema Shopify
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. Coloque o snippet button-wishlist.liquid dentro do snippet do cartão de produto existente ou no modelo product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • Isso permitirá que o cliente adicione/remova itens de/para sua lista de desejos
2. Substitua o snippet na seção product-card-template.liquid pelo snippet de cartão de produto existente
   • Mesmo trecho da etapa 1
   • O snippet do cartão do produto pode usar um nome de variável de produto diferente. Verifique novamente.
3. Adicione o nome da classe do elemento do cartão do produto ao objeto selectors em Wishlist.js
   • Exemplo: se o nome da classe do seu cartão de produto for .product-item , a variável selectors ficaria assim:

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Crie uma nova página no admin do Shopify:
   • Administrador > Loja Online > Páginas > Adicionar Página
   • Defina o template da nova página como page.wishlist
   • Esta página exibirá os itens salvos da lista de desejos de um cliente
5. Coloque o script em theme.liquid antes da tag de fechamento </head>
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

É isso! Ao visualizar sua loja Shopify, você verá os botões da lista de desejos dentro dos cartões de produto (provavelmente nas páginas de coleções) ou no modelo do produto. Um clique no botão da lista de desejos adicionará/removerá o item da lista de desejos do cliente e acionará um estilo ativo no botão. Depois de adicionar itens à lista de desejos, você pode visualizá-la navegando até a página criada na etapa 3.

Loja de demonstração do Shopify

Notas

• Esta lista de desejos usa Javascript e localStorage para salvar a lista de desejos do cliente em seu navegador. O localStorage não persistirá se o usuário limpar o armazenamento do navegador ou navegar no modo de navegação anônima.
• À medida que os clientes navegam pelos produtos e os adicionam à sua lista de desejos, o script definirá automaticamente todos os botões da lista de desejos para o estado ativo se o produto correspondente já estiver incluído na lista de desejos.
• Esses arquivos não vêm sem estilo ou estrutura para que você possa personalizá-los conforme necessário. O objetivo é trazer a você a funcionalidade básica de uma lista de desejos sem frescuras.
• Se estiver trabalhando em um tema não publicado, você também precisará criar novos modelos no tema publicado. O administrador do Shopify só permitirá que você atribua uma página a um modelo se o modelo existir no tema publicado.
• Se você estiver atualizando para a versão 2.0 da Loja Online, será necessário excluir a lista de desejos .liquid e os modelos de cartão de produto mais antigos.