Translate Extra fields

Customization Code
1

Sometimes the project will have multiple languages enabled. At the moment the Extra Fields can only have one title.

For those cases you’d like to display the translated field name and placeholder in the checkout, you can use the following custom javascript as an example.

<script>
  window.addEventListener("turbo:load", function() {
    if (["nl"].includes(document.documentElement.lang)) {
      document.querySelector("[data-extra-field-name='Dog name'] label").innerText = "Hondennaam"
      document.querySelector("[data-extra-field-name='Dog name'] textarea").placeholder = "Hondennaam"
    }
  })
</script>

The above script assumes the Extra field is in English and has the name “Dog name”.
In this snippet, it will translate the label and placeholder of field to Dutch (if Dutch is enabled in your project).

It’s important to note that any change to the name of the extra field in the Firmhouse portal, will break this script. Since it matches to the exact value of the field name.

See the Firmhouse knowledge center for related info on how to place custom (JavaScript) code in the checkout.