BLOG ECブログ : Shopify and more

Shopify 小技言語追加（多言語対応）で生じるリンク問題を解決

2023年9月13日

Shopifyストアで言語を追加すると、メニューやボタンなどのリンクも自動的に変更してくれるので便利ですが、特定の条件で次のような問題が起こる場合があります。

1. メニュー機能で設定したページ内リンクがデフォルト以外の言語で動かなくなる。
※ページ内リンク（例：#anchor）の先頭に自動付与されるISOコード（例：/en）を削除したい。

2. デフォルト以外の言語でリンクをクリックしたのにデフォルト言語のページへ移動してしまう。
※ルートパスで設定したリンク（例：/pages/about）にISOコード（例：/en）が自動付与されない。

この記事では、Shopifyの言語追加（多言語対応）で生じる上記のようなリンクの問題を、Liquidの条件分岐やfilter、オブジェクトで解決する小技をご紹介します。

ページ内リンクに付与されるISOコードを削除

まずは、メニュー機能で設定したページ内リンクが、デフォルト以外の言語で動かない場合の解決方法です。

現在設定されているメニュータイプを確認してみましょう。
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『カスタマイズ』ボタンをクリック。
※解説に使用しているのはDawnのバージョン11.0.0の画面です。

画面左側『ヘッダー』をクリックして、

『デスクトップのメニュータイプ』の項目を確認します。

現在選択されているメニュータイプに該当するliquidファイルを確認します。
以下はDawnのバージョン11.0.0で確認したliquidファイルの一覧です。

メニュータイプ	該当するliquidファイル
ドロップダウン	snippets/header-dropdown-menu.liquid
メガメニュー	snippets/header-mega-menu.liquid
ドロワー	snippets/header-drawer.liquid

※Dawnのバージョン9.0.0以前は全メニュータイプがsections/header.liquidに直接記述されています。

該当するliquidファイルを修正します。（スマホではドロワーメニューが表示されるので、snippets/header-drawer.liquidの修正もお忘れなく。）
ファイルの修正を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『…』ボタンをクリックして『コードを編集』します。

メニュータイプに該当するliquidファイルを開くと最上部に以下のような記述があるので、

{% comment %}
...省略
{% endcomment %}

その下に以下のコードを追記します。

{% assign remove = '/' | append: localization.language.iso_code -%}
{% assign target = remove | append: '#' -%}

その他に3箇所を修正します。
以下の記述を

{{ link.url }}

以下のように書き換えます。

{%- if link.url contains target -%}{{ link.url | remove_first: remove }}{%- else -%}{{ link.url }}{%- endif -%}

以下の記述を

{{ childlink.url }}

以下のように書き換えます。

{%- if childlink.url contains target -%}{{ childlink.url | remove_first: remove }}{%- else -%}{{ childlink.url }}{%- endif -%}

以下の記述を

{{ grandchildlink.url }}

以下のように書き換えます。

{%- if grandchildlink.url contains target -%}{{ grandchildlink.url | remove_first: remove }}{%- else -%}{{ grandchildlink.url }}{%- endif -%}

そうすることで、ページ内リンクの先頭に付与されるISOコードが削除され、デフォルト以外の言語でもページ内リンクが正常に動作します。

ルートパスで設定したリンクにISOコードを付与

次に、デフォルト以外の言語でリンクをクリックしたのに、デフォルト言語のページへ移動してしまう場合の解決方法です。

カスタマイズ画面でルートパスのリンクを設定している場合

セクションのリンクにルートパスを直接入力すると、言語切り替えの際にリンクが自動的に変更されません。以下の方法でリンクを設定してください。

1. 『リンクまたは検索を貼り付ける』のエリアをクリックして、リンクしたいページを選択します。
2. 画面右上の『保存する』ボタンをクリックします。

運用の都合などで、リンクをルートパスで設定する必要がある場合、『カスタムLiquid』セクションを使用するなどして、このあと紹介する方法を試してみてください。

liquidファイルにルートパスのリンクを設定している場合

該当するリンク部分のhref属性を
※/pages/handleの部分は任意です。

<a href="/pages/handle">

以下のように書き換えます。
※デフォルト言語が日本語ではない場合、jaの部分をデフォルト言語のISOコードに書き換えてください。

<a href="{%- if localization.language.iso_code != 'ja' -%}/{{ localization.language.iso_code }}{%- endif -%}/pages/handle">

そうすることで、ルートパスで設定したリンクに、デフォルト以外の言語ではISOコードが付与され、言語切り替えの際にリンクが正常に動作します。