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

In this article, I will show you how to create a button to delete multiple products at once on the Shopify cart screen using jquery.

When you are building a website, there are times when you want to delete products from the cart. The default method to delete items one by one is implemented, but when I wanted to delete them all at once, I had a hard time finding the information I needed. I found a solution to this problem by browsing overseas sites, so I am writing this article as a memo.

The first thing I want to implement is "how to delete all items in the cart at once".

To do this, we need to

(1) Determine the products in the cart.

(2) Set up a button to delete all products at once.

(3) Clear the products in the cart.

We will look at this step-by-step as we need to respond in the following order. Please note that jQuery must be loaded beforehand.

Display the key of the products in the cart

First, get the key of the products in the cart.

By key, you mean {{ cart.line_item.key }}.

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

Roughly speaking, I imagine you get something like the unique ID of the item in your cart!

We will display this on the cart and retrieve it later in the JS. In this case, we will use display:none; to hide the div itself and retrieve it later with JS so that it can be used with any theme. The code is as follows

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

This item.key part is the Key (unique ID) of each product. The above is for all products, but it is also possible to display item.key only for specific products by narrowing down the products and displaying item.key only for specific products, thus allowing you to delete all specific products.

Set up a button to delete all products from the cart.

Next, let's look at setting up a button to clear all products from the cart.

Pressing this button will delete all items from your cart at once! The button says, "I'm a good person.

The button itself does not need to be an a element or a button element, so this time we will use the div element.

<div class="all-remove-button">Eliminate all products</div>.

This completes the preparation on the surface. Now let's write the behind-the-scenes process.

Clear the products in the cart.

Finally, we will write a process to retrieve the item.key of each product and delete them all at once when the "Clear All" button is clicked.

The process itself is done using cart/update.js, which is Shopify's CART API.

The code is as follows

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="/en/cart"; })
;
}

$('.all-remove-button').click(function() {
$




(".




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

The result will look something like this

The process is to add the product to be removed to productRemovers at the timing when the remove button is pressed, and add the product key and the number of items (0) as information respectively. Then, the function that has been set up in advance is called to delete the product.

How to batch delete multiple products in a [Shopify] cart page Summary

This is how to batch delete products in a cart.

This time, we have only shown how to batch delete products, but it is possible to batch delete specific products if you apply this method, so please try to explore various ways to utilize this function!

I'm having so much fun with Shopify that I'm reading all the international articles I can find. I hope to keep you updated on Shopify development in Japanese, so please come back and visit us from time to time!