Prepare for Store Migration
Before creating your B2B Commerce on LWR storefront, ease the transition by refactoring existing components. Apply these guidelines to Aura components in B2B stores.
Before you begin, assess the component makeup of your B2B Commerce Aura storefront. From Setup, in the Quick Find box, enter Lightning Components, and then select Lightning Components. From this page you can view your Lightning web components and Aura components.
Identify Aura components and make plans to replace them with Lightning web components where possible. Lightning web components function in Aura and LWR, often with no alterations required. To map base components from Aura to Lightning web components, see Base Components: Aura Vs Lightning Web Components. For B2B store components, see LWR and Aura Store Templates(can be outdated or unavailable during release preview).
From Experience Builder, copy Aura components to a new workspace and then replace them with their Lightning web component equivalents. If an Aura component can’t be replaced, limit it to a thin, outer wrapper layer. In a tree of nested components, an Aura component can contain Lightning web components. Lightning web components can’t contain nested Aura components. This cross-compatibility means that you can migrate child components in a complex Aura component to LWC without replacing the parent Aura component. To complete your store’s migration to LWR, all Aura components must be replaced eventually.
For more information on how to replace Aura components with Lightning web components, see the Migrate from Aura to Lightning Web Components trail.
Because of differences in how Aura and Lightning web components access Salesforce data, migration involves modifications to data layers. If you consolidate data operations to outermost components, you can later replace or alter the data layer in one central component rather than throughout a component tree. This structure also makes the lower-level nested components more portable and reusable, giving you more flexibility after migration to LWR.
When possible, use a Lightning web component for these top-level data operations. But this step still makes for a smoother migration if you must use an Aura component. As mentioned, you can only use top-level Lightning web components if the rest of the nested component tree also uses LWC.
To check your store’s component trees, from Experience Builder, open the page that you want to edit, and then click the Page Structure icon.
The LWC and Aura Components programming models use events-driven programming to communicate data between components. In the Aura Components programming model, events are declared by the aura
If your store uses events in Aura components, restructure these events to function in Lightning web components. For more information, see Migrate Events.
To access Salesforce data, Lightning web components use a reactive wire service built on Lightning Data Service. When centralizing your data operations in outermost components, consider implementing this wire service. Avoid using Aura components and actions such as force
Lightning web components use @wire in their JavaScript class to read data from one of the wire adapters in the lighning/ui*Api namespace. The wire service provides an easy, low-code way to work with data that simplifies your store’s components. For example, see the adapters available in the Commerce namespace in Custom Component APIs.
If an Aura component uses custom Apex classes that you want to preserve, you can also import methods from these Apex classes into Lightning web components. For more information, see Use the Wire Service to Get Data.