サムネイル

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

目次

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

Cart attributes の実装方法

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

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

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

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

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

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

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

今回は、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の実装は終了です。

最後に

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

お疲れさまでした。

おすすめ Shopify アプリ

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事