Changing the Body Class with a condition

Most of the time you will render content inside the body tag. In some cases there is the need to define different body classes based on a certain condition.

It can for example be that if a page has sub pages then we want to add a body class tag for this.

This can be achieved by adding the attributes of the body tag in Fusion.

First of all we add the part called bodyTag to the currents page rendering for your document NodeType . Then inside we add the attributes.class.

Then we add a FlowQuery that checks if the current node has any children. If the condition is true then the class “has-subpages” is added to the body tag on all pages that have any children.

prototype(Vendor.Site:Page) {
    bodyTag {
        attributes.class = ${q(node).children().count() > 1 ? 'has-subpages' : ''}
    }
}

If you want to just add a body class for all pages of one document type, that's of course even simpler:

prototype(Vendor.Site:Page) {
    bodyTag {
        attributes.class = 'my-custom-class'
    }
}

First of all we add the part called bodyTag to the Fusion page object. Then inside we add the attributes.class.

Then we add a FlowQuery that checks if the current node has any children. If the condition is true then the class “has-subpages” is added to the body tag on all pages that have any children.

page {
    bodyTag {
        attributes.class = ${q(node).children().count() > 1 ? 'has-subpages' : ''}
    }
}

An other example could be that we want to check if the current page is of type Vendor.Site:SomePage.

Fusion code:

page {
    bodyTag {
        attributes.class = ${q(node).filter('[instanceof Vendor.Site:SomePage]') != '' ? 'is-page' : ''}
    }
}