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
- Usage
- Selectors
- getCartData
- getCustomerData
- getShippingRates
- getNeedsShipping
- getHasCalculatedShipping
- getCartTotals
- getCartMeta
- getCartErrors
- isApplyingCoupon
- isCartDataStale
- getCouponBeingApplied
- isRemovingCoupon
- getCouponBeingRemoved
- getCartItem( cartItemKey )
- isItemPendingQuantity( cartItemKey )
- isItemPendingDelete( cartItemKey )
- isCustomerDataUpdating
- isShippingRateBeingSelected
- getItemsPendingQuantityUpdate
- getItemsPendingDelete
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 (seegetShippingRates
selector). - shippingAddress
object
: The shipping address (seegetCustomerData
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 (seegetCartTotals
selector). - errors
array
: The cart errors (seegetCartErrors
selector). - paymentRequirements
object
: The payment requirements for the cart. - extensions
object
: The extensions data.
- coupons
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.
- first_name
- billingAddress
object
: The billing address (same keys as shipping address).
- shippingAddress
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
, andrate
. - 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.
- total_items
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.
- updatingCustomerData
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
ornumber
: 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.
- currency_code
- 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.
- currency_code
- key
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.