[Shopify]カートページから複数商品をjQueryで一括消去するボタンを設置する方法

今回紹介するのはShopifyのカート画面で複数商品をjqueryで一括消去するボタンを作成する方法です。

結構サイト構築を行っていると、カート内の商品をカートから消去したい時があります。一個ずつ消去する方法はデフォルトで実装されていたりするのですが、一括で消去したいなぁと感じたときに中々情報がなく苦戦しました。そんな時に海外サイトを読み漁り解決方法を見つけたので、今回メモがてら書いていきます。

まず実装したいことは”カート内の商品を全部一括消去する方法”です。

そのために

①カート内に入っている商品を判別

②商品一括消去ボタン設置する

③カート内商品を消去する処理をかく

で対応していく必要があるので、順を追って見ていきます。事前にjQueryの読み込みは必要なので、そちらのみご留意ください。

カート内に入っている商品のキーを表示

まずカートに入っている商品のキーを取得します。

キーというのは {{ cart.line_item.key }} のことですね。

https://shopify.dev/docs/themes/liquid/reference/objects/line_item/#line_item-key

ざっくりいうと、カート内に入っている商品のユニークIDのようなものを取得するイメージです！

これをカート上で表示して、後ほどJSで取得していきます。今回はどんなテーマでも対応できるように、display:none; でdiv自体を非表示にして後ほどJSで取得するようにします。コードは下記です。

<div class="key-wrapper" style="display:none;">
     {% for item in cart.items %}
          <p class="item-keys">{{ item.key }}</p>
     {% endfor %}
</div>

 このitem.keyの部分が各商品のKey（ユニークID）になっています。ちなみに上記は全ての商品を対象としていますが、ここで商品を絞って、特定の商品のみitem.keyを表示することで、特定の商品のみ全消去することも可能です。

商品をカートから一括消去するボタンを設置する

次にカートから全商品を消去するボタンを設置して見ましょう。

このボタンを押すとカートの商品が一括で全消去されますよー！というボタンですね。

ボタン自体はa要素やbutton要素でなくても良いので、今回はdiv要素を使用します。

<div class="all-remove-button">商品を全て消去する</div>

これで表面上の準備は完了しました。あとは裏側の処理を書いていきましょう。

カート内の商品を消去する処理をかく

最後に全消去ボタンをクリックすると各商品のitem.keyを取得して一括消去する処理を書きます。

消去自体はShopifyのCART APIであるcart/update.jsを使用して、商品を消去を行う方法です。

コードは下記のようになります。

Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.ProductRemove = {};

var productRemovers = {}

Shopify.Cart.ProductRemove.remove = function() {
     $.ajax({
          type: 'POST',
          url: '/cart/update.js',
          data: {
               updates: productRemovers
          },
          dataType: 'json',
          success: function() { location.href = '/cart'; }
     });
}

$('.all-remove-button').click(function() {
     $(".item-keys").each(function () {
          var itemKey = $(this).text();
          productRemovers[itemKey] = 0
     });
     Shopify.Cart.ProductRemove.remove();
});

のようになります。

やっている処理としては消去ボタンを押したタイミングでproductRemoversに消去する対象商品を入れて、商品keyと個数0をそれぞれ情報として追加していきます。そして、あらかじめ設定しておいた関数を呼び出して消去させるという感じです。

[Shopify]カートページで複数商品を一括消去する方法 まとめ

以上、カート内で商品を一括消去する方法でした。

今回は商品を一括消去する方法だったのですが、応用すれば特定の商品を一括消去することも可能ですので、ぜひ色々いじって、活用方法を模索してみてください！

Shopifyでできることが増えていく日々がとっても楽しくで、ついつい海外記事も読みあさってしまいます笑　また引き続き日本語でのShopify開発情報を発信していければと思いますので、たまに遊びにきてくださると嬉しいです！