Use i18n translation lib with Liquidjs

[alexsaab]

How I can use __ function in LiquidJS which integrated with LiquidJs

[harttle]

I believe i18n is a feature which should be provided by site generators / frameworks, not in template engine level. For example, if you're using Eleventy with LiquidJS, you'll need to check out https://www.npmjs.com/package/eleventy-plugin-i18n

[printfshen]

Can provide demo？

[npabisz]

You could add t filter and handle yourself like this:

// Example locales
const locales = {
  product: {
    quantity_left: {
      en: "Only {{ quantity }} left",
      pl: "Pozostało tylko {{ quantity }}"
    }
  }
};

// Then set default and current lang
const defaultLanguage = 'en';
const currentLanguage = 'pl';

// Register translation filter
engine.registerFilter('t', (...args) => {
  const deepValue = (obj, path) => {
    const paths = path.split('.')
    let current = obj, i;

    for (i = 0; i < paths.length; ++i) {
      if (typeof(current[paths[i]]) == 'undefined') {
        return undefined;
      } else {
        current = current[paths[i]];
      }
    }

    return current;
  }

  const path = args[0];
  const variables = {};

  args.forEach((value, index) => {
    if (index > 0) {
      variables[value[0]] = value[1];
    }
  });

  const translation = deepValue(locales, path);

  if (!translation) {
    return `Translation missing for "${path}"`;
  }

  let translatedString = translation[currentLanguage]
    ? translation[currentLanguage]
    : translation[defaultLanguage];

  if (!translatedString) {
    return `Translation missing for "${path}"`;
  }

  return engine.parseAndRenderSync(translatedString, variables);
});

And just use it as in shopify

<span class="quantity">{{ 'product.quantity_left' | t: quantity: 5 }}</span>