Wix Hacks

Imagine you can build your own website using drag-drop elements. Nowadays, it’s pretty common thinking but if I say you can also do dynamic content pop in your drag-drop website with just simple steps. Then it’s a new thing huh!!??

So let’s start.

We will take Wix as your drag-drop builder.

Main Page scripts

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {
	wixData.query("products")
        .find()
        .then((results) => {
            $w(`#repeater1`).data = results.items;
        })
        .catch((err) => {
            let errorMsg = err;
        });

    $w(`#repeater1`).onItemReady(($w, itemData) => {
        // console.log(itemData);
        // $w(`#button1`).label = itemData.title;
        $w(`#button5`).onClick((event)=>{
            wixWindow.openLightbox('product-lightbox', itemData);	
        });
    });
});

Lightbox scripts

import wixWindow from 'wix-window';

$w.onReady(function () {
	let dataFromTableRow = wixWindow.lightbox.getContext();
	// console.log(dataFromTableRow.price);	
	$w('#text49').text = dataFromTableRow.name;
	$w("#text36").text = dataFromTableRow.price.toString();
	$w("#text50").html = dataFromTableRow.description.toString();	
	$w("#image4").src = dataFromTableRow.mainMedia;
});