🛒
Shopify Cart APIでカートページの操作（取得 / 追加 / 更新 / 一部削除）
概要
Shopify APIの日本語記事ってまだ少ない&見つけづらいですよね。
この記事ではCart APIでカートページ内の商品情報の取得/追加/更新/一部削除するためのコードを記載します。
カートページの情報取得
fetch('/cart.js')
.then(response => response.json())
.then(data => {
console.log(data);
console.log(data['items'])
})
.catch((error) => {
console.error('Error:', error);
});
補足
- data['items'] にカート内の各商品情報が入ってます。
カートページへの商品追加
const formData = {
items: [
{
id: variantId,
quantity: 1,
properties: {
'オプション1': '利用する'
}
}
]
};
fetch('/cart/add.js', {
method: 'POST',
headers: {
'dataType': 'json',
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.catch((error) => {
console.error('Error:', error);
});
補足
- id
- 商品の variant（商品ページでオプション変更するとURLパラメータに付与される数字） を指定する
- quantity
- カートに追加する商品の数量を指定する
- properties（Line Item Property）
- カートに追加される際、任意の情報を商品情報に付与する。カートページで表示されます。
カートページの情報更新
const formData = {
'line': 1,
'quantity': 1,
'properties': {
'オプション1': '利用する'
}
};
fetch('/cart/change.js', {
method: 'POST',
headers: {
'dataType': 'json',
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.catch((error) => {
console.error('Error:', error);
});
補足
- line
- カートに入っている商品の上から何番目（1以上）を更新するか設定
- idでの指定も可能だが、propertiesが異なる商品が2つ以上カートに入っていると区別できないのでline指定がオススメ
- quantity
- 数量変更したい数値を入れる
- 【商品情報の一部削除】 0を指定するとその商品をカートから削除可能
- properties（Line Item Property）
- propertiesの中身を変更する。この時propertiesが再度作り直される。
- 【propertiesの一部削除】 削除したいpropertyに対してnullを指定するこで削除可能
'properties': {
'オプション1': null
}
参考
Cart API reference
Discussion