Developer’s POV, work with the dom

Ask the community
,
1

Hello :slight_smile:
I’ve been trying Wix/EditorX from a Developer perspective and have some questions so far.

Can we work directly with the DOM for some complex interactions? (create Elements on the fly, appendChild, data-attribute, working with SVGs, etc)
Is there a way to add some custom HTML and CSS, or do we have to do everything from the editor?
I have built and saved a section that I want to reuse on other pages and order websites. The behavior (animations, toggles, etc) is controlled by Javascript. How can I save a reusable section which depends on some custom scripts? Should I use Wix Blocks instead? Or create a Velo Package?

Can please help me with this? I’m new to the Wix Ecosystem and I would also be glad to have some tips about how to get started from a Developer’s POV.

Thank you!

2

Yes you can ----> ON PREMIUM-SITES ONLY <-----
Using a CUSTOM-ELEMENT or an HTML-COMPONENT.
More operational element is the CUSTOM-ELEMENT, there you can build your own WORLD.

3

That is, I understand correctly, I have to book a premium package first so that I can interact with the DOM?

4

You can use two different types of Wix-Sites.

a) free Wix-Websites —> CUSTOMlELEMENT + HTML-COMPONENT will have boundaries

b) payed Wix-Websites —> CUSTOMlELEMENT + HTML-COMPONENT won’t have boundaries

5

I want to pass data from a collection inside my CustomElement. Basically I have a repeater, connected to a dataset. When I click in a repeater Item, i want to pass the Item informations to the customElement and render it by adding it to the dom inside the customElement. (eg. with appendChild). How can I have achieve this? I tried to use attributeChangedCallback but this seems to rerender the customElement and causing the previously added Items to disappear.
I tried:

  • call a Function inside a customElment

  • dispatch a CustomEvent wich will be handled by the Custom Element

  • access wix-data inside the customElement
    none of these worked

6

Where is your tried code?

7

Hello :slight_smile:
thanks first of all for your help, we come from LocomotiveCMS and are thinking of migrating a lot of websites to Editor-X.

Here on the website, we have already developed something like this → https://lmy.de/OSFdL

These are our first attempts / tests, we wanted to see how easy or difficult it is to import this into Editor-X.

On this website of Editor - X:
https://lmy.de/ec81y

We are currently trying the whole thing via the GitHub connection Editor X Local and Velo.

I will send a code example right away

8

We have now made a public Github under Public → SRC is then the faq example. https://lmy.de/AmypM

9

Interesting, but i do not understand Git-Hub and how it works.
I am using the normal Wix-Editor.

Maybe you can explain a little bit about your work?

  1. What do you present here?
  2. Which kind of functionality does your project offer?
  3. Which advantages does it offer?
  4. What else can be learned from your post?

I am “almost” master if it comes to VELO-CODING, but if it comes to use a REPO in GitHub → i am out :grin: (not my world). Maybe in future.

10 



class FaqChat extends HTMLElement {
    constructor() {
        super();
        this.chatContainer = this.createElementWithCLass("div", "faq-chat-container")
        const style = document.createElement("style");
        const chatHeader = this.createElementWithCLass("div", "faq-chat-header")

        const headerImage = this.createElementWithCLass("img", "faq-header-img")
        const username = this.createElementWithCLass("div", "faq-header-username")
        username.textContent = this.hasAttribute("user-name") ? this.getAttribute("user-name"): "username"

        chatHeader.appendChild(headerImage)
        chatHeader.appendChild(username)
        this.chatContainer.appendChild(chatHeader)

        const chatMsgContainer = this.createElementWithCLass("div", "faq-chat-msg-container")
        this.chatContainer.appendChild(chatMsgContainer)

        const chatFooter = this.createElementWithCLass("div", "faq-chat-footer")
        this.chatContainer.appendChild(chatFooter)

        this.appendChild(style)
        this.appendChild(this.chatContainer)
    }

    connectedCallback() {
        console.log("connected");
        this.updateStyles()

        this.addEventListener('addChatMsg', (event) => {
            console.log("hey");//this event is not being triggered
        });
        // wixData.query("FAQ").find().then(console.log).catch(console.log)
    }

    attributeChangedCallback(name, oldValue, newValue) {   
        if (name === 'in-msg') {
          this.querySelector('.faq-chat-msg-container').appendChild(this.getChatMessage(newValue, true));
        }
        if (name === 'out-msg') {
          this.querySelector('.faq-chat-msg-container').appendChild(this.getChatMessage(newValue));
        }
      }
    
      // Code for a special lifecycle function observedAttributes()
      // that checks specific attributes on the page. 
    static get observedAttributes() {
        return ['in-msg', 'out-msg'];
    }

    getChatMessage(msg, incoming = false) {
        const msgElement = this.createElementWithCLass("div", "faq-msg")
        msgElement.textContent = msg
        if (incoming) {
            msgElement.style.backgroundColor = "blue"
            msgElement.style.color = "#fff"
        } else {
            msgElement.style.backgroundColor = "green"
            msgElement.style.color = "#000"
        }
        return msgElement
    }

    updateStyles() {
        this.querySelector("style").textContent = `
            .faq-chat-container {
                height: 100%;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .faq-chat-header {
                background-color: red;
                display: flex;
                align-items: center;
                color: white;
            }
            .faq-chat-msg-container {
                flex: 2;
                align-items: center;
                color: white;
            }
            .faq-chat-footer {
                background-color: blue;
            }
        `;
    }

    createElementWithCLass(tag, style) {
        const element = document.createElement(tag)
        element.classList.add(style)
        return element
    }
}

customElements.define("faq-chat", FaqChat)

Here the code
we want to make

We would like to recreate the same element as from one of our pages.

If you look a little further down, the chat module: https://lmy.de/OSFdL

11

So you have already worked with custom elements?

Try to use the SERACH of the VELO-FORUM…

So, as i understand you want to start to work from Wix-Editors POV ???

  1. First start your editor
  2. Enable the DEV-MODE (developers-mode) inside your Wix-Editor.
    Now you have the view from developers POV.
  3. To be able to insert your wished functionality, you will have to add a CUSTOM-ELEMENT. As i can see, you already worked with custom-elements, so you will have already some experience in the usage of them and surely you will also have some HTML and CSS knowledge.

Use the SEARCH of VELO-FORUM and find related articles. There are a lot of them already. They will lead you to the right direction. A assume you are already an experienced coder → so you will find your SOLUTION.