How to manage cart actions using filters
This guide will help you to understand how to manage cart actions using filters.
Overview
This guide will help you to understand how to manage cart actions using filters.
Please update below package versions
"@appmaker-xyz/app-config": "0.3.0",
"@appmaker-xyz/core": "0.4.29-shopify-main-cart-filters-8df612a.0",
"@appmaker-xyz/plugins": "0.2.77-shopify-main-cart-filters-8df612a.0",
"@appmaker-xyz/react-native": "0.4.37-shopify-main-cart-filters-8df612a.0",
"@appmaker-xyz/remote-bundle": "0.0.6-shopify-main-cart-filters-8df612a.0",
"@appmaker-xyz/shopify": "0.3.57-shopify-main-cart-filters-8df612a.0",
"@appmaker-xyz/shopify-core-theme": "1.2.10",
"@appmaker-xyz/themes": "0.2.30",
"@appmaker-xyz/ui": "0.2.26",
"@appmaker-xyz/uikit": "0.2.41",And also use appmaker sdk name as shopify-main-cart-filters while taking a build.
Manage Cart filter
manage-cart filter is used to manage cart actions like add, update, remove etc.
const customCheckoutResponse = {};
addFilter(
'manage-cart',
'custom-namespace',
(response, params, dependencies) => {
const {
checkoutId,
lineItemsToAdd,
lineItemsToUpdate,
lineItemsToRemove,
cartCustomAttributes,
shippingAddress,
applyDiscountCode,
removeDiscountCode,
} = params;
return {
data: {
data: {
node: customResponse,
},
},
};
},
);
Custom cart response Filter
shopify-custom-cart-response filter is used to manage cart response.
addFilter(
'shopify-custom-cart-response',
'custom-namespace',
(response, params, dependencies) => {
const { checkoutId } = params;
const customCartResponse; // Response from custom logic
return {
data: {
data: {
node: customCartResponse,
},
},
};
},
);
Sample customCartResponse
{
id: 'gid://shopify/Checkout/bce6a3de0767e664087c34434b1cb8c5?key=671723d9f3249bd80c7eb9f4a599c6e0',
webUrl:
'https://appmaker-docs.myshopify.com/73486434599/checkouts/bce6a3de0767e664087c34434b1cb8c5?key=671723d9f3249bd80c7eb9f4a599c6e0',
createdAt: '2023-08-30T09:02:02Z',
requiresShipping: true,
email: null,
note: null,
order: null,
customAttributes: [
{
key: 'appmaker_platform',
value: 'android',
},
{
key: 'appmaker_checkout_version',
value: 'v2',
},
{
key: 'app_version',
value: '1.0.0',
},
{
key: 'appmaker_sdk_version',
value: '1.0.0',
},
],
shippingLine: null,
shippingAddress: null,
lineItems: {
edges: [
{
node: {
id: 'gid://shopify/CheckoutLineItem/447759314455430?checkout=bce6a3de0767e664087c34434b1cb8c5',
title: 'Rab Top',
customAttributes: [
{
key: '_appmaker',
value: 'true',
},
],
unitPrice: null,
variant: {
id: 'gid://shopify/ProductVariant/44775931445543',
sku: '31050',
image: {
url: 'https://cdn.shopify.com/s/files/1/0734/8643/4599/products/2015-03-20_Ashley_Look_10_31050_15418_250x.jpg?v=1680516850',
},
product: {
title: 'Rab Top',
id: 'gid://shopify/Product/8219603599655',
onlineStoreUrl: null,
vendor: 'Lilith',
handle: 'rab-top',
productType: "women's tops",
tags: [
'02/28',
'blue',
'cooloff',
'lilith',
'publish',
'SALE',
'salefav2',
'Shot 3/20',
'ss15',
'tops',
'WEEK12',
'woman',
'womens',
],
product_sku: null,
},
compareAtPrice: null,
price: {
amount: '236.6',
currencyCode: 'INR',
},
title: 'XS/S / Blue',
},
quantity: 1,
discountAllocations: [],
},
},
],
},
discountApplications: {
edges: [],
},
appliedGiftCards: [],
lineItemsSubtotalPrice: {
amount: '236.6',
currencyCode: 'INR',
},
subtotalPrice: {
amount: '236.6',
currencyCode: 'INR',
},
totalPrice: {
amount: '236.6',
currencyCode: 'INR',
},
};