Linked list display name

Where is the display name of the standard provided link list managed? For example, in the case of a link list that only specifies the URL of a list of links, the path of the item is displayed as follows when displayed in Preview.

When setting up a link list, you must not only specify the path of the item, but also the text to be displayed in the Description.

This can be set for any language, so by translating and setting the display name for each language for this description, the page will be in each language.

This confirms the multilingual usage with respect to the display.

Regarding Links

As for the links, as in the previous Navigation, if they are in a standard language, nothing will be added, otherwise URLs with the locale added will be displayed. The control of this display part will be in the file src\tailwindcss\src\components\LinkList.tsx.

First, the default function is used to obtain the locale, as in the case of Navigation.

export const Default = (props: LinkListProps): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();

  const contentLocale = getLocale(sitecoreContext);

The above code calls getLocale. This code sets the value of contentLocale as a URL for the current Sitecore content locale.

const getLocale = function (props: SitecoreContextValue): string {
  let locale;

  if (!props.language || props.language === process.env.DEFAULT_LANGUAGE) {
    locale = '';
  } else {
    locale = '/' + props.language;
  }

  return locale;
};

This will set DEFAULT_LANGUAGE to nothing if it is set to en, otherwise it will be set to / with the locale added. The contentLocale will now be set to the path of the URL.

Then add locale to the definition of LinkListItemProps so that the acquired data can be passed in a linked list.

type LinkListItemProps = {
  key: string;
  index: number;
  total: number;
  field: LinkField;
  locale: string;
};

Now that the type has been changed, add the Locale information in the LinkListItem that is being called where the item's data is being processed.

        <LinkListItem
          index={key}
          key={`${key}${element.field.link}`}
          total={datasource.children.results.length}
          field={element.field.link}
          locale={contentLocale}
        />

Then, configure JssLink, which is used in LinkListItem, to add Locale in the URL.

  return (
    <li className={className}>
      <div className="field-link">
        <JssLink field={props.field} href={`${props.locale}${props.field.value.href}`} />
      </div>
    </li>
  );

Now you are ready to go; if you view in Preview mode, you will see that the locale has been added to the URL.

Summary

In this case, we have confirmed how to set a locale-added URL for JssLink used in Link List. Now you can use URLs with added locales for items specified in LinkList.

Another component of Headless SXA that uses JssLink is Promo. By using the same implementation, it is possible to add a locale to Promo and link to it.

Tags

• XM Cloud
• Headless SXA