[SOLVED] How to provide style for slots inside the template in sap Spartacus

How to provide style for slots inside the template in sap Spartacus

I have a new template LandingPage3Template.

layoutSlots: {
  LandingPage3Template: {
    pageFold: 'Section2B',
    slots: [
      'Section2A',
      'Section2B',
      'Section2C',
      'Section1',
      'Section3',
      'Section4',
      'Section5'
    ],
  }
}

I just wanted to give styles for the slots. Can someone help me to write a custom CSS style to align it properly?

I am using the below-mentioned code but it is not working.

%cx-page-layout {
  // my code here
  width: 10%;
}

Solution

thanks for asking at our SO channel.

The CMS page template name (i.e. "LandingPage3Template") and slots positions (i.e. "Section2A") are mapped to CSS classes in the Spartacus DOM. This means, that you can use pure CSS rules to create the layout.

Page slot position names are not necessarily unique cross all pages (i.e. "Section2A" might also be used in other page templates). But since page slots are nested inside the page template, you can create css rules for page slots that are used inside a given page template.

The following CSS rule shows how you can create a rule for "Section2A" inside "LandingPage3Template".

.LandingPage3Template .Section2A {
  width: 10%;
}

While this is valid css and scss syntax, in scss it would look like:

.LandingPage3Template {
  .Section2A {
    width: 10%;
  }
}

Please note that the percentage before a selector (i.e. %cx-page-layout) refers to a so-called placeholder selector. This is used in Spartacus for optional CSS, so that only when the placeholder selectors are used, the CSS ends up in the final CSS. You can read more about the CSS setup in Spartacus at https://sap.github.io/spartacus-docs/css-architecture/.