Custom language selector

To add a custom selector, you need to create an HTML structure with specific attributes for the script to locate the elements that will make up the language selector.

One element has to be the item that will be repeated with the various languages, i.e. in the case of a list <ul> it would be the <li> element, but it can be any other element. This will have the attribute data-polyflow-switcher="alternative". If you want the language names to be written in their corresponding language, you must also add the following attribute: data-polyflow-switcher-lang="self".

If you need to hide the custom language selector on pages that do not have language alternatives, add this attribute to the div containing the entire structure:

data-polyflow-switcher="wrapper"

The next element will be the <a> link, this could be the previous element itself (for example in the case of having a list of <a> inside a <div> container) or else it will have to be inside the previous element with the attribute.

To specify where to display the language name and/or language code, two placeholders will be used which will have to be placed inside the <a> element (at least one of the two will have to be used).

  __LOCALE__
  __LANGUAGE__

‍Optionally you can display the selected language in a container that has the attribute data-polyflow-switcher="current", for example in case you want to create a button that opens the dropdown. Inside, the same placeholders as before will be used to indicate where to display the data for the current language.

Optionally the element marked with the attribute data-polyflow-switcher="alternative" can have the attribute data-polyflow-switcher-active-class with the value of the css class that you want to use in the active item at the moment.

Examples

Example with a list item:

<div>
  <button data-polyflow-switcher="current">
    __LANGUAGE__ 
    __LOCALE__
  </button>
  <ul>
    <li data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">
      <a href="">
        __LOCALE__
        __LANGUAGE__
      </a>
     </li>
  </ul>
</div>

Example with a container and inside the links directly:

<div>
  <button data-polyflow-switcher="current">
    __LOCALE__
    __LANGUAGE__
  </button>
  <div>
    <a href="" data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">
      __LOCALE__
      __LANGUAGE__
    </a>
  </div>
</div>