Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.
Drop-ins overview

Localizing links

Learn how the boilerplate automatically localizes internal links for multistore/multilingual storefronts. The system keeps users within their chosen locale as they navigate the site.

The decorateLinks function automatically prepends all content links with the root path for each language. This ensures users stay within their current locale as they navigate the site.

How it works:

  • On /en-ca/ pages: /products/ becomes /en-ca/products/
  • On /fr/ pages: /products/ becomes /fr/products/
  • Links with #nolocal hash are not modified (useful for store switcher links)

This function is enabled by default in the Commerce Boilerplate via scripts/script.js.

import { decorateLinks } from './commerce.js`


/**
 * Decorates the main element.
 * @param {Element} main The main element
 */
export function decorateMain(main) {
  decorateLinks(main); // enables localizationb of links
  decorateButtons(main);
  decorateIcons(main);
  buildAutoBlocks(main);
  decorateSections(main);
  decorateBlocks(main);
}

The rootLink function prepends the appropriate language root path to a given link. Use it within a block to localize links from a drop-in for loading scripts, styles or links to other pages within a drop-in. This approach ensures consistency across languages and store views.

import { rootLink } from '../../scripts/commerce.js';


export async function decorateMyBlock(block) {
  const atag = document.createElement('a');
  atag.innerText = 'My Link';
  atag.href = rootLink('/my-path'); // returns the localized url for '/my-path'
  // ...
}