sap-commerce-cloudspartacus-storefrontsmartedit

Content slot border not highlighted in SmartEdit


We are using the Hybris 2211 version with the Spartacus 6 storefront. We plan to use SmartEdit to easily change components such as banners without going through the back office. The problem is that when we choose Advanced or Basic Edit, it does not show the content slot border you usually see in SmartEdit slots. I checked the console tab but there are no errors. I've also included below our SmartEditFeatureModule. Am I still missing something?

Advanced Edit turned on but no content slot border in our header or categories

enter image description here

No error in our console

enter image description here

Our smart-edit-feature.module.ts file

import { NgModule } from '@angular/core';
import { CmsConfig, provideConfig } from "@spartacus/core";
import { SmartEditService } from "@spartacus/smartedit/core";
import { SmartEditConfig, SmartEditRootModule, SMART_EDIT_FEATURE } from "@spartacus/smartedit/root";

@NgModule({
  declarations: [],
  imports: [
    SmartEditRootModule
  ],
  providers: [
    provideConfig(<CmsConfig>{
      featureModules: {
        [SMART_EDIT_FEATURE]: {
          module: () =>
            import('@spartacus/smartedit').then((m) => m.SmartEditModule),
        },
      }
    }),
    provideConfig(<SmartEditConfig>{
      smartEdit: {
        storefrontPreviewRoute: 'STOREFRONT_PREVIEW_ROUTE_PLACEHOLDER',
        allowOrigin: 'ALLOWED_ORIGIN_PLACEHOLDER',
      },
    })
  ]
})
export class SmartEditFeatureModule {
  constructor(private smartEditService: SmartEditService) {
    this.smartEditService.processCmsPage();
  }
}

Solution

  • I asked one of my colleagues and she found out that I need to use SmartEditCoreModule because this is where smartEditDecorators are injected.

    import { NgModule } from '@angular/core';
    import { CmsConfig, provideConfig } from "@spartacus/core";
    import { SmartEditCoreModule, SmartEditService } from "@spartacus/smartedit/core";
    import { SmartEditConfig, SmartEditRootModule, SMART_EDIT_FEATURE } from "@spartacus/smartedit/root";
    
    @NgModule({
      declarations: [],
      imports: [
        SmartEditRootModule,
        SmartEditCoreModule
      ],
      providers: [
        provideConfig(<CmsConfig>{
          featureModules: {
            [SMART_EDIT_FEATURE]: {
              module: () =>
                import('@spartacus/smartedit').then((m) => m.SmartEditModule),
            },
          }
        }),
        provideConfig(<SmartEditConfig>{
          smartEdit: {
            storefrontPreviewRoute: 'STOREFRONT_PREVIEW_ROUTE_PLACEHOLDER',
            allowOrigin: 'ALLOWED_ORIGIN_PLACEHOLDER',
          },
        })
      ]
    })
    export class SmartEditFeatureModule { }