Section titled Introduction Introduction

This FAQ provides a step-by-step guide on setting up advanced paths with translatable slugs based on the editor language in multi-language space setups. The implementation involves using the Squirrelly helper function @activeTranslatedSlug, which is a specific helper in Storyblok. This helper simplifies the process of handling translated slugs and fallback scenarios.

Prerequisites

Before using the @activeTranslatedSlug helper, ensure that you have both the have both the advanced path app and the translatable slug app installed.

Section titled Usage Examples Usage Examples

Section titled Basic Usage Basic Usage

To use the helper with default settings, which tries to find the translated slug based on the current editor language:

{{ @activeTranslatedSlug({ it }) /}}

Section titled Fallback to simpler slugs Fallback to simpler slugs

If you want to fallback to other translated slugs when an exact match between the set editor language and the translated slug is not found (for example, 'en-US' becomes 'en'), use the fallbackSlugs parameter, which is by default set to true:

{{ @activeTranslatedSlug({ it, fallbackSlugs: true }) /}}

If you don't want the fallback, you need to set it to false.

{{ @activeTranslatedSlug({ it, fallbackSlugs: false }) /}}

Section titled undefinedPrepending Strings to the returned slug undefinedPrepending Strings to the returned slug

By default, the helper prepends a slash / to translated slugs:

{{ @activeTranslatedSlug({ it, prependString: '/' }) /}}

You can prepend other strings to the generated slugs too:

{{ @activeTranslatedSlug({ it, prependString: '/new/' }) /}}

Or you can remove the default behaviour of prepending a slash / by passing an empty string:

{{ @activeTranslatedSlug({ it, prependString: '' }) /}}

Section titled Functionality Overview Functionality Overview

The @activeTranslatedSlug helper performs the following tasks:

• If the editor language isn't set (default language), it returns the original story.slug or folder.slug
• If the editor language is set, it looks for a match in the story.translated_slugs or folder.translated_slugs array.
• If a matching translated slug is found, it's returned.
• If no matching translated slug is found and fallbackSlugs is true, it tries to find a translated slug using a simplified version of the language code (for example, 'en-US' becomes 'en')
• If no translated slug is found using either the full or simplified language code, it returns the original story.slug or folder.slug

Section titled @activeTranslatedSlug Parameters @activeTranslatedSlug Parameters

• it
  • type: object
  • required: true
  • description: the context of the advanced path templates, normally it contains story, lang, folder (only for folders paths), branch_id, env_location and env_name
• prependString
  • type: string
  • required: false
  • default: '/'
  • description: a string that is prepended to the found translated slug.
• fallbackSlugs
  • type: boolean
  • required: false
  • default: true
  • description: With this parameter you can control whether it should fallback on other simpler version of the language code, e.g. 'en-US' becomes 'en' to find a translatable slug

  Section titled undefined undefined

  Section titled Template Equivalent Template Equivalent

  If you were to write the Squirrelly template without using the helper, it would look something like this:

  {{ @if(it.lang) }}/
  {{ @each(it.story.translated_slugs) => t_slug, index }}
    {{ @if(t_slug.lang === it.lang) }}
      /{{ t_slug.slug }}
    {{ #else }}
      {{ it.story.slug }}
    {{ /if }}
  {{/each}}
  {{ #else }}
    {{ it.story.slug }}
  {{ /if }}
  

  This helper simplifies and abstracts away the complexity of handling translatable slugs together with the advanced paths app in your Squirrelly templates.