Skip to content

language_chooser

The language_chooser macro is used to render a group of radio boxes for languages available in the shop with an additional title and description if specified.

Definition

{% macro language_chooser(languages, options) %}

Input parameters

languages

object represents an object of language attributes

Option key Type Default Required Description
options.current Locale null yes Locale A currently active language
options.list LocalesList null yes LocalesList A list of languages to choose from

options

object represents an object of option attributes

Option key Type Default Required Description
options.instanceId string "" yes An id necessary to make language radio boxes unique. Usually it can just be the module instance id

Example

In this example we use object api methods to get necessary data for this macro. If using it inside a module we can pass a moduleInstance as an instanceId parameter. As specified earlier, usually it does the job.

{% from "@macros/language_chooser.twig" import language_chooser %}

{% set languages = ObjectApi.getLocales() %}
{% set shopLanguage = ObjectApi.getShopLocale() %}

{{
    language_chooser({
        current: shopLanguage,
        list: languages
    }, {
        instanceId: moduleInstance
    })
}}

Macro source code

{% macro language_chooser(languages, options) %}
    {% from "@macros/icon.twig" import icon %}
    {% from "@macros/radio_box.twig" import radio_box %}

    <p class="font_size-s">
        {{ translate('Store region and language') }}

        <h-tooltip>
            {{
                icon('icon-help-circle', {
                    classNames: ['language-and-currency__icon']
                })
            }}

            <h-tooltip-content>
                <span class="helper">{{ translate('Store versions may differ in the availability of products, payment method and delivery countries') }}</span>
            </h-tooltip-content>
        </h-tooltip>
    </p>

    <div class="radio-box-group">
        {% for language in languages.list %}
            {% set label %}
                <img
                    src="/assets/img/flags/{{ language.locale }}.png"
                    alt="Flag"
                    class="language-and-currency__flag"
                />
                {{ language.region }} ({{ language.name }})
            {% endset %}

            {{
                radio_box({
                    id: "language-radio-box-#{options.instanceId}-#{language.id}",
                    name: "language-and-currency-language-#{options.instanceId}",
                    value: language.url,
                    label,
                    checked: language.locale == languages.current.locale,
                    classNames: 'radio-box-group__radio-box'
                })
            }}
        {% endfor %}
    </div>
{% endmacro %}

ObjectApi reference

Webcomponents reference