Velo API Limitations on Editor X

Ask the community
, ,
1

I recently started using Velo Editor X after working with Joomla. As I was exploring the platform and reading posts on Wix’s website to learn more about website design, I encountered some challenges. I noticed that many of the code snippets provided on the website are not compatible with Editor X, particularly when it comes to styling elements dynamically using $w(‘#ElementID’).style due to API limitations

I am considering subscribing to Editor X, but I am concerned that I may not be able to style elements of my website dynamically or based on a database collection. Can you provide any suggestions or guidance to help me overcome these limitations

2

Can you show an example?

Editor-X is a new EDITOR, which is still growing and upgrading.
Sometime ago there were no such functions like a → MULTISTATE-BOX ← for example available in Editor-X. But this has been resolved for example, by adding this feature to editor-X.

Also i do not know, that Editor-X has restrictions, compared with normal Editor?

Do you have an example ?

3

Thank you for reaching out.

I were following a Wix blog on adding additional data to your blog/post page and encountered difficulty in finding the code property mentioned in the blog. The blog, which can be found at the following link:

" Custom Post Page | Velo by Wix Examples | Wix.com "

focuses on how to change the styles of elements dynamically using code, such as changing text colors or backgrounds by using “$W(ElementID).style” or “$W(ElementID).background-color.”
Unfortunately, this code property is only available in the Wix Editor, and not in Editor X. In Editor X, you can find a link to the API reference for each element, but it has a limited number of properties.
As a result, most of the Wix blogs explaining how to use Velo codes are not applicable for Editor X.

2860×688 123 KB

4

Please next time —> NO PICS for showing CODES!!!

Always use → CODE-BLOCKS!
No need to loose time, just for retyping all your code from a pic.

It is strange that your code do not show any errors, since you are NOT using …
—> $w <—

…instead in all of your code you have —> $ <—

When taking a look onto the API-REFERENCE, you will recognice the difference.

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Trying to do the same like you…

Immediately i get an ERROR!

“$” is not the same like —> “$W”

5

:joy: actually the screenshot just shows part of the code, and I didn’t mean to show codes by adding this screenshot. I meant to show the link of the API references which is limited on Editor X !!

My code doesn’t show errors because it is right and working, below is the complete code for your reference

import wixData from 'wix-data';
import wixLocation from 'wix-location';

let currentPost;
let $whiteLogo = $w("#whiteLogo");
let $whiteMenu = $w('#whiteMenu');
let $whiteBurger = $w('#whiteBurger');
let $blackLogo = $w('#blackLogo');
let $blackMenu = $w('#blackMenu');
let $blackBurger = $w('#blackBurger');

$w.onReady(function () {
    wixLocation.onChange((location) => {
        initPage();
    });

    initPage();
});

async function initPage() {
    $w('#dynamicDataset').onReady(async () => {
        const postData = await $w('#dynamicDataset').getCurrentItem();
        currentPost = await loadExtraPostData(postData);
        assignPostDataToUIElements();
    });
}

async function loadExtraPostData(postData) {
    const postDataFromCollection = await wixData.query('PostExtraData')
        .eq('post', postData._id)
        .find();

    const extraData = postDataFromCollection.items[0];
    return mergePostData(postData, extraData);
}

function mergePostData(post, extraData) {
    return Object.assign({}, post, extraData);
}

function assignPostDataToUIElements() {

    let headBackgroundColor = currentPost.color;

    $w('#box2').style.backgroundColor = headBackgroundColor;

    if (currentPost.whiteHeader) {
        $whiteLogo.show();
        $blackLogo.hide();
        
        $whiteMenu.show();
        $blackMenu.hide();

        $whiteBurger.show();
        $blackBurger.hide();

    } else {
        $whiteLogo.hide();
        $blackLogo.show();

        $whiteMenu.hide();
        $blackMenu.show();

        $whiteBurger.hide();   
        $blackBurger.show();
    
    }
}

On the same page (Post) I want the assigned text and title element color to change dynamically with the bost

Please check the below link for the blogs page and check how each blog header and background, even the logo and menu color on the header change dynamically for a better understanding