Localizing links

The best practice for localizing URL text is to store it within the content. Alternatively, you can use functions from scripts/commerce.js to localize links programmatically.”

decorateLinks

The decorateLinks function automatically prepends all content links with the root path for each language.

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);
}

rootLink

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'
  // ...
}