Shopify の Cart attributes の使い方について徹底解説

はじめに

今回の記事では、Shopify の Cart attributes の使い方について解説しています。

それでは、頑張っていきましょう。

Cart attributes を使うと何ができるのか

Cart attributes を使うと、カートページで新しい入力フォームを追加することができます。

また、顧客が入力した情報は注文オブジェクトから取得することが可能です。

例えば、下記の画像のように、カートページに備考を追加したとします。

例：カートページに備考を追加

こちらに、「可愛いですね」と入力してみましょう。

カートページの備考欄に入力

このまま、購入手続きに進んで購入して下さい。

購入が完了すると、以下の画像のように注文オブジェクトに追加の詳細が追加されます。

注文オブジェクトに追加の詳細が追加

この備考という部分は、システム側で定義することができます。

Cart attributesを使用することで、**18 才以上ですか？**のチェックボックスや、アレルギーについて入力してくださいのような入力欄を作成することができます。

それでは、実装方法について解説していきます。

Cart attributes の実装方法

結論から書くと、Cart attributesはname="attributes[xxx]"・value="{{ cart.attributes[xxx] }}"の要素を追加した inputをカートページに追加することで実装できます。

上記のnameとvalueをもつinputをカートページのformタグの中で呼び出す、もしくはform="cart"を付与して呼び出せば、Cart attributesの実装は完了です。

xxxの部分は任意の単語を入れることが可能です。指定した単語が、注文オブジェクトの追加の詳細に格納される形になります。

それでは、先ほどの備考入力フォームを実装してみましょう。

備考入力フォームをカートページに追加

Cart attributesを使用して、備考入力フォームをカートページに追加してみましょう。

オンラインストアから該当のテーマの三点リーダーを選択して、コード編集に移動しましょう。

コード編集に移動

今回は、main-cart-items.liquidを編集します。

こちらの記事では Shopify ストアを GitHub と連携させて、テーマを編集する方法をより詳しく解説しています。
Shopify で作られているサイトを見分ける方法 3 選を徹底解説！

main-cart-items.liquidを編集

今回は、formの外にCart attributesを追加します。

以下のコードのように、</form>の箇所を探します。

...
                          >
                          {%- if item.unit_price_measurement.reference_value != 1 -%}
                            {{- item.unit_price_measurement.reference_value -}}
                          {%- endif -%}
                          {{ item.unit_price_measurement.reference_unit }}
                        </div>
                      {%- endif -%}
                    </div>
                  </td>
                </tr>
              {%- endfor -%}
            </tbody>
          </table>
        {%- endif -%}
      </div>
    </div>

    <p class='visually-hidden' id='cart-live-region-text' aria-live='polite' role='status'></p>
    <p
      class='visually-hidden'
      id='shopping-cart-line-item-status'
      aria-live='polite'
      aria-hidden='true'
      role='status'
    >
      {{ 'accessibility.loading' | t }}
    </p>
  </form>
</cart-items>

</cart-items>の後ろに、以下のコードを記述します。

<div style="max-width: 1100px; margin: 0 auto;">
  <label for="note">備考</label>
  <input form="cart" required class="required" id="note" type="text" name="attributes[備考]" value="{{ cart.attributes["備考"] }}">
</div>

form="cart"が追加されているので、上記の input はカートの form と紐づいています。
form="cart"を記述しない場合は、カートページのformタグの中に上記のinputを格納する必要があります。

name="attributes[備考]"とvalue="{{ cart.attributes["備考"] }}により、Cart attributesを使用することができます。

今回の例では、ユーザーが入力した値を備考という名前で注文オブジェクトに保存する形になります。

ここまでで、Cart attributesの実装は終了です。