Change PageTemplate style depending on the page slot in Spartacus

Question

Hi Spartacus experts,

I have created a PageTemplate called xyz via Impex, in frontend the cx-page-layout element will receive the class xyz, but how can I add additional classes to this cx-page-layout element? I use the template for 2 cases (each case uses a different cx-page-slot and it would be great to apply different CSS styles to the cx-page-layout with xyz class depending on which case is being applied.

It is important to say that the style is supposed to be applied to the PageTemplate in CSS, not the slots.

Answer 1

My solution to solve the original issue relies on CSS purely. As it is just a issue of positioning: I added display: flex so I can apply the align-items: center to the cx-page-slot called EmptyCartCenterContent, while other cx-page-slot was not affected by it.

.CartPageTemplate{
  margin: 0;
  display: flex;
  height: 100%;
  padding: map_get($spacers, 6) 0 0 0;
  max-width: none;

  .EmptyCartCenterContent {
    align-items: center;
  }
}