[Shopify]注文に日時指定、ギフトラッピングなどの追加情報データをのせる方法

今回紹介するのは、注文情報に追加データをのせる方法です。

一般的にはcart.attributesとも呼ばれており、カート画面にて設定することで注文管理の注文情報に追加データをのせることが可能になります。一般的には、cart attributesとして配送希望日の情報、ギフトラッピングの有無、メッセージカードの情報などの場合が多いように感じます。（ただ情報自体に制限はないので、Shopifyストアによって多種多様なデータを入れていただいて問題ございません。）

具体的に情報が追加される場所

まず最初にカート画面で設定したcart.attributesが実際の注文のどこに表示されるかを見ていきましょう。

表示される場所としては、管理画面→注文管理→メモの下部

になります。（ピンク枠の部分）

上記のピンク枠内の内容としては

• タイトル　→ （日時指定）
• 値　→ （2021-09-01）

 という形で、タイトルと値がセットになっています。

上記の例は、日時指定情報の注文画面への追加でしたが、既述の通り、ギフトラッピングの情報、メッセージカードの情報、熨斗の情報、領収書の情報など、本当に多種多様な情報を注文にのせることができるので、cart.attributesは非常に便利な機能となっています。

ちなみにギフトラッピングを実装する方法について興味がある方は下記記事をご参考に。

[Shopify]カート画面にギフトラッピングを追加実装する方法

cart attributesを追加する方法

cart attributesがとても便利！ということが分かったところで早速実装の方にうつっていきましょう。

cart.attributesは、その名前にもある通りカート画面に埋め込むことになります。先ほど紹介した「日時指定」のcart attributeの具体的なコードは下記のようになります。

<p class="cart-attribute__field">
    <label for="">日時指定</label>
    <input id="" type="text" name="attributes[日時指定]" value="{{cart.attributes["日時指定"] }}">
</p>

このコードをcart.liquid もしくは cart-template.liquid のようなカートのsubmitフォームがある内側に記載します。

HTMLタグであれば

<form action="/cart" method="post" novalidate>
    （この中にcart attributesを記載）
</form>

のようにformタグの中に記載しましょう。

テーマによっては

{% form %}

のようにliquidタグになっている場合もあるかも知れません。

ちなみに、cart attributesの作り方としては下記サイトが有名なのでぜひ活用してみてください。

https://ui-elements-generator.myshopify.com/pages/cart-attribute

ピンク枠内のSet your form fieldsにてタイトルやinputタグの形式を選択します。すると下部の Grab your code の部分にコードが出力されます。

その出力されたコードをカートページのformに埋め込むだけで完了するので、実装としてそんなに難しい作業はないかと思います。

[Shopify] 注文情報に追加のデータをのせる方法　まとめ

以上、cart attributesを使用して、注文情報に追加データをのせる方法でした。

cart attributesは非常に便利で、ストア構築やテーマ編集などを行う際は、必ずと言って良いほど使用する部分です。何か追加のデータを注文に載せたいけど、どのように追加できるか分からないといった方の参考になれば嬉しいです。

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！