ShopifyでカートにCookie情報を持たせる方法を紹介します。

1. Cookieを追加したいページのリキッドファイルの最下部に以下のコードを追記します。

    document.cookie = "my_custom_cookie="10"; path =/";

2. カート情報のフッター部分に以下のコードを追記します。今回はテーマDawnを使用しているため、main-cart-footer.liquidの<div class=”cart__blocks”>下に追記します。

      <input id="power" class="field__input" type="hidden" name="attributes[power]" form="cart" value="{{cart.attributes['power']}}" required>
3. 保持しているCookie情報を上で追記したinputタグのvalue属性として持たせたいので、cart.jsに以下のコードを追記します。

var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)my_custom_cookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if( myCookie ){
  document.getElementById('power').value = myCookie;
}

4. 1～3の手順を踏んだ上で、決済が完了し管理画面から注文の詳細を確認すると、画像のように追加の詳細として情報が保存されます。



エンジニアのみなさまへ

株式会社オートプロジェクトでは、中小企業向けのシステム・アプリケーション開発 / 外注サービスを提供しております。

貴社のニーズに応じた柔軟なサポートを行いますので、ぜひお気軽にご相談ください。

中小企業向けシステム・アプリケーション開発 / 外注サービスについて、オートプロジェクトに問い合わせをする