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.

Authorization

Request

This endpoint does not take any parameters

Response Object

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.

Returns an empty object.

Status/Error Codes

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