[{"value":"国家或地区选择器","id":"con","hLevel":2,"level":1},{"value":"语言选择器","id":"lan","hLevel":2,"level":1},{"value":"处理表单提交","id":"处理表单提交","hLevel":2,"level":1}]

多币种与多语言

为助力商家触达全球消费者，SHOPLINE 支持为商品和服务提供多币种、多语言的销售体验。

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

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

国家或地区选择器

表单要求：
- 选择器必须置于 localization_form 生成的表单中
- 表单中需包含 name="country_code" 的输入项
- 提交时将所选国家或地区的代码发送至后端
数据说明：
- 使用 localization.available_countries 遍历所有可用国家或地区
- 当前生效的国家或地区可通过 localization.country 获取
- 若新选择的国家或地区不支持当前语言，将自动切换到该国家或地区的默认语言

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

{{#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 控制选项显示并在用户选择后自动提交表单，详见处理表单提交。

语言选择器

表单要求：
- 选择器必须置于 localization_form 生成的表单中
- 表单中需包含 name="locale_code" 的输入项
- 选项值取自 localization.available_languages 中的 iso_code
状态读取：通过 localization.language 获取当前选中语言，以在界面中高亮或默认选中

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

{{#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 事件，触发统一的提交函数。

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

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);

这篇文章对你有帮助吗？

SHOPLINE

条款协议

国家或地区选择器​

语言选择器​

处理表单提交​

国家或地区选择器

语言选择器

处理表单提交