shopify x langify自動タグ挿入によるSort by不具合を修正する

langifyの自動タグ挿入が悪さをしている場合がある

langifyを使用していると、自動でタグが挿入される事により、不具合が出てしまう場合があります。当社の環境では、並び替え機能(Sort by)がうまく動いてくれない現象が起きます。フォーム周りは極力触ってほしくないのですが、そこは自動タグ挿入の精度によるところなのでしょう。では、以下修正の手順です。

対象となるコードを開く

対象のコードを開く手順です。あくまで当社テンプレートの場合ですので、当てはまらない場合もあると思いますがご容赦ください。

1.オンラインストア→テーマを開く

左側ナビゲーションメニューの”オンラインストア”をクリックすると、右側に”テーマ”が開きます。このとき”現在のテーマ”と書かれたテーマが、現在表示されているテーマです。その他のテーマは下の”他のテーマ”に集約されています。

2.アクション→コードを編集する

通常は”カスタマイズ”を選んで直感的に編集できますが、今回は”アクション”と書かれたプルダウンメニューを開き、”コードを編集する”をクリックします。

3.Sections→コードを開く

Layout、Templates、Sections、Snippets、Assets、Config、Locals、とフォルダが並んでいますので、Sectionsをクリックするとフォルダ内が開きます。そして、今回の対象コード”collection-template.liquid”をクリックすると、右側にコードが展開されます。

コードを修正する

1.リビジョンを戻して対応する場合

1-1.旧バージョンをクリック

特にコードを改修してない場合は、バグが出る前のバージョンまで戻してください。その後保存をクリックします。”旧バージョン”をクリックしてください。

1-2.バグの無いリビジョンを選択

プルダウンメニューの中から、バグのないリビジョンファイルを選択肢、保存ボタンをクリック。保存後、Webサイトを開いて動作確認をして終了です。

2.コードを部分的に修正する場合

直接コードを改修している場合や、自作テンプレートを使われている場合は、リビジョンを戻してしまうと、様々な箇所が先祖返りしてしまいます。そのため、少し面倒ではありますが、langifyのテンプレートが同期されたタイミングで、都度コード修正が必要となります。

2-1.対象の箇所を特定する

Chromeの”検証”機能で対象箇所を探します。Safariの場合は”要素の詳細を表示”ですね。思いっきり翻訳がうまくいってない模様。

2-2.対象箇所のコードを修正する

当社の対象箇所は”{%- for sort_by in sort_by_list -%}”から”{%- endfor -%}”までで不具合が毎回起こっていますので、そこの部分だけをlangifyの自動タグが入っていないコードに戻します。

Sort by 修正前 (langifyタグあり)

{%- for sort_by in sort_by_list -%}
<button class="Popover__Value {% if current_sort_by == sort_by %}is-selected{% endif %} Heading Link Link--primary u-h6" data-value="{{ sort_by }}" data-action="select-value">{{ '<ly-as-11952807>collection.sorting.</ly-as-11952807>' | append: sort_by | replace: '-', '_' | t }}
</button>
{%- endfor -%}

Sort by 修正後 (langifyタグなし)

{%- for sort_by in sort_by_list -%}
<button class="Popover__Value {% if current_sort_by == sort_by %}is-selected{% endif %} Heading Link Link--primary u-h6" data-value="{{ sort_by }}" data-action="select-value">
{{- 'collection.sorting.' | append: sort_by | replace: '-', '_' | t -}}
</button>
{%- endfor -%}

Shopifyちょこっと便利な機能

ファイル名検索が便利

毎度同じファイルを探すのも面倒なので、決まったファイル名の場合は、ファイル名の検索が便利です。

コード内検索が便利

Shopifyのコードエディタは、エディタ内で”ctrl+F”を押すとコード内検索が出来ますのでとても便利です。

ファイルのリビジョン管理が便利

Shopifyのコードは、各ファイル毎に100リビジョンまで遡れる機能がついています。そのため、過去のバグの無いリビジョンから部分的にコードを移植できます。

やり方としては、一旦バグ無しリビジョンを開き、テキストエディタ等にコードを部分的にコピペしておきます。その後Currentに戻り、移植したテキストエディタ等からコピペすると作業もスムーズです。ローカルファイルを探す手間が必要ありません。ぜひお試しください。