woocommerce/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/cart.md

15 KiB

Cart Store (wc/store/cart)

💡 What's the difference between the Cart Store and the Checkout Store?

The Cart Store (wc/store/cart) manages and retrieves data about the shopping cart, including items, customer data, and interactions like coupons.

The Checkout Store (wc/store/checkout) manages and retrieves data related to the checkout process, customer IDs, order IDs, and checkout status.

Table of Contents

Overview

The Cart Store provides a collection of selectors and methods to manage and retrieve cart-related data for WooCommerce Blocks. It offers functionality ranging from fetching cart details to managing customer interactions, such as applying coupons or updating shipping information.

Usage

To utilize this store you will import the CART_STORE_KEY in any module referencing it. Assuming @woocommerce/block-data is registered as an external pointing to wc.wcBlocksData you can import the key via:

const { CART_STORE_KEY } = window.wc.wcBlocksData;

Selectors

getCartData

Returns the Cart data from the state.

Returns

  • object: The current cart data with the following keys:
    • coupons array: The coupon items in the cart.
    • shippingRates array: The cart shipping rates (see getShippingRates selector).
    • shippingAddress object: The shipping address (see getCustomerData selector).
    • billingAddress object: The billing address.
    • items array: The cart items.
    • itemsCount number: The total number of items in the cart
    • itemsWeight number: The total weight of items in the cart.
    • crossSells array: The cross sells items.
    • needsPayment boolean: If the cart needs payment.
    • needsShipping boolean: If the cart needs shipping.
    • hasCalculatedShipping boolean: If the cart has calculated shipping.
    • fees array: The cart fees.
    • totals object: The cart totals (see getCartTotals selector).
    • errors array: The cart errors (see getCartErrors selector).
    • paymentRequirements object: The payment requirements for the cart.
    • extensions object: The extensions data.

Example

const store = select( 'wc/store/cart' );
const cartData = store.getCartData();

getCustomerData

Returns the shipping and billing address from the state.

Returns

  • object: The current shipping and billing address with the following keys:
    • shippingAddress object: The shipping address with the following keys:
      • first_name string: The first name.
      • last_name string: The last name.
      • company string: The company name.
      • address_1 string: The address line 1.
      • address_2 string: The address line 2.
      • city string: The city name.
      • state string: The state name.
      • postcode string: The postcode.
      • country string: The country name.
    • billingAddress object: The billing address (same keys as shipping address).

Example

const store = select( 'wc/store/cart' );
const customerData = store.getCustomerData();

getShippingRates

Returns the shipping rates from the state.

Returns

  • array: The shipping rates.

Example

const store = select( 'wc/store/cart' );
const shippingRates = store.getShippingRates();

getNeedsShipping

Queries whether the cart needs shipping.

Returns

  • boolean: True if the cart needs shipping.

Example

const store = select( 'wc/store/cart' );
const needsShipping = store.getNeedsShipping();

getHasCalculatedShipping

Queries whether the cart shipping has been calculated.

Returns

  • boolean: True if the shipping has been calculated.

Example

const store = select( 'wc/store/cart' );
const hasCalculatedShipping = store.getHasCalculatedShipping();

getCartTotals

Returns the cart totals from state.

Returns

  • object: The current cart totals with the following keys:
    • total_items string: The sum total of items in the cart without discount, tax or shipping.
    • total_items_tax string: The total tax on all items before discount.
    • total_fees string: The total transaction fees.
    • total_fees_tax string: The tax on the total transaction fees.
    • total_discount string: The total discount applied to the cart.
    • total_discount_tax string: The tax applied to the total discount amount.
    • total_shipping string: The total shipping cost.
    • total_shipping_tax string: The tax applied to the total shipping cost.
    • total_tax string: The total tax applied to the cart.
    • total_price string: The total price of the cart including discount, tax or shipping.
    • tax_lines array of object: The tax lines: name, price, and rate.
    • currency_code string: The currency code for the cart.
    • currency_symbol string: The currency symbol for the cart.
    • currency_minor_unit integer: The currency minor unit for the cart.
    • currency_decimal_separator string: The currency decimal separator for the cart.
    • currency_thousand_separator string: The currency thousand separator for the cart.
    • currency_prefix string: The currency prefix for the cart.
    • currency_suffix string: The currency suffix for the cart.

Example

const store = select( 'wc/store/cart' );
const cartTotals = store.getCartTotals();

getCartMeta

Returns the cart meta from state.

Returns

  • object: The current cart meta with the following keys:
    • updatingCustomerData boolean: If the customer data is being updated.
    • updatingSelectedRate boolean: If the selected rate is being updated.
    • isCartDataStale boolean: If the cart data is stale.
    • applyingCoupon string: The coupon code being applied.
    • removingCoupon string: The coupon code being removed.

Example

const store = select( 'wc/store/cart' );
const cartMeta = store.getCartMeta();

getCartErrors

Returns the cart errors from state if cart receives customer facing errors from the API.

Returns

  • array: The cart errors.

Example

