Here I'll demonstrate how to create an attractive list of recipes with individual buttons that load a pop-up lightbox with the ingredients and cooking instructions.
Follow along and see what functional lists you can create!
TIMESTAMPS
00:00 Introduction and reasons for using a lightbox pop-up.
01:04 Add a repeater
01:27 Create a database
02:20 Add fields to the database
03:10 Add items to the database manually, or
03:35 Import items through a .csv file
05:47 Add a dataset to the page and connect to the database
06:06 Make sure you’ve turned on the developer’s mode
07:08 Add ‘Next’ & ‘Previous’ buttons
07:38 Connect the repeater to the dataset
10:30 Add button inside repeater to link the lightbox pop-up
11:30 Attach and paste 1st part of the code onto the button inside of the repeater
13:24 Create a lightbox
18:12 Add the 2nd part of the code into the lightbox
18:55 Add a dataset to the lightbox
20:30 Check code field names are correct
21:10 Preview
21:36 Connect ‘Next’ & ‘Previous’ buttons
22:20 Check your database is clean
WIX CODES TO PASTE
Part 1 (attached to button inside the repeater)
export function viewMealIeadsButton_click(event, $w) {
let mealTitle = $w('#MealLabel').text
console.log(mealTitle)
wixWindow.openLightbox('Meal Ideas', mealTitle)
}
Part 2 (paste directly into the developer's console of the lightbox)
import wixData from 'wix-data';
import wixWindow from 'wix-window';
let popup = wixWindow.lightbox.getContext();
console.log('popup')
console.log(popup)
$w.onReady(function () {
$w("#mealIdeasDataset").onReady(() => {
$w("#mealIdeasDataset").setFilter(wixData.filter().eq("title", popup))
.then(() => {
let currentItem = $w('#mealIdeasDataset').getCurrentItem();
$w('#image1').src = currentItem.foodPic;
$w('#nutritionalValue').text = currentItem.nutritionalValue;
$w('#ingredients').text = currentItem.ingredients;
$w('#instructions').text = currentItem.instructions;
$w('#title').text = currentItem.title;
setTimeout(function () {
$w('#image1').show();
}, 500)
})
})
})
Make sure to check out my awesome template offer at www.getyourown.online, and feel free to check me out on LinkedIn at https://www.linkedin.com/in/doriel-alie-61263b1b1/
or email me at doriel.alie@aesticwebdesign.com
ความคิดเห็น