Language And Currency¶

Availability: All contexts

The language_and_currency module is used to render a modal that allows to toggle the language and currency in the shop.

Configuration parameters¶

title¶

string a title of the module

shouldDisplayDescription¶

boolean if set to true a description will be rendered

description¶

string an additional description of the module

flagPosition¶

string represents a position of the flag in relation to the text next to it. Currently supported values are top and left. By default the flag is placed at the top of the text

Module source code¶

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

{% set currencies = ObjectApi.getCurrencies() %}
{% set shopCurrency = ObjectApi.getShopCurrency() %}
{% set languages = ObjectApi.getLocales() %}
{% set shopLanguage = ObjectApi.getShopLocale() %}

{{ currencies.setItemCountPerPage(currencies.itemCountPerPage * currencies.pages) }}

{% set isFlagPositionLeft = moduleConfig.flagPosition == "left" %}

<div class="language-and-currency">
    {% if moduleConfig.title %}
        <h5 class="title overline mb-xs-0  language-and-currency__title">{{ moduleConfig.title }}</h5>
    {% endif %}

    {% if moduleConfig.shouldDisplayDescription and moduleConfig.description %}
        <p class="description module__description language-and-currency__description">{{ moduleConfig.description }}</p>
    {% endif %}

    <language-and-currency module-instance-id="{{ moduleInstance }}" lazy aria-label="{{ translate('Language %s, currency %s. Change language and currency', [shopLanguage.name, shopCurrency.name]) }}">
        {{ language_and_currency_indicator(shopLanguage, shopCurrency, {
            isFlagPositionLeft,
            shouldDisplayFlag: moduleConfig.shouldDisplayFlag
        }) }}

        <div slot="languages" hidden>
            {{
                language_chooser({
                    current: shopLanguage,
                    list: languages
                }, {
                    instanceId: moduleInstance
                })
            }}
        </div>

        <div slot="currencies" hidden>
            {{
                currency_chooser({
                    current: shopCurrency,
                    list: currencies
                }, {
                    instanceId: moduleInstance
                })
            }}
        </div>
    </language-and-currency>
</div>

Webcomponents reference¶

language-and-currency

Macros reference¶

Used styles¶

Module configuration schema¶

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- adding and changing the activity of [languages](%s) and [currencies](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\/admin\/configCurrencies\/list"
                    ]
                }
            },
            {
                "type": "text",
                "name": "title",
                "label": "Module title",
                "supportsTranslations": 1
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayDescription",
                "label": "Display additional description below the module title",
                "defaultValue": 0,
                "children": [
                    {
                        "type": "textarea",
                        "name": "description",
                        "label": "Description",
                        "isRequired": 0,
                        "isHidden": 1,
                        "relations": [
                            {
                                "parentName": "shouldDisplayDescription",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable"]
                                    }
                                ]
                            }
                        ],
                        "supportsTranslations": 1
                    }
                ]
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayFlag",
                "label": "Display country flags",
                "defaultValue": 1,
                "children": [
                    {
                        "type": "radio",
                        "name": "flagPosition",
                        "label": "Place the flag icon",
                        "defaultValue": "left",
                        "options": {
                            "radioOptions": [
                                {
                                    "key": "left",
                                    "label": "next to language and currency"
                                },
                                {
                                    "key": "top",
                                    "label": "above the language and currency"
                                }
                            ]
                        },
                        "relations": [
                            {
                                "parentName": "shouldDisplayFlag",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable"]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]