Velo Tutorial: Working with Multi-State Boxes and Code

Visit the Velo by Wix website to onboard and continue learning.

A multi-state box contains multiple states with different content, and displays one state at a time. Each state corresponds to a specific situation or status. You need to add code to your site to define when each state is displayed. This article demonstrates how to set up your multi-state box using code from Velo.

Set Up Your Multi-State Box

To set up your multi-state box, follow this general procedure:

  1. Add a multi-state box to your page.
  2. Set up your states.
  3. Add code to define when each state will be displayed:
    1. Define a condition (for example, a site visitor clicked a button, a product is out of stock).
    2. Select your multi-state box using its ID.
    3. Apply the changeState() function with the state you want to move to.  

Example 1: Site Visitors Change the State

This example shows how to set up your multi-state box so that site visitors can switch between states by clicking a button.

We added a multi-state box to our page called myStateBox, with two states called state1 and state2. Then we added a button to each state for switching between the states.

Note You can view and change your multi-state box and state IDs in the Properties & Events panel.

State 1

Wix Editor:

Wix Studio:

  • myStateBox: ID of my multi-state box.
  • state1: ID of the current state, State 1.
  • button1: ID of button to click to move to State 2.

State 2

Wix Editor:

Wix Studio:

  • myStateBox: ID of my multi-state box.
  • state2: ID of the current state, State 2.
  • button2: ID of button to click to move to State 1.

Code

We added the following code to our page tab:

Copy

Understanding the Code

Line 2: When button1 in State 1 is clicked, do the following:
Line 3: Run the changeState() function on the myStateBox multi-state box, moving it from State 1 to State 2.
Line 5: When button2 in State 2 is clicked, do the following:
Line 6: Run the changeState() function on the myStateBox multi-state box, moving it from State 2 to State 1.

Adapt this Scenario

You can adapt this scenario to enable site visitors to:

  • Switch between a brief description and a detailed block of text.
  • Fill out a custom multi-step form.
  • Navigate what appear to be multiple tabs.

Example 2: State per Status

Note: The images in this example show the multi-state box in the Wix Editor. The multi-state box in Wix Studio functions similarly to Wix Editor, with the only difference being its appearance, as demonstated in the example above.

This example shows how to set up your multi-state box with code so that a different state is displayed depending on a particular status. The example uses Wix Store products, but you can adapt the example for other scenarios.

We added a multi-state box to our Wix Stores product page that displays a different badge depending on the product's status.

We added 3 states to our multi-state box:

  • Out of Stock
  • On Sale
  • Featured

State 1: Out of Stock

  • badgeStatebox: ID of my multi-state box.
  • outOfStock: ID of the current state. For products that are out of stock.

State 2: On Sale

  • badgeStatebox: ID of my multi-state box.
  • onSale: ID of the current state. For products that are on sale.

State 3: Featured

  • badgeStatebox: ID of my multi-state box.
  • featured: ID of the current state. For products that are not on sale or out of stock.

Code

Then we added the following code to the page tab of our product page:

Copy

Understanding the Code

Line 2: Use the wixLocationFrontend.onChange() function to check when a site visitor navigates to a new product on the product page. When the current product changes, do the following:
Line 3: Get all the information about the current product using the getProduct() function.
Lines 5-6: If the current product is not in stock, change the multi-state box's state to outOfStock to display the Out of Stock badge.
Line 8-9: If the current product's discounted price is different than the regular price, this indicates that the product is currently on sale. If the product is on sale, change the multi-state box's state to onSale to display the On Sale badge.
Lines 11-12: If the product is neither out of stock nor on sale, change the multi-state box's state to featured to display the Featured badge.
Lines 15-16: If an error occurs while getting the product information, log the error to the console.

Tip If you want some products not to display a badge at all, you could hide() the multi-state box when particular conditions are met.

Adapt this Scenario

You can adapt this scenario to:

  • Show different site content if a shopping cart is empty or full.
  • Display an error state when something goes wrong.
  • Show different site content depending on whether there's an upcoming event.
  • Display a preloader while the page is loading.

Learn More

Was this helpful?
Yes
No