Get rid of empty html tags in Sitecore SXA

This blog is about how can we stop rendering of empty html tags in Sitecore SXA. Thank you Nathan Hase for your suggestion to use Rule Engine.

Issue:

We have hero component which has following rendering/html structure.

Now if you notice the Hero Headline, it has a wrapper div. So, the title will be rendered in following html structure.

Now what if there is no content in Headline field. The same structure will be rendered without Headline value.

You can see, empty h1 tag and its parent div tag. And we don’t want that.

 

Solution:
Sitecore SXA provides OOTB solution for this.

We need to update two things:

  1. The field itself i.e. Variant field.
  2. Its parent div which is wrapper/Variant Section

If you select Variant field, you can see checkbox Render if empty in Variant Details Section.

Make sure it is not checked/ticked. This means, it will not render – if it is empty (means field-name mentioned in this Variant Field is not having any value).

 

Now let’s update wrapper/variant section i.e. HeaderWrapper:

  1. Select the Variant Section item.
  2. You can see Rules section. It means that this Variant Section will be enabled only if the mentioned rule is true. Click on Edit rule.
  3. Search for field and under Fields related rule, click on “where the specific field is empty” rule.
  4. In the selected rule, click on “specific” text and enter the field name (in this context it is HeroHeadline).
  5. Now this means, if HeroHeadline field is empty, section will be enabled. But we want a rule which is completely opposite. Click on “where” and it will get converted into “except where”.

    So now, our rule is correct i.e. Enable the section except where the “HeroHeadline” field is empty.You can add multiple rules.
  6. Publish the Variant.

Now, empty h1 tag and its parent div tag will not get rendered.

That’s it.

Happy Coding đŸ™‚

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s