const store = select( 'wc/store/cart' );
const cartErrors = store.getCartErrors();

isApplyingCoupon

Queries whether a coupon is being applied.

Returns

  • boolean: True if a coupon is being applied.

Example

const store = select( 'wc/store/cart' );
const isApplyingCoupon = store.isApplyingCoupon();

isCartDataStale

Queries whether the cart data is stale.

Returns

  • boolean: True if the cart data is stale.

Example

const store = select( 'wc/store/cart' );
const isCartDataStale = store.isCartDataStale();

getCouponBeingApplied

Returns the coupon code being applied.

Returns

  • string: The coupon code being applied.

Example

const store = select( 'wc/store/cart' );
const couponBeingApplied = store.getCouponBeingApplied();

isRemovingCoupon

Queries whether a coupon is being removed.

Returns

  • boolean: True if a coupon is being removed.

Example

const store = select( 'wc/store/cart' );
const isRemovingCoupon = store.isRemovingCoupon();

getCouponBeingRemoved

Returns the coupon code being removed.

Returns

  • string: The coupon code being removed.

Example

const store = select( 'wc/store/cart' );
const couponBeingRemoved = store.getCouponBeingRemoved();

getCartItem( cartItemKey )

Returns a cart item from the state.

Parameters

  • cartItemKey string: The cart item key.

Returns

  • object: The cart item with the following keys:
    • key string: The cart item key.
    • id number: The cart item id.
    • catalog_visibility string: The catalog visibility.
    • quantity_limits object: The quantity limits.
    • name string: The cart item name.
    • summary string: The cart item summary.
    • short_description string: The cart item short description.
    • description string: The cart item description.
    • sku string: The cart item sku.
    • low_stock_remaining null or number: The low stock remaining.
    • backorders_allowed boolean indicating if backorders are allowed.
    • show_backorder_badge boolean indicating if the backorder badge should be shown.
    • sold_individually boolean indicating if the item is sold individually.
    • permalink string: The cart item permalink.
    • images array: The cart item images.
    • variation array: The cart item variation.
    • prices object: The cart item prices with the following keys:
      • currency_code string: The currency code.
      • currency_symbol string: The currency symbol.
      • currency_minor_unit number: The currency minor unit.
      • currency_decimal_separator string: The currency decimal separator.
      • currency_thousand_separator string: The currency thousand separator.
      • currency_prefix string: The currency prefix.
      • currency_suffix string: The currency suffix.
      • price string: The cart item price.
      • regular_price string: The cart item regular price.
      • sale_price string: The cart item sale price.
      • price_range string: The cart item price range.
    • totals object: The cart item totals with the following keys:
      • currency_code string: The currency code.
      • currency_symbol string: The currency symbol.
      • currency_minor_unit number: The currency minor unit.
      • currency_decimal_separator string: The currency decimal separator.
      • currency_thousand_separator string: The currency thousand separator.
      • currency_prefix string: The currency prefix.
      • currency_suffix string: The currency suffix.
      • line_subtotal string: The cart item line subtotal.
      • line_subtotal_tax string: The cart item line subtotal tax.
      • line_total string: The cart item line total.
      • line_total_tax string: The cart item line total tax.

Example

const store = select( 'wc/store/cart' );
const cartItem = store.getCartItem( cartItemKey );

isItemPendingQuantity( cartItemKey )

Queries whether a cart item is pending quantity.

Parameters

  • cartItemKey string: The cart item key.

Returns

  • boolean: True if the cart item is pending quantity.

Example

const store = select( 'wc/store/cart' );
const isItemPendingQuantity = store.isItemPendingQuantity( cartItemKey );

isItemPendingDelete( cartItemKey )

Queries whether a cart item is pending delete.

Parameters

  • cartItemKey string: The cart item key.

Returns

  • boolean: True if the cart item is pending delete.

Example

const store = select( 'wc/store/cart' );
const isItemPendingDelete = store.isItemPendingDelete( cartItemKey );

isCustomerDataUpdating

Queries whether the customer data is being updated.

Returns

  • boolean: True if the customer data is being updated.

Example

const store = select( 'wc/store/cart' );
const isCustomerDataUpdating = store.isCustomerDataUpdating();

isShippingRateBeingSelected

Queries whether a shipping rate is being selected.

Returns

  • boolean: True if a shipping rate is being selected.

Example

const store = select( 'wc/store/cart' );
const isShippingRateBeingSelected = store.isShippingRateBeingSelected();

getItemsPendingQuantityUpdate

Retrieves the item keys for items whose quantity is currently being updated.

Returns

  • string[]: An array with the item keys for items whose quantity is currently being updated.

Example

const store = select( 'wc/store/cart' );
const itemsPendingQuantityUpdate = store.getItemsPendingQuantityUpdate();

getItemsPendingDelete

Retrieves the item keys for items that are currently being deleted.

Returns

  • string[]: An array with the item keys for items that are currently being deleted.

Example

const store = select( 'wc/store/cart' );
const itemsPendingDelete = store.getItemsPendingDelete();

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.