AppmakerDeveloper

useCartActions

This hook will help you to add multiple items to the cart.

Overview

This hook will help you to add multiple items to the cart.

Props

NameTypeDescription
manageCartFunctionFunction to manage cart
cartActionLoadingBooleanLoading state of the cart action

Usage

  1. Add line items to the cart

import { useCartActions } from '@appmaker-xyz/shopify';

export default function ProductBundleDetail() {
  const { manageCart, cartActionLoading }  = useCartActions({});

  // Array of line items to add to cart
  const lineItemsToAdd = [
                  {
                    variantId,
                    quantity: 1,
                    customAttributes: [],
                  },
                ]; 

  const addToCart = () => {
    manageCart({
      lineItemsToAdd,
    });
  };

    return (
        <Button
        onPress={addToCart}
        loading={cartActionLoading}
        >
        Add to cart
        </Button>
    );
}
  1. Remove line items from the cart

import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

  const removeFromCart = () => {
    manageCart({
      lineItemsToRemove: [cartLineItemId], // Array of line items to remove from cart
    });
  };

    return (
        <Button
        onPress={removeFromCart}
        loading={cartActionLoading}
        >
        Remove from cart
        </Button>
    );
}
  1. Update line items in the cart

import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

 let lineItem = [
      {
        variantId
        quantity
        customAttributes
      },
    ];

  const updateCart = () => {
    manageCart({
      lineItemsToUpdate: lineItem
    });
  };

    return (
        <Button
        onPress={updateCart}
        loading={cartActionLoading}
        >
        Update cart
        </Button>
    );
}

4 . Apply discount code to the cart


import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

  const applyDiscount = () => {
    manageCart({
      applyDiscountCode: 'DISCOUNT_CODE'
    });
  };

    return (
        <Button
        onPress={applyDiscount}
        loading={cartActionLoading}
        >
        Apply discount
        </Button>
    );
}
  1. Remove discount code from the cart

import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

  const removeDiscount = () => {
    manageCart({
      removeDiscountCode: 'DISCOUNT_CODE'
    });
  };

    return (
        <Button
        onPress={removeDiscount}
        loading={cartActionLoading}
        >
        Remove discount
        </Button>
    );
}
  1. Update cart page state

import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

    manageCart({
       updateCartPageStateRequired: true,
    });
}
  1. Show toast message

import { useCartActions } from '@appmaker-xyz/shopify';

export default function CartItem() {
  const { manageCart, cartActionLoading }  = useCartActions({});

    manageCart({
       showMessage: true,
    });
  
}

Notes

For updating cart attributes, you can use the action UPDATE_CART_CUSTOM_ATTRIBUTES

On this page

OverviewPropsUsageNotes