Shopifyの電話番号から国際番号を取り除いて表示する

「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ３ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。

引用元: RuffRuff 予約販売

Tsun Inc.でCTOをしている小笠原です！
最近はShopifyのアプリやテーマの開発を行っています。
このブログではShopify開発に役立つ情報を共有していきます。
Shopifyエンジニアの方の参考になれば嬉しいです！

なぜやるのか

Shopifyで管理される電話番号(customer.phoneやshipping_address.phoneなど)は国際番号(日本であれば81)が付与されているケースがあります。
付与されるケースとしては、顧客管理画面から顧客データを編集した場合や顧客自身が入力した場合(おそらくレアケース)があります。

電話番号をストア内に表示したい場合や帳票に表示する際に国際番号を取り除いて表示したかったので方法を調べました！

Shopifyコミュニティ内の https://community.shopify.com/c/総合的なディスカッション/手動で顧客追加した際の国際電話番号への矯正に起因する国内配送サービスとの問題について/td-p/878158 で議論されているように、そもそも取り除いた状態で保存させるオプション等はないので、国際番号の除去が必要であれば表示する際に自分でやるしかなさそうです。

やりかた

Liquidで電話番号に対して下記のフィルターをかけます。

{{ shipping_address.phone | replace: '+811', '01' | replace: '+812', '02' | replace: '+813', '03' | replace: '+814', '04' | replace: '+815', '05' | replace: '+816', '06' | replace: '+817', '07' | replace: '+818', '08' | replace: '+819', '09' | replace: '+810', '0' }}

shipping_address.phone の部分は使用する電話番号に読み替えてください。

やっていることは単純で、+81が先頭に付与されていたら+81を除去しつつ、かつ0から始まらない場合は0を付与しています。(顧客管理画面から編集した場合はShopify側で0が除去されているはずですが念の為)

Liquidのreplaceフィルターが正規表現に対応していないので力技でやってます。 正規表現が使えればもっとスマートにできますが、Liquidの更新に期待しましょう。

まとめ

今回はLiquidのフィルターを使って、電話番号から国際番号を取り除いて表示する方法をご紹介しました。

今後はこういった小ネタも随時投稿していきますので、ぜひチェックしてみてください。