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?

SiteFooter.js

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>

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

export default SiteFooter;

SiteFooterLink.js

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" />
    </div>
    : null;

export default SiteFooterLink;

The following is my component-content data file.

en.yml

id: site-footer
name: Site Footer
componentName: SiteFooter
fields:
  copyrightCopy: © Company
  links:
  - 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!

up vote 4 down vote accepted

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

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.

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

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

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.