Migrate Your Store

After you create a store using the B2B Commerce (LWR) template, migrate your components and refactor them as necessary. If you invested in LWC, restructured data operations, and implemented wire adapters, you have minimal work to do before your new store is up and running.

Copy Aura components to a new space. Create an SFDX project and add your Aura component files. A separate project space makes it easier to refactor and change components for LWR. This step also ensures that your existing B2B Commerce Aura store is preserved throughout the migration process.
Replace Aura components with Lightning web components. This process ideally involves a small number of top-level Aura components handling data access and a few Aura-specific functionalities. Replacement LWC wrappers have the same responsibilities and can use the same LWC child components. For further instruction, see the Migrate from Aura to Lightning Web Components trail. Common changes include:
1. Shift to wire adapters for data operations. Wire adapters provide easy access to Commerce Connect REST API data. For more information, see Use the Wire Service to Get Data.
2. Convert metadata from Aura component design files to the js-meta.xml format of Lightning web components.
3. Remove references to Aura-specific libraries and components.
4. Revise nested component structure by consolidating data operations in top-level components and propagating information up component trees using events. This structure follows the data down, events up communication model of LWC.
Adjust references to the Cart page. To provide a more consistent experience, the Cart page changed from a record page in B2B Commerce Aura to a named page in LWR. As a result, you must update components using the lightning/navigation library to navigate the cart or generate links to it.

1// Go to the Cart Page
2navigate(this.navContext, {
3    type: 'comm__namedPage',
4    attributes: {
5        name: 'Current_Cart',
6    },
7});

Upgrade component branding and CSS (optional). Running atop LWR, your B2B store supports more branding and override options using CSS custom properties. Custom components can use more brand-aware values to respond to global changes automatically, and they can more easily expose new customizations. To get started, see How Branding Works in LWR Sites.
Migrate your B2B Commerce Aura store configuration. Transfer metadata from your old B2B Commerce Aura store to your new LWR store by creating a change set and applying the store configuration. To complete this step, see Migrate Your Store Configuration.
Deploy and publish your store. After you update your store’s components, deploy them from Visual Studio Code and place them in your store with Experience Builder. Before publishing your site from Experience Builder, click Preview to see how the storefront looks in a desktop browser window and on a mobile device.