Adds language selector dropdown to Shopify theme

gistfile1.txt

# Native Language Selector
Adds language selector dropdown to Shopify theme

## Usage
```
{% render 'native-language-selector', id: 'header-nls' %}
```

native-language-selector.liquid

{% assign default_lang = 'de' %}

{% assign min = 65 %}
{% assign max = 80 %}
{% assign diff = max | minus: min %}
{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}
{% assign fallback_uid = randomNumber | prepend: 'native-lang-select-' %}
{% assign uid = id | default: fallback_uid %}

{% assign fallback_lang_list = 'DE|Deutsche,FR|Français' %}
{% assign lang_list = list | default: fallback_lang_list | split: ',' %}

{% assign lang_prefix = request.path | slice: 1, 3 %}
{% assign lang_prefix_last_char = lang_prefix | split: '' | last %}
{% if lang_prefix_last_char == '/' %}
  {% assign current_lang = request.path | slice: 1, 2 %}
  {% assign current_lang_chunk = '/' | append: current_lang %}
{% else %}
  {% assign current_lang = default_lang %}
  {% assign current_lang_chunk = '' %}
{% endif %}

{% assign current_url = request.path %}
{% assign current_url_w_o_lang = current_url | replace: current_lang_chunk, '' %}

<style>
.native-lang-switch { cursor: pointer; display: flex; font-size: 14px; line-height: 24px; margin-right: 10px; position: relative }
.native-lang-switch .label { background-color: transparent; border: 1px solid transparent; border-radius: 3px; flex: 1; transition: background-color 0.3s ease 0s }
.native-lang-switch.show-dropdown .label,
.native-lang-switch:hover .label { border-color: rgba(0,0,0,0.15); box-shadow: -2px -2px 4px rgba(0,0,0,0.05) inset }
.native-lang-switch.show-dropdown .label { border-radius: 3px 3px 0 0 }
.native-lang-switch ul { background-color: rgba(0,0,0,0.05); border-color: #DDD; border-style: solid; border-width: 0 1px 1px; border-radius: 0 0 3px 3px; display: none; flex-direction: column; left: 0; position: absolute; top: 100%; width: 100% }
.native-lang-switch.show-dropdown ul { display: flex }
.native-lang-switch ul li,
.native-lang-switch ul li a { display: flex; flex: 1 }
.native-lang-switch .label,
.native-lang-switch ul li a { padding: 0.5em 0.9em 0 }
.native-lang-switch ul li + li { border-top: 1px solid rgba(0,0,0,.1) }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector(`#{{ uid }}`).addEventListener('click', (e) => {
      e.preventDefault();
      let e_target = e.target,
          nls_parent = e_target.closest('.native-lang-switch'); console.log('e_target', e_target); console.log('nls_parent', nls_parent);
      if(nls_parent.classList.contains('show-dropdown')) {
        nls_parent.classList.remove('show-dropdown');
      } else {
        nls_parent.classList.add('show-dropdown');
      }
    });
  });
</script>

<div id="{{ uid }}" class="native-lang-switch">
  <span class="label">{{ current_lang | upcase }}</span>
  <ul class="dropdown">
  {% for lang in lang_list %}
    {% assign l = lang | split: '|' %}
    {% assign l_code = l[0] | downcase %}
    {% assign l_label = l[1] %}
    <li data-lang="{{ l_code }}"><a href="{% if l_code != default_lang %}/{{ l_code }}{% endif %}{{ current_url_w_o_lang }}" title="{{ l_label }}">{{ l_code | upcase }}</a></li>
  {% endfor %}
  </ul>
</div>