I have a footer that I want to include by default into the layout rather than be injected as a Sitecore component by a content editor. The footer data, however, should be editable and translatable. Is there any way to achieve this?


import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
import SiteFooterLink from '../SiteFooterLink';

const SiteFooter = ({ fields }) => (
    <footer id="site-footer" className="site-footer">
        <div className="container container--content container--med container--centred">
            <div className="site-footer__links">
                { fields.links.map((item, index) => (
                    <SiteFooterLink key={index} {...item} />
                )) }

            <div className="site-footer__copyright">
                <p className="copy copy--sml copy--faded copy--flush"><Text field={fields.copyrightCopy} /> {(new Date()).getFullYear()}</p>

export default SiteFooter;


import React from 'react';
import { Link } from '@sitecore-jss/sitecore-jss-react';

const SiteFooterLink = ({ fields }) =>
  Object.keys(fields).length ?
    <div className="site-footer__link">
      <Link field={fields.attributes} className="link" />
    : null;

export default SiteFooterLink;

The following is my component-content data file.


id: site-footer
name: Site Footer
componentName: SiteFooter
  copyrightCopy: © Company
  - id: site-footer-link-1
  - id: site-footer-link-2
  - id: site-footer-link-3
  - id: site-footer-link-4
  - id: site-footer-link-5
  - id: site-footer-link-6

To summarise, I want to:

  • Include the footer component directly into the layout.
  • Import/link the component-content data to the footer.
  • Update the data (translations, links) based on the current language.

I feel like I'm missing something really obvious here. Thanks in advance for any help!


The short answer is that you can't have a statically component and have it access data from the layout. There are ways to make it work though that would require you to change your approach slightly:

  1. Connect the footer to an app-level placeholder. This may look wrong in disconnected, but once you integrate with Sitecore, you can migrate the footer placement to the __Standard Values of the base template, so you can have the placement inherited across the board. This would mean you need a base template for all of your pages.

  2. Move the footer data into Layout Service context. So instead of the fields being a part of the fields on an item, you have a "resolver" that returns the footer links as a part of the context object: https://jss.sitecore.net/docs/techniques/extending-layout-service/layoutservice-extending-context#extending-context-data-returned-by-the-layout-service

    This is fine for smaller payloads, but not great for "mega navs" as the payload will travel with each page request.

  3. Have the footer make a connected GraphQL request for footer links. This is another call to the server, but you can cache it with GraphQL client like Apollo. See more here: https://jss.sitecore.net/docs/techniques/graphql/connected-graphql#connected-graphql-in-jss-apps

| improve this answer | |

Check out the Dictionary Service and Dictionary Import. Content that's not in a component really only has one place to go, and that's the Dictionary. You could use other services as well (SSC or GraphQL) but that would require working Sitecore-first.

| improve this answer | |
  • not really an answer, rather references to what might eventually be an answer – Mark Cassidy Oct 30 '18 at 12:26

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.