what3wordsアドレス入力欄をShopifyに追加する方法

<h1>what3words入力欄のプラグイン</h1>
ユーザー住所入力画面におけるwhat3words入力欄は現在、Shopify（ショピファイ）をはじめとした多数のECプラットフォームにてプラグインとして追加する事が可能です。
<br>
<br>
プラットフォームにもよりますが、簡単にwhat3words入力欄・サジェスチョン機能を設置できるようになっております。

※サジェスト機能を国内だけの結果だけに絞る事も可能です。

現在what3wordsアプリのプラグインはShopifyをはじめ、Magento、WooCommerce、WixやWordpress等でご利用頂けます。プラットフォームによってwhat3words入力欄の設置手順は多少変わりますが、今回ご紹介するShopify以外での設置手順は概ね一緒です。

<h6>なぜ入力欄が必要なのか？</h6>
既存の住所システムだけだと、見つけにくい住所が存在しており、配達員さんが迷う事も。
基本的に既存の住所システムは地図上の場所と紐付けがされているものの、大きいビルだと入り口が複数あったり、入り組んだ団地だと戸惑う事も。また一軒家の場合、表札を出さない家も増えてきており、配送員からすると悩ましい。

住所に悩んでいるユーザーは、what3wordsアドレスをお買い物する際に入力できる場所があればピンポイントの届け先・玄関先を指定できるため、入力したユーザーはスムースな配送を期待できる。
もちろん、住所に困っていないユーザーは入力欄をスキップ。


:::note info
what3words入力欄はデフォルトで任意入力となっているため、必要ないユーザーはスキップ
:::


what3words入力欄の設置方法（Shopifyベーシック）
----
入力欄の設置手順はShopifyのプランによって、変わります。
まずはShopifyベーシックの場合についてご紹介していきます。

① Shopifyアプリストアからwhat3wordsを検索し、アプリの追加をクリック
*こちらのリンクからもアクセスできます*
https://apps.shopify.com/what3words-address-field

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/d062f89b-a39b-c2b9-c291-eab3ec8afd1c.png">

② アプリインストールの承認
アカウントにログインした状態で、アプリインストールの承認をします。お使いのShopifyのバージョンに合わせて、インストール手順がはじまります。

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/cd912045-0117-ab5a-8e17-e8de872930b9.png">

③ アプリのカスタマイズ
管理画面左メニューにから、<b>オンラインストア</b> → <b>テーマ</b>を選択し、<b>カスタマイズ</b> → <b>コードを編集</b>ボタンを押します。

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/fe7c809f-ca43-89f5-3de1-0f43e8f2ffbd.png">

④ カートページに追加
カートページにあるセクション追加ボタンを押し、what3wordsを選択します。
ベーシックプランの場合、what3words入力欄はカートページにのみ追加できます。

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/cafb1184-9944-464c-d4ad-dab46260a83f.png">

⑤ 設置場所の選択
カートページでの設置場所は、チェックアウトボタンの上での配置を推奨致します。
テーマの保存が完了したら、これで入力欄の設置完了です。

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/8426b0b1-bae1-ff61-cc06-eb01c57b47ca.png">

what3words入力欄の設置方法（Shopifyプレミアム）
----
次に、Shopifyプレミアムプランについてご紹介していきます。
ベーシックプランとの主な違いとしては入力欄の設置場所です。

① Shopifyアプリストアからwhat3wordsを検索し、アプリの追加をクリック。
*こちらのリンクからもアクセスできます*
https://apps.shopify.com/what3words-address-field

<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/d062f89b-a39b-c2b9-c291-eab3ec8afd1c.png">

② アプリインストール
ログインした状態で手順を進むと、スニペットが出てくるのでこちらをコピーします。
<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/8b850563-5644-41d5-7b5d-39cb791aa321.png">

③ アプリのカスタマイズ
管理画面左メニューにから、<b>オンラインストア</b> → <b>テーマ</b>を選択し、<b>カスタマイズ</b> → <b>コードを編集</b>ボタンを押します。ステップ②でコピーしたスニペットを```<head>```に貼り付けます。
<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/1f85b29b-054e-aa13-0286-4347c337938d.png">

④ 完了！
カートページにあるセクション追加ボタンを押し、what3wordsを選択します。
プレミアムプランの場合、what3words入力欄は住所入力画面に追加できます。
<img width="600" alt="![image.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289659/706bad50-6a36-745a-56f5-4085b912708b.png">

その他設定
----
**注文完了メールに追加する方法**
what3wordsアプリの設定画面にて、<b>通知</b> → <b>注文の確認</b>を選択します。
{{ shipping_address | format_address }}のLiquid変数があるので、下記コードを貼り付けます。 

```liquid
{% if attributes["what3words address"] %}
    <h4>what3words address</h4> 
    <p>{{ attributes["what3words address"] }}</p>
{% endif %}
```
<br>
<br>

**Stores APIなどのOMSと連携する方法**
お客様のwhat3words情報はREST API にあるnote_attributesまたはnoteに保存されます。
Shopify Orders REST APIと連携：
<br>

_リクエスト_
<pre>
GET {{your-shopify-site}}/admin/api/2022-07/orders/{{your-order-number}}.json
</pre>

_レスポンス例_
```javascript
"note": "what3words address: ///filled.count.soap"
"note_attributes": [
      {
        "name": "what3words address",
        "value": "filled.count.soap"
      }
]
```

以上Shopifyにおけるwhat3words入力欄の設置ガイドでした！
非常に簡単に設置できる上、無料でご利用できるものになっております。