Search code examples
spartacus-storefront

How to replace SiteContextSlot content?

I would like to replace the language and currency selector from spartacus to one of my own and add some more content. The problem is I can't cxOutletRef the SiteContextSlot. I can't override the LanguageComponent and CurrencyComponet, and if I could, I wouldn't want to have Language - Currency but Currency - Language. So what I really need to know is how can I change the SiteContextSlot.

Thanks in advance!

Solution

  • The SiteContext slot (not 'SiteContextSlot' btw) is defined in the CMS, and it contains 2 components by default. Both are of type CMSSiteContextComponent. The CMSSiteContextComponent has a property ('context') to define the actual context.

    The context is picked up by the SiteContextSelectorComponent which delegates the logic to SiteContextComponentService. The SiteContextComponentService uses a generic approach to load a list of context in a select element.

    If you want to change the order or context selectors in the SiteContext, I recommend the following:

    • Changing the order simply by changing the order of the components inside the SiteContextSlot in the CMS
    • Drop a context; simply remove a component from SiteContextSlot
    • Add a custom context (component).

    There are different options to add a new context: - Add a new instance of the SiteContextSelectorComponent. This is fairly complex, as you need to introduce a new context in the backend (just an enum though) and extend the SiteContextComponentService so that the new context can be used. - Create your own context component to render additional context - Create your custom component to render all context (you'd replace all components inside SiteContextSlot and add your new component). - Forget about CMS at all, and as you suggested override the slot all together. This works fine with outlets actually.

    You can also mix and match the above options:

    • keep existing components in CMS (but probably reorder them)
    • use an outlet with OutletPosition where you'd have additional components.

    The below code shows you this in code

    <ng-template cxOutletRef="SiteContext" cxOutletPos="after">
  more context
</ng-template>