How to manage cart actions using filters

Overview

This guide will help you to understand how to manage cart actions using filters.

note

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',
  },
};