Velo Tutorial: Working with Multi-State Boxes and Code

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.

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:

1
$w.onReady(function () {
2
  $w("#button1").onClick(() => {
3
    $w('#myStateBox').changeState("state2");
4
  } );
5
  $w("#button2").onClick(() => {
6
    $w('#myStateBox').changeState("state1");
7
  } );
8
});

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

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:

1
$w.onReady( function () {
2
  wixLocationFrontend.onChange(() => {
3
    $w('#myProductPage').getProduct()
4
      .then( (product) => {
5
        if (!product.inStock) {
6
          $w('#badgeStatebox').changeState("outOfStock");
7
        }
8
        else if (product.price !== product.discountedPrice) {
9
          $w('#badgeStatebox').changeState("onSale");
10
        }
11
        else {
12
          $w('#badgeStatebox').changeState("featured");
13
        }   
14
      } )
15
      .catch( (error) => {
16
        console.log(error);
17
      } );
18
  } );
19
} );

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.

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

• $w.MultiStateBox API
• $w.State API
• About Multi-State Boxes
• Use a multi-state box to expand text with a Read More link