Use a Wix Context in an Editor React Component in Studio Two

An Editor React Component (ERC) can use a Wix business solution context by calling the context's React hook in its own code. A Wix business solution context is a context that a Wix business solution provides, such as the Stores Product Context. It holds the business solution's current values, such as a product's price and stock, and functions for actions, such as adding the selected product to the cart.

A business solution provides its context on some of its own pages, for each item in some of its lists, and through Data Sources. In the Studio Two editor, a Data Source is what a Wix user attaches to a page, container, or section to give the elements inside it access to a context. When a Wix user places your ERC inside one of these areas, the ERC's code can read that context's values without the Wix user binding the data in the editor. To compare this approach with editor binding, see Component Integration Patterns.

Follow the instructions below to:

1. Choose a context.
2. Use the context in your component.
3. Declare the context in the manifest.
4. Check the component in the editor.
5. Publish your site and check it.

Before you begin

Make sure that:

• The Wix business solution that provides the context is installed on your site. For the example, install Wix Stores and add at least 1 product.
• Your site project's package.json lists the business solution's package, such as @wix/stores. If it doesn't, install the package. For instructions, see Work with npm Packages.
• You have an ERC in your site project. To add one, see Add an Editor React Component Extension in Studio Two.

Step 1 | Choose a context

In Wix Business Solution Contexts, find the context that holds the values your component needs. Each context's introduction lists:

• Where the context is available: the pages, Data Sources, and list items that provide it. Your ERC can read the context only when a Wix user places it in one of these.
• The context's hook and the path to import it from, in its Usage section.
• How the context behaves in the editor, such as sample values it shows before a Wix user chooses an item.

Each context's reference pages document the properties and functions the hook returns.

For the example, use the Product Context. Its hook is useProductContext(), imported from @wix/stores/context/product. It's available on a product page, under the Product Data Source, and in each Product Item of a Product List.

Step 2 | Use the context in your component

To use the context:

1. In the Code tab, open your ERC's <component-folder>.tsx file under src/extensions/site/components/<component-folder>/.
2. Import the context's hook from the path in its Usage section.
3. Call the hook at the top level of your component, and destructure the properties and functions you need.
4. Use the values in your JSX, and call the functions from event handlers.
5. Save the file.

When a value in the context changes, the hook returns the new value and your component renders again. For example, the Product Context's pricing changes when a site visitor selects a different option.

The following component shows the price of the site visitor's current selection and an Add to Cart button:

The component still follows the rules for every ERC, such as passing id and className to its root element. For those rules, see Build an Editor React Component in Studio Two.

Step 3 | Declare the context in the manifest

Declare each context your component uses in its manifest, so the site loads the context for your component. Importing the hook doesn't add the declaration for you.

To declare the context:

1. Open <component-folder>.extension.ts.
2. In both resources.client and resources.editor, add a dependencies object with a contextDependencies array. resources.client covers the live site, and resources.editor covers the editor.
3. Add the hook's import path to the array, for example '@wix/stores/context/product'.
4. Save the file.
5. Refresh the editor's browser tab, so the editor loads the updated manifest.

For example, to declare the Product Context:

For the other fields in resources, see About the Editor React Component Manifest.

Step 4 | Check the component in the editor

Place the ERC where the context is available, and check that it shows the context's values.

To check the component:

1. Switch to the Design tab.
2. Go to an area that provides the context:

   • A business solution page: Open the page, such as a product page.

   • A Data Source: Attach the Data Source to a page, container, or section:

     1. In the Layers panel, select the page, container, or section, then choose More Actions > Connect to Data.
     2. Click Connect Source, then choose the Data Source under its business solution's name, such as Wix Stores > Product.
     3. In the floating toolbar, click Manage followed by the Data Source's name, such as Manage Product. Then, in Data Settings, choose the item the Data Source provides, such as a product in Select a product.

     For more about working with Data Sources in the editor, see Build a Data Source in Studio Two. To work in the Layers panel, see Studio Two Editor: Working with Layers. For Connect Source, see Connect to Source.

3. Ask Aria, Wix's AI assistant, to place your component inside that area. For how to work with Aria, see Working with Aria.
4. Check that the component shows the context's values. On the canvas, some contexts fill properties the item leaves empty with sample values. The context's introduction in the Wix Business Solution Contexts reference describes its behavior in the editor.
5. Click Preview, and check that the component shows real values and that its functions work.

For the example, open the product page and choose a product in the product selector at the top of the canvas. Then ask Aria to place the price display on the page, and check that it shows the price of the product you chose. In Preview, check that clicking Add to Cart adds the product to the cart.

If the component shows placeholder content instead of the context's values, check component.preview.tsx. The editor loads this file on the canvas and in Preview, and it should render your component. You can ask Aria to update it. For what the file does, see Editor React Component Extension Files and Code.

Step 5 | Publish your site and check it

When you're ready, click Publish in the Studio Two editor. Your ERC ships with the published site and reads the context wherever it's placed inside a page, Data Source, or list item that provides it.

On the live site, check that the component works the same way it did in Preview.

See also

• Wix Business Solution Contexts
• Component Integration Patterns
• About Editor React Components
• Build an Editor React Component in Studio Two
• About Data Sources