Olá, pessoal! O meu questionamento vai ser algo simples mas o meu conhecimento com javascript ainda não é muito bom. rsrs
Criei 3 páginas dinâmicas para tipos de projetos diferentes, exemplo: Projetos A, Projetos B e Projetos C, cada um com seus devidos conteúdos que vou denominar aqui como "posts". Os posts destes projetos tem os mesmos campos, exemplo: Título, capa (img), descrição curta, descrição longa, botão com links...
Logo depois criei uma janela para editar as informações do post do Projeto A, ao clicar em um botão dentro da página do post sou redirecionado para essa janela de edição. Até aí tudo certinho.
Print post (conteúdo) do Projeto A.
Ao clicar em alterar é enviado o id do conteúdo para a janela de edição.
O que fiz até aí foi criar os campos para edição e linkar ao dataset do Projeto A que permite Ler e Escrever. E através do Velo fiz com que os campos fizessem um update das informações que já existiam.
Print da janela de edição do Projeto A.
O que gostaria de fazer é utilizar essa mesma janela de edição para todos os Projetos (páginas dinâmicas) sem precisar duplicar a janela para cada projeto.
Alguma forma de selecionar o dataset através de código, buscando essa informação da página que foi selecionada para edição.
Desculpem pelo textão rsrs
Olá, Kaique. Seja bem-vindo!
Para cumprir essa missão será necessário usar o getContext que passa os dados da página dinâmica para a Lightbox. Aqui está um exemplo de tudo o que vou explicar abaixo.
A seguir explico o meu método para obter o resultado.
1 - Ao clicar no botão de editar nas páginas dinâmicas, eu crio um objeto com os dados do item atual, um objeto com o id do banco de dados atual e envio eles via getContext quando abro a Lightbox. O código ficaria mais ou menos assim:
import wixWindow from 'wix-window'; $w.onReady(function () { $w("#dynamicDataset").onReady(() => { $w("#dynamicDataset").refresh() .then(() => { console.log("Done refreshing the dataset"); }); }); }); export function iconButton1_click(event) { let itemObj = $w("#dynamicDataset").getCurrentItem(); let databaseName = "grupoB" // id do banco de dados wixWindow.openLightbox("Edit item", { itemObj, databaseName }) .then((data) => { $w("#dynamicDataset").refresh(); }); }
O código deve ser basicamente o mesmo para todas as páginas, exceto pelo id do banco de dados.
2 - Ao abrir a Lightbox, no código da mesma eu recebo os parâmetros e defino os valores recebidos nos inputs que tenho nela. Ao clicar no botão de salvar eu defino um objeto com os novos dados do item + ID do mesmo e chamo o wixData.update para atualizar o banco. O código ficaria mais ou menos assim:
import wixWindow from 'wix-window'; import wixData from 'wix-data'; import wixLocation from 'wix-location'; $w.onReady(function () { let receivedData = wixWindow.lightbox.getContext(); $w("#input1").value = receivedData.itemObj.title; $w("#button2").onClick((Event) => { let toUpdate = { "_id": receivedData.itemObj._id, "title": $w('#input1').value, }; console.log(toUpdate); wixData.update(receivedData.databaseName, toUpdate) .then((results) => { let item = results; //see item below }) .catch((err) => { let errorMsg = err; }); }); });
Pronto, está feito. Basta replicar o código da página dinâmica em todas as páginas dinâmicas que forem necessárias.
Observações:
- O parâmetro da URL das páginas provavelmente deve ser o ID ou outro campo específico, não o título ou outros campos que serão editados por usuários, para não gerar conflitos na atualização dos dados.
- Os campos dos bancos devem ser o mesmo pois o Objeto que abriga os dados será apenas 1 no código da Lightbox.
Espero ter ajudado ;)