• Not Answered

JSS - Cookies script in Header - to be editable

Hi All !

Hope you're doing good.

Sending a message in a bottle.

We are looking for a solution to make a script editable in the Content Editor, such a script has to be loaded at first in the header for Cookies consent banner.

Any hints & tips ?

 

Thanks !

 

Fred 

1 Reply

  • Yes it is actually possible to achieve this with some standard functionality from React.

    You can achieve that by utilizing the Helmet component. This allows you to add components, scripts, css, meta tags to the <head> element of your pages.

    If you are utilizing the sample JSS React app, then you already have that dependency installed and if you check the Layout.js file you might notice, that Helmet is already utilized there:

    See attachment for illustration

     

    The approach I took was that I used the scaffold command to create a component called Script, and also created a simple Template in the Content Editor:

    See attachment for illustration

     

    It only contains a multi-line text field called script.

    I have also created a Json Rendering using the “Rendering Contents Resolvers/Datasource Resolver” and targeting my Script JSS component.

    Then I created an instance of the template in a global folder:

    See attachment for illustration

    And I added it to the Home page presentation details:

    See attachment for illustration

    This should ensure that our component is handled from the Sitecore perspective and serialized by the Layout Service.

    We have to do add the component implementation.

    In order to be able to add the script to Helmet, we have to import it, and add our script field from the props:

    See attachment for illustration

     

    This would extend the Helmet and add the custom script. The same logic works with 2 or more scripts components added to a page.

    Keep it mind that currently this cannot be edited from the Experience Editor.

    Also this approach requires you to add the Script component to the presentation details of every page you want it to be executed.

     

    See attachment for illustration