Add Commerce Picker Sidekick Extension

[herzog31]

Commerce Picker Sidekick Extension

• The UI is built using Adobe React Spectrum and it uses Parcel for building the project.
  
• This extension let's you browse your Adobe Commerce product catalog to easily add Commerce functionality to your documents.
• It uses the Catalog Service and Live Search GraphQL APIs from Adobe Commerce.
• You can select a block definition at the top (e.g. product carousel) and select the Commerce items you would like to have in this block. You can now copy your selection as block definition which can be pasted into your Word or Google document.

To preview the sidekick extension, please enable the "Test project configuration locally" option in your sidekick settings for the WKND project, checkout this branch and run the project via aem CLI.

Demo flow:

Screen.Recording.2023-10-27.at.15.28.54.mp4

You can also access the picker directly at https://commerce-picker--wknd--hlxsites.hlx.live/tools/picker/dist/index.html

Test URLs:

• Before: https://main--wknd--hlxsites.hlx.page/
• After: https://commerce-picker--wknd--hlxsites.hlx.live/

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-run PSI Checks

[aem-code-sync]

Page	Scores	Audits	Google
/
/tools/picker/dist/index.html

[aem-code-sync]

Page	Scores	Audits	Google
/
/tools/picker/dist/index.html

[aem-code-sync]

Page	Scores	Audits	Google
/
/tools/picker/dist/index.html