spartacus-storefront

Component automatically turns invisible upon creation


Relevant issue: https://github.com/SAP/spartacus/issues/17352

When I was trying to add PDF or Video or Image component to a slot that accepts them, the component automatically turns hidden even if I have turned on "Display Component". Turning it on or off does not change this status. And those components are not showing up in the storefront.

The other components seem working normally, like Simple Banner Component and Banner Component.

What can be the cause of those, and is there a way I can fix it?


Solution

  • I acutally found the problem. Smartedit is using the SlotVisibilityService to flag the components as visible or not. This is a pure frontend logic. You can see the method that is responsible for it:

    /**
     * Function that filters the given SlotsToComponentsMap to return only those components that are hidden in the storefront.
     * @param allSlotsToComponentsMap object containing slotId - components list.
     *
     * @return allSlotsToComponentsMap object containing slotId - components list.
     */
    private filterVisibleComponents(
      allSlotsToComponentsMap: TypedMap < ICMSComponent[] >
    ): TypedMap < ICMSComponent[] > {
      Object.keys(allSlotsToComponentsMap).forEach((slotId) => {
        const jQueryComponents = this.componentHandlerService.getOriginalComponentsWithinSlot(
          slotId
        ) as any as JQuery;
        const componentsOnDOM = jQueryComponents
          .get()
          .map((component) => this.componentHandlerService.getId(component));
    
        const hiddenComponents = allSlotsToComponentsMap[slotId].filter(
          (component) => !componentsOnDOM.includes(component.uid)
        );
    
        allSlotsToComponentsMap[slotId] = hiddenComponents;
      });
    
      return allSlotsToComponentsMap;
    }
    

    As you can see the visibility is determined by looking if the component is rendered in the DOM. In my case, even though my component had no restrictions and visibility was turned on in the model, it was marked as invisible because it was not rendered in the DOM.