Show available translations in NewsItemView

Plone Support
1

I have a Volto page in several languages. I have activated multilangual support and activated it in config.js file. With "manage translations" I can also easily link different news items together. In the portal_catalog I also see that the items now have the same translation_group.

But how can I show the available translations in the NewsItemView?

2

You need to implement your own language switcher, maybe based on https://github.com/plone/volto/blob/main/src/components/theme/LanguageSelector/LanguageSelector.js

3

Good tip thanks! It worked.

Here is my code:

const LanguageSelector = ({ intl, onClickAction }) => {
  const currentLang = useSelector((state) => state.intl.locale);
  const translations = useSelector(
    (state) => state.content.data?.['@components']?.translations?.items,
  );

  const { settings } = config;

  return settings.isMultilingual && translations && translations.length ? (
    <div className="translations">
      <span>{intl.formatMessage(messages.existingTranslations)}:</span>
      <ul>
        {map(settings.supportedLanguages, (lang) => {
          const translation = find(translations, { language: lang });
  
          if (translation) {
            return (
              <li key={`language-selector-${lang}`}>
                <Link
                  aria-label={`${intl.formatMessage(
                    messages.switchLanguageTo,
                  )} ${langmap[lang].nativeName.toLowerCase()}`}
                  className={cx({ selected: toReactIntlLang(lang) === currentLang })}
                  to={flattenToAppURL(translation['@id'])}
                  title={langmap[lang].nativeName}
                  onClick={() => {
                    onClickAction();
                  }}
                >
                  {langmap[lang].nativeName}
                </Link>
              </li>
            );
          }
  
          return null;
        })}
      </ul>
    </div>
  ) : null;
};

LanguageSelector.propTypes = {
  intl: PropTypes.object.isRequired,
  onClickAction: PropTypes.func,
};

LanguageSelector.defaultProps = {
  onClickAction: () => {},
};
1 Like