Velo Example: Coding Based on the Custom Element Template
3 min
In this article
- Access the Template to Copy Its Code
- The Code
- Understanding the Code
When you host your custom elements with Velo, a sample Public\custom-elements\wix-default-custom-element.js file is provided. You can use this JavaScript file as a basis for coding your own elements.
This article assumes here you know a bit about designing elements with CSS properties in Javascript and working with web components.
Access the Template to Copy Its Code
You can copy the sample code:
- In the Editor, click the custom element's Settings.
- Paste the Server URL into a new browser tab.
- Copy and paste the code in your own JavaScript file.
- Make changes as necessary.
Alternatively, copy the sample code from this article below.
The Code
When copying the following code sample for your own use, substitute variable, element, and class names and values as necessary.
1// To debug this code, open wixDefaultCustomElement.js in Developer Tools.
2
3const IMAGE_URL = 'http://wix.to/vUBXBKU';
4const H2_TEXT = 'This is a Custom Element';
5const H3_1_TEXT = 'View its code by clicking the Settings button and pasting the Server URL into a new browser tab.';
6const H3_2_TEXT = 'Explore this code and use it as a reference to create your own element.';
7const DEBUG_TEXT = 'Loading the code for Custom Element \'wix-default-custom-element\'. To debug this code, open wixDefaultCustomElement.js in Developer Tools.';
8
9const createImage = () => {
10 const imageElement = document.createElement('img');
11 imageElement.src = IMAGE_URL;
12 imageElement.id = 'wdce-image';
13 return imageElement;
14};
15
16const createH2 = () => {
17 const h2Element = document.createElement('h2');
18 h2Element.textContent = H2_TEXT;
19 h2Element.id = 'wdce-h2';
20 return h2Element;
21};
22
23const createH3 = (id, text) => {
24 const h3Element = document.createElement('h3');
25 h3Element.id = id;
26 h3Element.textContent = text;
27 return h3Element;
28};
29
30const createTextContainer = () => {
31 const textContainer = document.createElement('div');
32 textContainer.id = 'wdce-text-container';
33 textContainer.appendChild(createH2());
34 textContainer.appendChild(createH3('wdce-h3-1', H3_1_TEXT));
35 textContainer.appendChild(createH3('wdce-h3-2', H3_2_TEXT));
36 return textContainer;
37};
38
39const createImageContainer = () => {
40 const imageContainer = document.createElement('div');
41 imageContainer.id = 'wdce-image-container';
42 imageContainer.appendChild(createImage());
43 return imageContainer;
44};
45
46const createStyle = () => {
47 const styleElement = document.createElement('style');
48 styleElement.innerHTML = `
49 wix-default-custom-element {
50 background-color: #f0f4f7;
51 display: flex;
52 height: 100%;
53 width: 100%;
54 }
55
56 #wdce-image-container {
57 width: 35%;
58 max-width: 165px;
59 display: flex;
60 margin: 0 20px 0 30px;
61 overflow: hidden;
62 }
63
64 #wdce-image {
65 width: 100%;
66 min-width: 100px;
67 }
68
69 #wdce-text-container {
70 display: flex;
71 flex-direction: column;
72 width: 65%;
73 justify-content: center;
74 max-width: 314px;
75 min-width: 200px;
76 }
77
78 #wdce-h2 {
79 font-family: Helvetica Neue;
80 font-size: 16px;
81 font-weight: 500;
82 letter-spacing: 0.89px;
83 color: #32536a;
84 margin: 0 0 16px 0;
85 }
86
87 #wdce-h3-1, #wdce-h3-2 {
88 font-family: Helvetica Neue;
89 font-size: 14px;
90 font-weight: 300;
91 line-height: 1.43;
92 color: #162d3d;
93 margin: 0 0 8px 0;
94 }
95 `;
96 return styleElement;
97};
98
99class WixDefaultCustomElement extends HTMLElement {
100 constructor() {
101 super();
102 console.log(DEBUG_TEXT);
103 }
104
105 connectedCallback() {
106 this.appendChild(createStyle());
107 this.appendChild(createImageContainer());
108 this.appendChild(createTextContainer());
109 }
110}
111customElements.define('wix-default-custom-element', WixDefaultCustomElement);
112Understanding the Code
Because this article assumes you know about designing elements with CSS properties in Javascript and working with web components, we will provide here just a high-level overview of the sample code to get you started. See other MDN resources for more info.
- Lines 1-6: Text to display in the custom element on the page. You can modify these lines as you like.
- Line 7: A tooltip to display in the console that tells you where to look to debug problems.
- Lines 9-98: Defines a style, an image, and text.
- Lines 99-110: Class definition for the custom element. Use the
connectedCallback()lifecycle function to create the style, image, and text on the page when the element can connect to the page. - Line 111: Register the custom element. The tag name in this example is
wix-default-custom-element. Enter this tag name in Settings when adding the custom element to the page in the Editor.
Hire a Velo Web DeveloperNeed a little extra help with your site? Hire a developer from the Wix Marketplace to build and deploy advanced web applications.
