---
title: "多币种与多语言"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/multi-currency-and-multi-language'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/multi-currency-and-multi-language.md'
---
# 多币种与多语言
为助力商家触达全球消费者，SHOPLINE 支持为商品和服务提供多币种、多语言的销售体验。

通过 SHOPLINE 商家后台的 [市场](https://admin.myshopline.com/admin/settings/markets) 和 [语言](https://admin.myshopline.com/admin/settings/lang) 设置，商家可以轻松完成国际化配置。同时，[SHOPLINE Payments](https://www.shopline.com/payments) 支持商家实现多币种结算和多语言展示，确保顾客在浏览和结账过程中获得连贯的本地化体验。多币种和多语言功能开启后，需在页眉、页脚或导航抽屉内显示 [国家或地区选择器](#con) 和 [语言选择器](#lan)，以便顾客随时切换。

下文将介绍如何通过本地化组件实现多币种和多语言功能。

---

## 国家或地区选择器{#con} 
+ 表单要求：
    - 选择器必须置于 [localization_form](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/localization-form.md?) 生成的表单中
    - 表单中需包含 `name="country_code"` 的输入项
    - 提交时将所选国家或地区的代码发送至后端
+ 数据说明：
    - 使用 `localization.available_countries` 遍历所有可用国家或地区
    - 当前生效的国家或地区可通过 `localization.country` 获取
    - 若新选择的国家或地区不支持当前语言，将自动切换到该国家或地区的默认语言

以下代码示例演示了如何实现国家或地区选择器。顾客可以通过该组件切换不同的国家或地区。

```html
{{#localization_form enctype="multipart/form-data" accept-charset="UTF-8"}}
  <select name="country_code" onchange="this.form.submit();">
    {{#for country in localization.available_countries}}
      <option value="{{country.iso_code}}" {{#if localization.country.iso_code == country.iso_code}}selected{{/if}}>
        {{country.name}}({{country.currency.iso_code}}
        {{country.currency.symbol}})
      </option>
    {{/for}}
  </select>
{{/localization_form}}
```

有关如何通过 JavaScript 控制选项显示并在用户选择后自动提交表单，详见 [处理表单提交](#处理表单提交)。

---

## 语言选择器{#lan} 
+ 表单要求：
    - 选择器必须置于 [localization_form](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/localization-form.md?) 生成的表单中
    - 表单中需包含 `name="locale_code"` 的输入项
    - 选项值取自 `localization.available_languages` 中的 `iso_code`
+ 状态读取：通过 `localization.language` 获取当前选中语言，以在界面中高亮或默认选中

以下代码示例演示了如何实现语言选择器。顾客可以通过该组件切换不同的语言。

```html
{{#localization_form enctype="multipart/form-data" accept-charset="UTF-8"}}
  <select name="locale_code" onchange="this.form.submit();">
    {{#for language in localization.available_languages}}
      <option value="{{language.iso_code}}" {{#if localization.language.endonym_name == language.endonym_name}}selected{{/if}}>
        {{language.endonym_name}}
      </option>
    {{/for}}
  </select>
{{/localization_form}}
```

有关如何通过 JavaScript 控制选项显示并在用户选择后自动提交表单，详见 [处理表单提交](#处理表单提交)。

---

## 处理表单提交{#处理表单提交}
由于选择器通常为自定义组件且不包含显式提交按钮，因此需在脚本中监听变更并提交表单。建议通过 JavaScript 绑定国家或地区和语言字段的 `change` 事件，触发统一的提交函数。

以下代码示例基于前文所述的 [国家或地区选择器](#con) 和 [语言选择器](#lan) 示例，演示了如何处理表单提交。

```javascript
class LocalizationForm extends HTMLElement {
  constructor() {
    super();
    this.elements = {
      country: this.querySelector('input[name="country_code"]'),
      language: this.querySelector('input[name="locale_code"]'),
      form: this.querySelector('form'),
    };
    this.elements.country && this.elements.country.addEventListener('change', this.handleSubmit.bind(this));
    this.elements.language && this.elements.language.addEventListener('change', this.handleSubmit.bind(this));
  }
  handleSubmit(e) {
    e.preventDefault();
    this.elements.form.submit();
  }
}
defineCustomElement('localization-form', () => LocalizationForm);
```