Wized Docs

Appearance

Reactivity ​

Responsiveness is one of the core pillars of Wized, allowing you to create web applications that feel alive and respond immediately to changes in data and user interactions.

What is reactivity? ​

In simple terms, reactivity means that your app updates automatically without the need to reload the entire page. Imagine you are viewing a list of products in an online store, and you apply a filter to show only the items on sale. In a reactive app, the list would instantly update to show only the filtered products, without you having to wait for the page to reload.

Why is reactivity important in Wized? ​

Responsiveness is essential to creating a fluid and modern user experience. By eliminating page reloads and updating only the necessary parts of the interface, Wized allows you to:

  • Improve your app’s speed and performance: Real-time updates make your website feel faster and more responsive, improving the overall user experience.
  • Create more dynamic and engaging interactions: Elements on your page can instantly change and adapt to user actions, such as clicking a button, selecting an option from a menu, or submitting a form.
  • Display up-to-date information in real time: You can integrate data from external APIs or your own backend to display up-to-date information in real time, such as product prices, notifications, or search results.

How does reactivity work in Wized? ​

Wized constantly monitors the state of your application, including the value of variables, cookies, API responses, and other relevant data. Whenever a change occurs in any of this data, Wized automatically re-evaluates all conditions associated with your element configurations. If a condition changes, Wized instantly updates the appearance or behavior of the corresponding element, without the need to reload the page.

JSON (JavaScript Object Notetion) ​

JSON is a lightweight format for exchanging data between different systems. It plays a crucial role in interoperability, allowing Wized to communicate seamlessly with various APIs and services. At Wized, JSON is widely used to represent structured data, such as the results of API requests or information stored in the database.

DOM (Document Object Model) ​

The DOM is a tree-like representation of the structure of a web page. In Wized, you can use JavaScript to interact with the DOM, which is essential for creating engaging and dynamic user interfaces. This allows you to modify page elements, add or remove content, and respond to user events in real-time.

Return ​

In Wized, the return keyword is required for every action that needs to return a value. This value can be the result of a validation, the response from an API, or any other data necessary for the action to work correctly. Proper use of return is key to the flow logic of applications in Wized. For example, if you want to change the color of an element, you must use return followed by the color you want (in hexadecimal or text).

Null ​

In JavaScript, null represents the intentional absence of any value. In Wized, you can use null to indicate that a variable or property has no value assigned.

Undefined ​

In JavaScript, undefined indicates that a variable has been declared but no value has been assigned to it. In Wized, you might encounter undefined when accessing properties of objects that don't exist or when using variables that haven't been initialized. Handling undefined appropriately also helps to prevent errors during program execution.

True and False ​

true and false are the two boolean values in JavaScript, representing truth and falsity, respectively. In Wized, you can use these values in conditionals and other logical expressions to control the execution flow of your application.

Example

Example of using boolean values in a conditional statement:

javascript
let userLoggedIn = true;

if (userLoggedIn) {
  console.log('Welcome back!');
} else {
  console.log('Please log in.');
}

If...else ​

The if...else structure is a method to implement conditional statements in JavaScript. In Wized, you can use if...else to perform different actions depending on whether a condition is met or not.

Logical Operators (&&, ||, !) ​

Logical operators are used to combine or negate boolean expressions. In Wized, you can use && (AND), || (OR), and ! (NOT) to create more complex conditions and control the flow of your logic precisely.

Example

Example of using logical operators:

javascript
let isAdmin = false;
let isUser = true;

if (isAdmin || isUser) {
  console.log('Access granted');
} else {
  console.log('Access denied');
}

Ternary Operator (? : ) ​

The ternary operator is a shorthand way of writing an if...else statement on a single line. In Wized, you can use the ternary operator to assign a value to a variable based on a condition.

Example

Example of using the ternary operator:

javascript
let age = 18;
let canVote = age >= 18 ? 'You can vote' : 'You cannot vote';

console.log(canVote);

Wized attributes ​

In your Webflow-powered website, you need to add custom HTML attributes with the wized key and the value you want (e.g., wized="my_button"). Esto permite a Wized reconocer y utilizar dicho elemento dentro del configurador.

Note: All elements on your website are visible in the Wized configurator, but only those with the wized attribute can be used to create features.

Wized-cloak ​

The wized-cloak attribute is used to hide UI elements until Wized has finished loading and rendering the page. This prevents users from seeing raw content or flashing elements while the application is initializing.

Wized-loader ​

The wized-loader attribute is used to display a loading indicator while Wized is processing an action or retrieving data from an API. This provides visual feedback to the user and improves the overall application experience.