株式会社オートプロジェクト

Columnコラム
2023年5月12日
Shopify|ShopifyでカートにCookie情報を持たせる方法

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

  1. Cookieを追加したいページのリキッドファイルの最下部に以下のコードを追記します。
  2.     document.cookie = "my_custom_cookie="10"; path =/";
  3. カート情報のフッター部分に以下のコードを追記します。今回はテーマDawnを使用しているため、main-cart-footer.liquidの<div class=”cart__blocks”>下に追記します。
  4.       <input id="power" class="field__input" type="hidden" name="attributes[power]" form="cart" value="{{cart.attributes['power']}}" required>
  5. 保持しているCookie情報を上で追記したinputタグのvalue属性として持たせたいので、cart.jsに以下のコードを追記します。
  6. var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)my_custom_cookie\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    if( myCookie ){
      document.getElementById('power').value = myCookie;
    }
  7. 1~3の手順を踏んだ上で、決済が完了し管理画面から注文の詳細を確認すると、画像のように追加の詳細として情報が保存されます。