How to replace SiteContextSlot content?

Question

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!

Answer 1

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>

Answer 2

You can overwrite this CMS component using cmsComponents config of Spartacus. See docs https://sap.github.io/spartacus-docs/customizing-cms-components/#page-title

The component name to use in the cms mapping config is LanguageCurrencyComponent (or CMSSiteContextComponent depending on your actual CMS data).