Smartedit Overlay is not displayed correctly / styling is missing

[felix_k1]

Hello everyone,

with the upgrade to commerce v2211 I noticed the styling for the smartedit overlay was gone. Usually, when hovering over content slots a context menu and a wrapper with a blue border appears around the content slot. After the upgrade the context menu icons & the blue border disappeared as you can see on the picture.

Spending some time on the issue I figured out that the new version introduced themes/appearances. I.e. One can choose a dark mode theme for backoffice now. When importing the essential data again the new themes were added and one can choose them in smartedit (btw loading essential data will resolve the Source must not be null error). It will give you the option to choose between three themes:

1. SAP Quartz Light
2. SAP Quartz Dark
3. SAP Morning Horizon

For me the SAP Quartz Light theme was chosen. Either I selected it manually by exploring the new feature or it was set by the import. Anyways, once I selected the Morning Horizon Theme the styling came back and everything worked fine again.

Hope this helps when migrating to the new version.

Cheers
Felix

[Wesley_SAP]

Hey there!

As per a Knowledge Article that is yet not shared, this unwanted behavior can be fixed by copying webApplicationInjector.js file from the latest patch release of SAP Commerce Cloud and replace the one in your application's asset folder: By default webApplicationInjector.js script is copied to assets folder from node_modules directory therefore to avoid file being replaced during build back to previous version might consider commenting out following part of code in angular.json of your JS application.

• {

  "glob": "**/*",

  "input": "./node_modules/@spartacus/smartedit/assets",

  "output": "assets/"

  }

Kind regards,
Wesley
SAP Commerce Cloud Product Support - Brasil