Translation

In index.html adding .i18n class to an element makes the i18n library translate the text of that element on the fly. .18n class can be added using the js/webflow/import.js. Using the data-i18n attribute, we can define which property to be used from the translations config.

//sample config
translations: {
    'en': {
      'Point Mapper': 'Services'
    }
  },

<!-- sample html -->
<div data-i18n="Point Mapper" id="test" class="i18n">Point Mapper</div>

In a loop,

• We check all the elements that have .18n class

• Search their data-i18n attribute value in the translations config(i.e "Point Mapper" in the sample code above)

• Modify the element's text using the value that corresponds to the key(i.e "Services" in the sample code above)

• The modified #test element will look like :

<div id="test" class="i18n">Services</div>