top of page
Forum Posts
Walter Odibi
Content Creator
Mar 10, 2023
In Tips, Tutorials, Examples
Visit Wix Ideas to learn more 🎬 Welcome to Wix Ideas' Quick View with Wix Lightbox! 🎥 Get ready to take your website to the next level with this amazing feature. 🚀 In this video, I'll show you how to use the Wix Lightbox to create a quick view for your Wix website. Say you do not want to redirect your site visitors to a dynamic page, but instead, you want them to have a quick overview of the item, then this feature will be very useful. 💻 Whether you're a blogger, photographer, or e-commerce owner, this tool is perfect for showcasing your products, images, and videos in a stunning way. You'll learn how to easily add images and other Wix elements to your lightbox, customize its layout, use Wix Velo code to send data from a repeater on your page to your lightbox, and create a seamless user experience for your website visitors. 🤩 Plus, we'll give you some tips and tricks on how to optimize your lightbox for maximum engagement and conversions. 📈 So grab a cup of ☕️ and join us for this exciting tutorial! Don't forget to like and subscribe for more awesome content. 🔔 Let's get started! 🎉 Steps Add a lightbox to your site Add elements you wish to display Connect the elements to your dataset The Code Step 1: Import wix window. The wix-window module contains functionality that pertains to the current browser window. import wixWindow from 'wix-window'; Step 2: Add a page code to your repeater to get the ID of the item and send it to your lightbox $w.onReady(function () {
$w("#repeater9").onItemReady(($w, data) => {
$w("#triggerButton").onClick(() => {
wixWindow.openLightbox("lightboxName", data._id)
});
});
}); Step 3: Import wix window and wix data on your lightbox to receive data from the repeater on your page import wixWindow from 'wix-window';
import wixData from 'wix-data'; Step 4: Use the lightbox getContext() function to receive the data(ID) and use it to filter the dataset using the dataset's setFilter() function. $w.onReady(function () {
let dataID = wixWindow.lightbox.getContext();
console.log(dataID)
$w("#dataset1").setFilter(wixData.filter().eq("_id", dataID));
}); That's it! Facebook Page: https://www.facebook.com/wixideas Facebook Community Group: https://www.facebook.com/groups/wixideas Instagram: https://www.instagram.com/wixideas/ Website: https://www.wixideas.com/ YouTube Channel: https://www.youtube.com/@wixideas
1
1
28
Walter Odibi
Content Creator
Feb 09, 2023
In Getting Started
Here's a set of guidelines for your Wix forum:
Be respectful: All members of the forum should be treated with respect and courtesy. No personal attacks or hate speech will be tolerated. Stay on topic: Please keep your posts and discussions relevant to the topic at hand. If you have a question or comment that doesn't fit with the current discussion, start a new thread. Keep it clean: Please refrain from posting any offensive or inappropriate content, including but not limited to profanity, sexually explicit material, or illegal activity. Be helpful: The purpose of the forum is to help and support each other. If you have experience or knowledge that could assist someone else, feel free to share it. No spam: Spamming the forum with irrelevant or repetitive posts is not allowed. This includes posting the same message multiple times, promoting your own products or services, or posting links to external websites without permission. Report any issues: If you come across a post that violates these guidelines, please use the "Report" button to bring it to the attention of the moderators. Follow the rules: The moderators have the final say in what is and aren't acceptable on the forum. Please follow their instructions and any additional rules or guidelines that may be posted. By following these guidelines, you can help create a welcoming and productive community for everyone. Thank you for your cooperation!
1
0
13
Walter Odibi
Content Creator
Feb 09, 2023
In Getting Started
Getting started with Velo by Wix has never been easier! Whether you prefer watching videos or reading tutorials, there's a wealth of resources available to help you get up and running with Velo by Wix. First, check out our Wix Ideas YouTube channel. Here you'll find a variety of instructional videos covering everything from setting up your Velo by Wix account to designing and publishing your website. Our videos are created by experts in the field and are designed to be easy to follow, so you can get started quickly and confidently. In addition to our YouTube channel, you can also check out our blog tutorials. These tutorials are written by our in-house experts and provide step-by-step instructions for using Velo by Wix. Whether you're looking to add a new feature to your website or just want to learn more about using Velo by Wix, our blog tutorials are a great resource. So what are you waiting for? Start exploring our Velo by Wix YouTube videos and blog tutorials today and see how easy it is to create a stunning website with Velo by Wix! YouTube Tutorials Blogs Forum
1
0
22
Walter Odibi
Content Creator
Feb 09, 2023
In Tips, Tutorials, Examples
This API allows the user to copy text to their clipboard. As simple as it sounds, it is fun to know that one can have a copy button that can copy text from a text element or from text input elements. In this tutorial, you will learn how to; Add a button that copies text from text input element Disable the button after clicking it Change the button's label after clicking it Enable and return button text after one second using setTimeout() method.
MY ELEMENTS AND DESIGNS Text Input We will use this element to add the text we want to copy. Button
Copy Button We will use this button to copy the text inside our text input element. Understanding the code Here, I will explain the concept of my code and the achievement of having an interactive and user-friendly copy-to-clipboard feature on your WIX website. import wixWindow from 'wix-window'; To begin our code, we need to first import our wixWindow API import wixWindow from 'wix-window';
$w.onReady(() => {}); Next, we will need the onReady function to allow the elements and code to run before the user starts interacting with the elements. import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {});}); I then added onClick() to the "copy button" import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {let textMessage = $w("#textInput").value;});}); I assign a variable to the input value of my text input element. This variable will hold the text inside my text input and will be passed to the copyToClipboard API to be copied. NOTE: if you want to copy a text from a text element, replace this line of code let textMessage = $w("#textInput").value; with this line of code. let textMessage = $w("#textElementID").text; Moving forward... import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {let textMessage = $w("#textInput").value;
wixWindow.copyToClipboard(textMessage).then(() => {});});}); I added the actual line of code where the copyToClipboard API actually copies the text and then prompts the next action to be taken. This is explained in the next step. import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {let textMessage = $w("#textInput").value;
wixWindow.copyToClipboard(textMessage).then(() => {$w("#copyButton").disable();$w("#copyButton").label = 'Copied!';});});}); I then decided to disable my button and change its label to 'Copied!' In this case, the user will know their text has been copied. THE FUNCTION After copying my text, I want the button to be enabled and I also want the label to go back to 'Copy Text'. To achieve this, I wrote a function with a setTimeout() method that will automatically enable and change my button's label after one second. function returnToDefault() {if ($w("#copyButton").disable()) {setTimeout(function () {$w("#copyButton").enable();$w("#copyButton").label = 'Copy Text';}, 1000)}} My function is returnToDefault(); I need to insert this name into my main code at the part that commences what happens next after the text is copied. import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {let textMessage = $w("#textInput").value;
wixWindow.copyToClipboard(textMessage).then(() => {$w("#copyButton").disable();$w("#copyButton").label = 'Copied!';returnToDefault();//MY FUNCTION});});}); Now that my function is within this code, my button will automatically enable and change its label after one second. TAKE AWAY setTimeout(function(){
expression
}, 1000); In JavaScript, the setTimeout() method performs an expression after a certain millisecond. FINAL CODE import wixWindow from 'wix-window';
$w.onReady(() => {$w("#copyButton").onClick(() => {let textMessage = $w("#textInput").value;
wixWindow.copyToClipboard(textMessage).then(() => {$w("#copyButton").disable();$w("#copyButton").label = 'Copied!';returnToDefault();})})});//Add a function to enable button and change the label after 1 secondfunction returnToDefault() {if ($w("#copyButton").disable()) {setTimeout(function () {$w("#copyButton").enable();$w("#copyButton").label = 'Copy Text';}, 1000)}}
#Wix #VeloByWix
1
0
9
Walter Odibi
Content Creator
Feb 09, 2023
In Tips, Tutorials, Examples
PREVIEW LIVE SITE | https://bit.ly/3sNt3Jy Do you want to know how to filter your WIX Gallery element using WIX Selection Tags? Then this tutorial is for you. Follow me through this step-by-step process on how to; Connect WIX Gallery(Pro Gallery) element to Database collection Filter contents in your Gallery using WIX Selection Tags. If you don't want to go further with the step-by-step, here's the code which you can copy and use on your website. import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{const selectedTag = $w('#selectionTagsID').value;let filter = wixData.filter();if(selectedTag.length >0){
filter = filter.hasSome("FIELDKEY",selectedTag);}$w('#datasetID').setFilter(filter);})}); In the remaining part of this tutorial, I will go step-by-step on how to incorporate this feature in your website. To incorporate this code you only need to change few things, which are; Selection Tags ID - #selectionTagsID FIELDKEY - FIELDKEY Dataset ID - #datasetID Once you've done these, you can pretty much use the code for filtering your Table, Repeater and Gallery. STEP-BY-STEP TUTORIAL Step 1: Create a database collection and add items to it. For my database called 'Restaurant', I added the following fields; Title Image Cuisine Location Step 2: Add and Connect WIX Gallery to Data. I connected only the following fields to my Gallery: Title - Connected to gallery title Image - Connected to gallery Image Cuisine - Connected to gallery description Step 4: Add selection tags and add values from your database where you want to filter. Note: I am filtering from 'Cuisine', a field in my database. And the two values from it are 'French' and 'Italian' Then I added the values from this field to my selection tags options. My values are; French Italian THEY ARE BOTH CASE SENSITIVE WHEN ADDING THEM TO YOUR SELECTION TAGS' VALUES Step 3: Understanding The Code. 1. The first and foremost step in writing WIX code (Velo by WIX) when dealing with data from your database is importing the wixData. import wixData from'wix-data'; //Step 1 2. Next, I called an onReady function. Sets the function that runs when all the page elements have finished loading. import wixData from'wix-data';
$w.onReady(function(){ //Step 2}); 3. Since we are making use of Selection Tags, I added an onChange event that runs the piece of code within its curly brackets when the selections are changed. import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' ID //Step 3});}); This event is added inside the curly brackets of the onReady function. 4. Then, I assigned a value of the selected tag to a constant called "selectedTag" . import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' IDconst selectedTag = $w('#selectionTagsID').value;//Step 4});}); I did this because I will utilize this constant inside my code later and will save me the time of writing "$w('#selectionTagsID').value" each time I need to use it. 5. Another assignment we did is the assignment for WIX filter function. Since we will be filtering our gallery, we will need to let the code know that's what we are doing. import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' IDconst selectedTag = $w('#selectionTagsID').value;let filter = wixData.filter();//Step 5});}); 6. Now to the main part of the code. We want to let out selection tags run with the logic that when it is selected then step 5 should run with data from a specific field in out database. import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' IDconst selectedTag = $w('#selectionTagsID').value;let filter = wixData.filter();if(selectedTag.length >0){ //Step 6
filter = filter.hasSome("FIELDKEY", selectedTag);}//});}); Remember we assigned the value of the selection tags to a constant called 'selectedTag'. We may be needing that now. As you may already know, the 'if' is a conditional block that let's our code choose what to do when certain conditions are met. Now, these conditions are within its brackets as shown below; if(selectedTag.length > 0) The condition can be explained simply as, if there is a selected tag then.. 0 stands for 'It is selected' while less than 0 stands for 'it is not selected' Then what happens if the condition is met? Then we open two curly brackets and add what should happen. {
filter = filter.hasSome("FIELDKEY", selectedTag);} What should happen is the filter will occur but will find the data inside a field in our database. To find that field, we use the fieldkey of the specific field in our database. Learn more about fieldkey here.
7. Finally, we remind our 'filter' to go through our dataset in finding the data from our database. import wixData from'wix-data';
$w.onReady(function(){$w('#selectionTagsID').onChange(()=>{//Change #selectionTagsID to your selection tags' IDconst selectedTag = $w('#selectionTagsID').value;let filter = wixData.filter();if(selectedTag.length >0){
filter = filter.hasSome("FIELDKEY", selectedTag);}//$w('#datasetID').setFilter(filter);//Step 7});}); So, that's it. We pretty much covered the basics of what we have to do. To incorporate this code you only need to change few things, which are; Selection Tags ID - #selectionTagsID FIELDKEY - FIELDKEY Dataset ID - #datasetID Once you've done these, you can pretty much use the code for filtering your Table, Repeater and Gallery. Thank you for reading up to this point. If you have further questions, you can post on forum or get in contact with us.
1
0
30
Walter Odibi
Content Creator
Feb 09, 2023
In Tips, Tutorials, Examples
Using this WIX example I was able to add it as a comment section on my dynamic page. All it took to adjust the code was modifying this line of code product = await $w('#productPage1').getProduct(); to this 👇🏽 product = await $w('#dynamicDataset').getCurrentItem(); While replicating the exact format by copy/paste, including creating similar database collections, fields, and datasets, you are sure to land your first easy-to-use comment section on your dynamic page. The rest is pretty easy. You can remove the elements you don't necessarily need❌ and comment them out in the code panel. Check out the step-by-step video. 🚩MORE TUTORIALS https://www.wixgenius.com/wix-tutorials 📺Check out more videos
1
0
12
Walter Odibi
Admin
Site Owner
More actions
bottom of page