Using Page Composer in React Store

To use Page Composer for React Stores, you must modify the database in order to use the data from Aurora Stores in React Sores. Here, the example of AuroraB2B store ID is taken in reference to the Sapphire React Stores.

Procedure

Update the STORECONF table, so that the values of AuroraB2BStoreFrontAssetStore matches the values of SapphireSAS parameter.

Note: The Sapphire Store uses ExtendedSiteCatalogAssetStore as the default parameter.

Run the following query:
```
SELECT * FROM STORECONF WHERE STOREENT_ID IN (12,13001);
```
Note: Here SapphireSAS ID is 13001 and Sapphire ID is 12.
Run the following query:
```
SELECT * FROM STORECONF WHERE STOREENT_ID IN (2,11501);
```
Note: Here the AuroraB2BStoreFrontAssetStore is 11501 and AuroraB2BESite ID is 2.
Compare the data between AuroraB2B, Sapphire, and SapphireSAS.

Add the missing data for AuroraB2B store by using the following commands:

INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (11501,'headlessStore','true',1);
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (11501,'headlessStore.storeContextRoot','/Sapphire',1);
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (2,'wc.price.variant','enabled',1);
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (2,'wc.search.priceMode.compatiblePriceIndex',0,2) ;
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (2,'headlessStore','true',1) ;
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (11501,'hcl.pageLayoutTool.enabled','true',1) ;
INSERT INTO STORECONF (STOREENT_ID ,NAME ,VALUE ,OPTCOUNTER ) VALUES (11501,'hcl.imagePath','/hclstore',1) ;

Run the following command to delete values from the PLWIDGETDEF table that have PLWIDGETDEF_ID values greater than -8000, to enable the headless store widgets:
```
DELETE FROM PLWIDGETDEF WHERE PLWIDGETDEF_ID > -8000 ;
```
Note: The value of PLWIDGETDEF_ID for the latest Page Composer is less than or equal to -8000.
Delete PageLayouts for AuroraB2BStoreFrontAssetStore to remove the previous layouts.
```
DELETE FROM PAGELAYOUT p WHERE STOREENT_ID = 11501;
```

Delete EMSPOT for AuroraB2bStoreFrontAssetStore:

DELETE FROM EMSPOT WHERE STOREENT_ID IN (11501) AND USAGETYPE IN ('LAYOUTMARKETINGSPOT');

Run the following query to add React Store widgets for AuroraB2BStoreFrontAssetStore:

INSERT INTO PLSTOREWIDGET (PLSTOREWIDGET_ID ,STOREENT_ID,PLWIDGETDEF_ID,STATE ,DEFINITIONXML ,OPTCOUNTER ) VALUES
(3001,11501,-8000,1,NULL,1),
(3002,11501,-8001,1,NULL,1),
(3003,11501,-8002,1,NULL,1),
(3004,11501,-8003,1,NULL,1),
(3005,11501,-8004,1,NULL,1),
(3006,11501,-8500,1,NULL,1),
(3007,11501,-8501,1,NULL,1),
(3008,11501,-8502,1,NULL,1),
(3009,11501,-8503,1,NULL,1),
(3010,11501,-8504,1,NULL,1),
(3011,11501,-8505,1,NULL,1),
(3012,11501,-8506,1,NULL,1),
(3013,11501,-8507,1,NULL,1),
(3014,11501,-8508,1,NULL,1),
(3015,11501,-8509,1,NULL,1),
(3016,11501,-8510,1,NULL,1),
(3017,11501,-8511,1,NULL,1),
(3018,11501,-8512,1,NULL,1),
(3019,11501,-8513,1,NULL,1),
(3020,11501,-8005,1,NULL,1),
(3021,11501,-8006,1,NULL,1),
(3022,11501,-8007,1,NULL,1),
(3023,11501,-8008,1,NULL,1),
(3024,11501,-8514,1,NULL,1),
(3025,11501,-8515,1,NULL,1);

Copy the images from the Aurora based store to the react Store-Web folder.
Perform indexing. Refer to Building the Elasticsearch index for more details.
Restart the servers.