Esse tutorial é uma tradução livre de um artigo da central de ajuda do Crocoblok, abaixo segue o texto original:
Neste tutorial, você aprenderá como criar armazenamentos de dados. Usando o módulo Data Stores, você pode criar páginas para os usuários adicionarem itens. Este guia mostra como construir essa página e como usá-la.
Páginas como “Favoritos” ou “Lista de desejos” podem melhorar suficientemente a experiência do usuário em seu site. Ao navegar pelo site, os usuários podem adicionar itens a uma loja separada e voltar a eles a qualquer momento. Quando não há necessidade de buscar novamente os objetos que você gostou anteriormente, facilita a vida dos visitantes e melhora suas impressões sobre o site. O módulo JetEngine Data Stores oferece todas as ferramentas necessárias para criar uma lista de desejos conveniente e bonita e até mostrar aos usuários quantas vezes cada item foi apreciado pelos outros.
Para este tutorial, é necessário criar duas páginas WordPress: a primeira conterá a listagem com todos os itens que os usuários podem observar e adicionar à página favorita clicando no botão “Adicionar aos Favoritos”; a segunda será a página “Favoritos” onde os usuários poderão observar os itens favoritos e removê-los da lista.
Criando um Data Store
Para começar vai no painel do jetengine, e ative a opção Data Store segue o caminho: jetEngine > jetEngine > Data Store. Ative, salve e atualize a página. com isso vai aparecer a opção Data Store no menu a esquerda.
Clique no botão data store e em seguida new store:
Vamos da uma olhada mais de perto nas funções do data store.
- Nome (name). Digite o título do seu armazenamento de dados aqui. Ele será mostrado publicamente quando você criar uma página para ele.
- Slug. Este é o nome interno da loja que pode ser utilizado por outros módulos. Não use espaços ou outros caracteres especializados – apenas letras, traços e símbolos de sublinhado.
- Store type. Aqui você pode escolher onde serão armazenados os dados salvos pelo usuário.
- Cookies – os dados são armazenados como cookies e desaparecerão após a limpeza dos dados do caixa.
- Sessão – os dados serão armazenados apenas até o usuário encerrar a sessão no servidor.
- Metadados do usuário – as informações serão armazenadas nos metadados do usuário. Esta opção está disponível apenas para usuários autorizados porque eles têm a opção de salvar metadados em seu site.
- Armazenamento Local – os dados serão armazenados no navegador local do usuário.
- IP do usuário — permite manter informações baseadas no IP do usuário, que ficam armazenadas de forma segura no banco de dados com os valores “store_id” e “store_item”;
- Tamanho máximo. Esta opção permite definir quantos itens o usuário poderá armazenar. Se o usuário salvar muitos itens, isso poderá afetar a velocidade de carregamento. Por outro lado, se o número for muito pequeno, poderá incomodar o usuário. Se você definir “0” neste campo, permitirá aos usuários armazenar um número ilimitado de itens;
- Conte itens. Se você habilitar esta função, o armazenamento de dados contará quantas vezes cada um dos itens foi adicionado ao armazenamento. Para obter detalhes sobre o uso desse recurso, veja abaixo;
- Is users store (dados do usuário). Se você deseja que os usuários possam salvar contas de outros usuários neste data store – ative esta opção;
- Store item on view (Armazene o item vistos). Quando esta alternância está habilitada, as postagens caem na loja depois que o usuário as visita. Esta função é usada para criar seções “Visualizadas recentemente”. Além disso, fique atento quando esta opção estiver habilitada e você definir um número definido no campo Tamanho máximo, funciona assim: quando um usuário adicionar um novo item e a loja ultrapassar o limite, o primeiro item será excluído, e um novo será salvo em seu lugar;
- Watch for post types É um armazenamento de tipo de conteúdo personalizado. Ative esta alternância se você criar um armazenamento para itens de tipo de conteúdo personalizado.
Quando terminar de criar o data store, clique no botão “Salvar”.
Criando o botão “Adicionar aos Favoritos”
Não importa como você mostra os itens aos usuários. Seja uma galeria estática ou uma grade de listagem alterada dinamicamente, você pode adicionar o botão “Adicionar aos Favoritos” com a ajuda do widget Dynamic Link (Elementor) ou bloco (Gutenberg).
Aviso:
Você também pode usar o widget Data Store Button em vez do Dynamic Link.
Vamos supor que você usou uma grade de listagem.
Vá para JetEngine > Listagens e escolha aquela onde deseja adicionar o botão “Adicionar aos Favoritos”. Se você o criou com a ajuda do Elementor, prossiga para editá-lo com o Elementor neste tutorial vamos usar o gutenberg. Encontre o bloco Dynamic Link e solte-o na página. Temos uma visão geral abrangente do bloco Dynamic Link, então verifique se você ainda não encontrou esse bloco. Porém, para o botão “Adicionar aos Favoritos”, você precisará de um tipo específico de link dinâmico.
Vamos dar uma olhada em seus recursos.
- Na lista suspensa ORIGEM, escolha a opção Add to store. Este tipo de link adicionará automaticamente o item que você escolheu à página Favoritos.
- Selecione o store. Se você criou vários armazenamentos de dados, poderá escolher aquele que precisa aqui.
- Adicionado para armazenar texto. Este é o texto que o usuário verá após clicar no botão “Adicionar aos Favoritos”.
- Adicionado ao URL da loja. Copie o URL da página de Favoritos recém-criada e insira-a nesta guia. Será conveniente para o usuário ter um link rápido para a página Favoritos diretamente do item que acabou de adicionar.
- Adicionado ao ícone da loja. Este ícone será colocado próximo ao valor do texto Adicionado para armazenar. Você pode escolher o ícone pronto na Biblioteca de Ícones ou fazer upload de seu próprio arquivo SVG.
Em seguida, digite o Label do link (neste caso é “Adicionar aos Favoritos”) e escolha o ícone. Faça o estilo necessário na guia Estilo de Estilo de Bloco (disponível no Editor Gutenberg se você instalou o plugin JetStyleManager) e clique no botão “Atualizar” na parte inferior do menu de personalização.
Após adicionar alguns itens aos Favoritos, você pode ir até a página e verificar se os itens escolhidos já estão lá. Agora, você provavelmente gostaria de dar aos usuários a opção de remover os itens da página Favoritos.
Criando o botão “Remover dos favoritos”
É por isso que é melhor criar uma listagem separada para a página Favoritos. Dessa forma, você pode adicionar o botão “Remover dos Favoritos” apenas para os itens que já estão adicionados aos Favoritos.
Vá para a listagem que você criou e prossiga para editá-la. Encontre o widget/bloco Dynamic Link e adicione-o à área de trabalho.
As configurações são praticamente padrão para o Dynamic Link. Basta escolher a opção Remover da loja na linha Origem e definir o Rótulo (neste caso será “Remover dos Favoritos”). Visualização do elemento:
Após algumas customizações de aparência na aba Estilo (Elementor) ou Estilo de Bloco (Gutenberg) e clique no botão “Atualizar”. Veja como ficará no front-end:
Após algumas customizações de aparência na aba Estilo (Elementor) ou Estilo de Bloco (Gutenberg) e clique no botão “Atualizar”. Veja como ficará no front-end:
Criando uma consulta de postagens por meio do JetEngine Query Builder
Vá para JetEngine > Query Builder e pressione o botão “Adicionar novo”. Dê um nome à sua nova consulta e escolha o tipo de consulta “Consulta de postagens” na seção Configurações gerais.
Se você quiser saber mais sobre o recurso Query Builder, acesse Visão geral do Query Builder. Além disso, você pode ler a visão geral do tipo de consulta de postagens do Query Builder.
Na guia Geral da seção Consulta de Postagens, selecione o nome do Tipo de Postagens para o qual o armazenamento de dados foi criado.
Abra a guia Postagem e página e clique no botão em forma de pilha de moedas próximo ao campo Postar em. Selecione a macro “Obter loja” no menu suspenso, escolha a Loja necessária e pressione o botão “Aplicar”. Em seguida, clique no botão “Adicionar/Atualizar Consulta”.
Construindo a página para o armazenamento de dados
Vá para a página “Favoritos” com o widget Listing Grid aqui.
A próxima etapa é abrir a guia Consulta Personalizada. Ative a alternância Usar consulta personalizada e escolha o nome da pós-consulta criada para o Data Store no seletor Consulta personalizada.
Como ainda não adicionei nenhum item à loja, aparece a mensagem: “Nenhum dado foi encontrado”. Esta mensagem também será mostrada no front end, então vamos ocultá-la.
Vá para a guia Visibilidade do widget da grade de listagem e defina a opção Ocultar widget se “Consulta estiver vazia”. Assim, a listagem ficará oculta caso o usuário não tenha adicionado nenhum item à página de favoritos.
Depois de terminar de personalizar e estilizar a página “Favoritos”, pressione o botão “Atualizar”.
Adicionando o contador de itens
Com a ajuda das funcionalidades Dynamic Tags e JetEngine, você pode adicionar um contador de itens à sua página de Favoritos. Mostrará automaticamente quantos objetos o usuário adicionou aos Favoritos.
Vá para o painel, encontre a página Favoritos. Pegue o bloco de Título e solte-o na Grade de listagem. Em vez de digitar o título, clique no botão Tags dinâmicas no canto superior direito da área de texto. Escolha a opção Data Stores: Store Count.
O menu suspenso possui duas seções – Configurações e Avançado. Na seção Configurações, há apenas um recurso – store. Você pode definir o armazenamento de dados aqui (o contador funcionará apenas se você optar por ativar a opção Contar postagem desse armazenamento de dados).
Na seção Avançado, você digita o texto que será mostrado Antes e Depois do contador. Além disso, você pode escrever o que mostrar ao usuário se não houver itens na loja – é o valor da barra Fallback.
Aviso:
Para criar um espaço entre o texto e o contador, use um espaçador adicional.
Depois de terminar a personalização, clique no botão “Atualizar”. Veja como fica no front-end:
Voila, agora você tem uma excelente página de Favoritos. Você também pode criar listas de desejos ou qualquer outro armazenamento de dados necessário da mesma maneira.
Gostou deste artigo? Ele faz parte de uma categoria especial chamada de traduções são tutorias que eu tive que ler e foi útil então resolvi traduzir para o português.
Agora é com você deixa um comentário do que está sachando de nosso conteúdo e indique algum tutorial grimpo para traduzirmos ou transformarmos em uma aula.
