2

I am new to Sitecore/SXA, and I have recently joined a team as a front-end developer using these technologies.

One thing that I have noticed is that SXA adds extra unnecessary HTML tags in a lot of cases. Like if you have a content that will be rendered as a link, there's a checkbox "Is a link", but it still has a Tag that you have to choose to wrap around this link. By default it's a DIV, but if you leave it empty, it still produces a DIV with a link inside. That's the case in some other scenarios and it can mess the final HTML, with a lot of noise that adds no value or meaning to the HTML, and it makes it harder to style in a clean way. Also, when an element like an anchor tag contains other elements, these are also wrapped into a <div> (example below). This div is not necessary because the elements are already wrapped by the parent element, so it's redundant.

Any tips to improve this? Is this going to change with newer versions of SXA?

Example

Setup in Sitecore/Content/WWW/Presentation/Rendering Variants/My Component/My Variant:

Setup

There's an extra div surrounding both sections inside the link:

Produced HTML

  • Can you be more specific? Add a screenshot of how the component is set up in SXA, what is rendered and what you think should not be there? – Marek Musielak Nov 15 '18 at 10:54
  • @MarekMusielak sure, example added. Thanks! – Luis Serrano Nov 15 '18 at 11:11
1

I don't see a version of SXA which you are using. In 1.7.1 and all previous versions, there is no out of the box functionality to remove to additional DIVs. Although they are added it's not blocking you from styling anything you want there with any style you imagine - it's just a matter of proper CSS selector.

You have two options:

  • wait for SXA 1.8 which should be released soon and you will find an option there to select empty wrapping tag. This will, for example, render the only link without wrapping DIV
  • override RenderVariantField processor and change the logic which is adding wrappers. You can replace the processor with a simple config patch. But this would require from you some back-end knowledge.

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.