Criando página com posts favoritos via Data Store

Vá para o painel de controle do administrador, vá para JetEngine > JetEngine > Data Stores e clique no botão “ New Store ”.

Vamos dar uma olhada mais de perto nas características de uma loja:

• Nome . Digite o título do seu armazenamento de dados aqui. Ele será mostrado publicamente quando você criar uma página para ele.
• Lesma . 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.
• Tipo de loja . 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.
• 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;
• Contar 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;
• Os usuários armazenam arquivos . Se você deseja que os usuários possam salvar contas de outros usuários nesta loja – ative esta opção;
• Armazene o item à vista . 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;
• É 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 a loja, clique no botão “ Salvar ”.

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).

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. Encontre o widget Dynamic Link e solte-o na página. Temos uma visão geral abrangente do widget Dynamic Link , então verifique se você ainda não encontrou esse widget. 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 Fonte , escolha a opção Adicionar à loja . Este tipo de link adicionará automaticamente o item escolhido à página Favoritos.
• Selecione loja . 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.

Se você criou o modelo de listagem por meio do Editor Gutenberg, abra-o na janela de edição do WP. Pressione o botão “ Adicionar bloco ” e encontre o bloco Dynamic Link . Clique nele para adicioná-lo à listagem. Digite o slug do armazenamento de dados na barra Definir slug do armazenamento . Se desejar que o link leve o usuário à página Favoritos, você poderá digitar o rótulo do link no texto do link Adicionado à loja e o URL para URL do link Adicionado à loja . Nesse caso, após o usuário clicar no botão “ Adicionar aos favoritos ”, o link se transformará para poder levar o usuário à página do armazenamento de dados.

” alt=”adicionar link dinâmico à loja” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2020/06/add-to-store-dynamic-link-1.png” />Em seguida, digite o Label do link (neste caso é “Adicionar aos Favoritos”) e escolha o ícone. Faça o estilo necessário na aba 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.

É 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:

Visão de Gutenberg:

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:

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” .

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” .

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. Esta funcionalidade pode ser usada apenas no construtor de páginas Elementor.

Vá para o painel, encontre a página Favoritos e opte por editá-la com Elementor. Pegue o widget 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 – Loja . 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 .

Depois de terminar a personalização, clique no botão “ Atualizar ”. Veja como fica no front-end:

Além de mostrar o contador do número do item na loja, você também pode mostrar o contador de quantas vezes um determinado item foi adicionado às lojas do usuário. É possível colocar esses dados na Página Única ou na grade de itens. Você poderá fazer isso apenas no construtor de páginas Elementor, ele não está disponível no Gutenberg. Vamos supor que você gostaria de mostrá-lo na grade.

Vá até a listagem que você está mostrando na grade e opte por editá-la com Elementor. Escolha o widget Título e coloque-o na listagem. Quanto ao contador de itens, em vez de digitar Title , clique no botão Dynamic Tags e escolha a opção Data Stores: Post Count .

As configurações da tag são as mesmas do contador de itens. A única diferença é o recurso de ID de postagem específico . Se você colocar um ID de um único item lá, o contador mostrará quantas vezes aquela postagem específica foi adicionada ao Data Store.

Veja como ficará na frente: