changeState( )

Change the multi-state box's current state to a specific state.

Description

The changeState() function returns a Promise that is resolved when the multi-state box finishes moving from the current state to the state referred to by stateReference. stateReference can be a state object or a state id.

You can retrieve State objects to pass to the stateReference parameter from your multi-state box using the currentState or states properties.

Note:
If you call changeState() on a child multi-state box, it doesn't run until the parent box moves to the state where the child box is displayed.

Syntax

function changeState(stateReference: string | State): Promise<State>

changeState Parameters

NAME

TYPE

DESCRIPTION

stateReference

string | State

The state to move to. Either the id of the state or a State object from the multi-state box.

Returns

Fulfilled - The state that the multi-state box changed to. Rejected - Error message: If no argument was provided or the argument is not a string or an existing state.

Return Type:

Promise<State>

Was this helpful?

Move to a new state using an id

Copy Code

1$w("#myStatebox").changeState("state2");

Move to a new state using a State object

This example moves to the state that is stored in the state variable.

Copy Code

1$w("#myStatebox").changeState(state);
2

Move to a new state and log a message when the move is finished

Copy Code

1$w("#myStatebox").changeState("state2")
2  .then( (newState) => {
3    console.log(`Done moving to ${newState.id}`);
4  } );

Switch between 2 states

This example demonstrates how to switch back and forth between 2 states. The multi-state box has 2 states, with IDs state1 and state2. Each state has a button. When a site visitor clicks the button, the multi-state box moves to the other state.

Copy Code

1$w("#buttonState1").onClick(() => {
2  $w('#myStatebox').changeState("state2");
3} );
4
5$w("#buttonState2").onClick(() => {
6  $w('#myStatebox').changeState("state1");
7} );
8

Switch between 3 states

This example shows how to change between states in multi-state boxes using code. You can test out the code in our example template.

Copy Code

1$w.onReady(() => {
2  $w('#newYorkButton').onClick(() => {
3    $w('#statebox').changeState('newYork');
4  });
5
6  $w('#texasButton').onClick(() => {
7    $w('#statebox').changeState('texas');
8  });
9
10  $w('#californiaButton').onClick(() => {
11    $w('#statebox').changeState('california');
12  });
13});
14

State per Status

This example demonstrates how to display different product badges for products on a Wix Stores product page. When a site visitor navigates to a product, we check the product's status (out of stock, on sale) and change the state to display the appropriate badge.

Copy Code

1wixLocationFrontend.onChange(() => {
2  // Get all info on the current product
3  $w('#myProductPage').getProduct()
4    .then( (product) => {
5      if (!product.inStock) {
6        $w('#badgeStatebox').changeState("outOfStock");
7      }
8      // If the price is different than the discount price, indicating a sale
9      else if (product.price !== product.discountedPrice) {
10        $w('#badgeStatebox').changeState("onSale");
11      }
12      else {
13        $w('#badgeStatebox').changeState("checkMeOut");
14      }
15    } )
16    .catch( (error) => {
17      console.log(error);
18    } );
19} );
20