0

I need to create an SXA component in which I need to apply a specific CSS class to each alternative div.

The component should read the item from a multi-list and then render the HTML and apply a reverse CSS class to each alternative div.

 <div class="landing-feature-card reverse">

I have currently used SXA Scriban to do it but there is a lot of duplicate code. Is there a more efficient way to implement this

{{x=1}}

{{ for i_child in (sc_followmany i_item "Landing Feature Content") }}

{{-  if x%2 == 0 -}}
 <div class="landing-feature-card reverse">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
   </div>
   <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
      <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
      <div class="landing-feature__description">
           {{ i_child.Description}}
      </div>
      <div class="landing-feature__cta">
          <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
      </div>
    </div>
  </div>
</div>
{{  else -}}
<div class="landing-feature-card">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
   </div>
   <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
      <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
      <div class="landing-feature__description">
          {{ i_child.Description}}
      </div>
      <div class="landing-feature__cta">
           <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
      </div>
    </div>
  </div>
</div>
{{  end -}}

{{x=x+1}}

{{ end }}
1
5

This is not an SXA or Scriban problem, this is a CSS problem. You can use the :nth-child() psuedo-selector to apply a style.

For example, if you want all even-numbered divs to have your .reversed css applied, then instead of having:

.landing-feature-card.reverse {
   /* some styles here */
}

you could use:

.landing-feature-card:nth-child(even) {
    /* some styles here */
}

If you wanted odd-numbered rows, use nth-child(odd), you can even put a formula in there, for example, if you wanted every 3rd row styled, use nth-child(3n+0), if you want every 3rd row but starting with the first row, nth-child(3n+1). You have a lot of options with just CSS.

Now your Scriban just becomes a simple loop:

{{ for i_child in (sc_followmany i_item "Landing Feature Content") }}
<div class="landing-feature-card">
  <div class="inner-wrapper">
    <div class="landing-feature__image">
     {{ i_child.Image}}
    </div>
    <div class="landing-feature__text">
      <p class="landing-feature__label">  {{ i_child.Featured}}</p>
       <h3 class="landing-feature__title">{{ i_child.Title}}</h3>
       <div class="landing-feature__description">
         {{ i_child.Description}}
       </div>
       <div class="landing-feature__cta">
         <a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
       </div>
    </div>
  </div>
</div>
{{ end }}

no need for complex logic, just let CSS handle it all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.