跳到主要内容

结账商店 (wc/store/checkout)

💡 购物车商店和结账商店有什么区别？

购物车商店 (wc/store/cart) 管理和检索关于购物车的的数据，包括商品、客户数据以及优惠券等交互。

结账商店 (wc/store/checkout) 管理和检索与结账过程相关的数据，包括客户 ID、订单 ID 和结账状态。

概述​

结账商店提供了一组选择器，用于访问和管理结账过程中的数据。 这些选择器使开发者能够获取关键信息，例如客户信息、订单状态和其他与结账相关的的数据。

使用方法​

要使用此商店，您需要在任何引用它的模块中导入 checkoutStore StoreDescriptor。 假设 @woocommerce/block-data 已注册为指向 wc.wcBlocksData 的外部依赖，您可以通过以下方式导入 StoreDescriptor：

const { checkoutStore } = '@woocommerce/block-data'

如果未注册，您可以通过以下方式导入：

const { checkoutStore } = window.wc.wcBlocksData

选择器​

getCustomerId​

返回正在由结账块处理的客户的 WordPress 用户 ID。

返回值 ​

  • number: 客户的 WordPress 用户 ID。

示例 ​

const store = select( checkoutStore );
const customerId = store.getCustomerId();

getOrderId​

返回正在由结账块处理的订单的 WooCommerce 订单 ID。

返回值 ​

  • number: WooCommerce 订单 ID。

示例 ​

const store = select( checkoutStore );
const orderId = store.getOrderId();

getOrderNotes​

返回订单备注。

返回值 ​

  • string: 订单备注。

示例 ​

const store = select( checkoutStore );
const orderNotes = store.getOrderNotes();

getRedirectUrl​

返回结账完成后要重定向到的 URL。

返回值 ​

  • string: 要重定向到的 URL。

示例 ​

const store = select( checkoutStore );
const redirectUrl = store.getRedirectUrl();

getExtensionData​

返回由扩展注册的额外数据。

返回值 ​

  • object: 由扩展注册的额外数据。
{
    [ extensionNamespace ]: {
        [ key ]: value,
    },
}

示例 ​

const store = select( checkoutStore );
const extensionData = store.getExtensionData();

getCheckoutStatus​

返回结账过程的当前状态。

返回值 ​

  • string: 结账过程的当前状态。 可能的值包括：pristine、before-processing、processing、after-processing、complete、idle。

示例 ​

const store = select( checkoutStore );
const checkoutStatus = store.getCheckoutStatus();

getShouldCreateAccount​

如果用户选择在下单时创建账户，则返回 true。

返回值 ​

  • boolean: 如果用户选择在下单时创建账户，则返回 true。

示例 ​

const store = select( checkoutStore );
const shouldCreateAccount = store.getShouldCreateAccount();

getUseShippingAsBilling​

如果用户选择将收货地址作为账单地址，则返回 true。

返回值 ​

  • boolean: 如果应该将收货地址用作账单地址，则返回 true。

示例 ​

const store = select( checkoutStore );
const useShippingAsBilling = store.getUseShippingAsBilling();

getEditingBillingAddress​

如果正在编辑账单地址，则返回 true。

返回值 ​

  • boolean: 如果正在编辑账单地址，则返回 true。

示例 ​

const store = select( checkoutStore );
const editingBillingAddress = store.getEditingBillingAddress();

getEditingShippingAddress​

如果正在编辑收货地址，则返回 true。

返回值 ​

  • boolean: 如果正在编辑收货地址，则返回 true。

示例 ​

const store = select( checkoutStore );
const editingShippingAddress = store.getEditingShippingAddress();

hasError​

如果发生错误，则返回 true，否则返回 false。

返回值 ​

  • boolean: 如果发生错误，则返回 true。

示例 ​

const store = select( checkoutStore );
const hasError = store.hasError();

hasOrder​

如果已创建草稿订单，则返回 true，否则返回 false。

返回值 ​

  • boolean: 如果已创建草稿订单，则返回 true。

示例 ​

const store = select( checkoutStore );
const hasOrder = store.hasOrder();

isIdle​

当结账状态为 IDLE 时，此标志为 true。 在加载阻止后，任何对结账状态的更改都会使结账处于此状态。 当在出现错误后可以重试购买时，结账也会处于此状态。

返回值 ​

  • boolean: 如果结账已经有活动，但当前正在等待用户输入，则返回 true。

示例 ​

const store = select( checkoutStore );
const isIdle = store.isIdle();

isBeforeProcessing​

当结账状态为 BEFORE_PROCESSING 时，此标志为 true。 当用户提交结账以进行处理时，结账将处于此状态。

返回值 ​

  • boolean: 如果订单即将被处理，则返回 true。

示例 ​

const store = select( checkoutStore );
const isBeforeProcessing = store.isBeforeProcessing();

isProcessing​

当结账状态为 PROCESSING 时，此标志为真。 结账会处于此状态，当所有在 BEFORE_PROCESSING 状态下触发的事件的观察者都已完成且没有发生错误时。 在此状态下，模块会向服务器发送请求，访问结账端点以处理订单。

返回值 ​

  • boolean: 如果正在进行结账，则返回 true。

示例 ​

const store = select( checkoutStore );
const isProcessing = store.isProcessing();

isAfterProcessing​

当结账状态为 AFTER_PROCESSING 时，此标志为真。 结账会在此状态下，当模块从服务器端处理请求接收到响应后。

返回值 ​

  • boolean: 如果刚刚处理了一个订单，则返回 true。

示例 ​

const store = select( checkoutStore );
const isAfterProcessing = store.isAfterProcessing();

isComplete​

当结账状态为 COMPLETE 时，此标志为真。 结账会在此状态下，当所有在 AFTER_PROCESSING 状态下触发的事件的观察者都已成功完成时。 当结账处于此状态时，购物者的浏览器将被重定向到 redirectUrl 的值（通常是 order-received 路由）。

返回值 ​

  • boolean: 如果订单已完成，则返回 true。

示例 ​

const store = select( checkoutStore );
const isComplete = store.isComplete();

isCalculating​

当订单的总价正在重新计算时，此标志为真。 有许多因素可能触发订单总价的重新计算：添加或移除优惠券、更新配送费率、选择配送费率等。 此标志汇总了所有可能发生的活动（包括可能影响总价计算的服务器请求）。 因此，您无需检查每个单独的状态，只需可靠地检查此布尔值是否为 true（正在计算）或 false（未计算）。

返回值 ​

  • boolean: 如果正在进行更新任何值的请求，则返回 true。

示例 ​

const store = select( checkoutStore );
const isCalculating = store.isCalculating();

prefersCollection​

如果客户选择自提订单，则返回 true，否则返回 false。

返回值 ​

  • prefersCollection boolean: 如果购物者选择自提订单，则返回 true。

示例 ​

const store = select( checkoutStore );
const prefersCollection = store.prefersCollection();

getRegisteredAutocompleteProviders​

返回已注册的地址自动完成提供商 ID 列表。

返回值 ​

  • addressAutocompleteProviders string[]: 注册的地址自动补全提供商 ID 列表。

示例 ​

const store = select( checkoutStore );
const addressAutocompleteProviders = store.getRegisteredAutocompleteProviders();

getActiveAutocompleteProvider​

返回给定地址类型的当前地址自动补全提供商。

参数​

  • type 'billing' | 'shipping': 地址类型。

返回值 ​

  • activeAddressAutocompleteProvider string: 当前针对传入的地址类型，激活的地址自动补全提供商。

示例 ​

const store = select( checkoutStore );
const activeBillingProvider = store.getActiveAutocompleteProvider( 'billing' );

操作​

setPrefersCollection​

将 prefersCollection 标志设置为 true 或 false。

参数 ​

  • prefersCollection boolean: 如果用户希望自取订单，则为 true。

示例 ​

const store = dispatch( checkoutStore );
store.setPrefersCollection( true );

setEditingBillingAddress​

将账单地址设置为编辑状态或折叠状态。注意，如果地址存在无效的字段，则不会设置为折叠状态。

参数 ​

  • isEditing boolean: 如果为 true，则将账单地址设置为编辑状态；如果为 false，则将其设置为折叠状态。

示例 ​

const store = dispatch( checkoutStore );
store.setEditingBillingAddress( true );

setEditingShippingAddress​

将配送地址设置为编辑状态或折叠状态。注意，如果地址存在无效的字段，则不会设置为折叠状态。

参数 ​

  • isEditing boolean: 如果为 true，则将配送地址设置为编辑状态；如果为 false，则将其设置为折叠状态。

示例 ​

const store = dispatch( checkoutStore );
store.setEditingShippingAddress( true );

addAddressAutocompleteProvider​

添加一个地址自动补全提供商。

参数 ​

  • providerId string: 提供商的名称。注意，提供商应使用 wc.addressAutocomplete.registerAddressAutocompleteProvider 进行注册。

示例 ​

const store = dispatch( checkoutStore );
store.addAddressAutocompleteProvider( 'my-address-provider' );

setActiveAddressAutocompleteProvider​

添加一个地址自动补全提供商。

参数 ​

  • providerId string: 设置当前自动补全提供者的 ID。请注意，提供者需要通过 wc.addressAutocomplete.registerAddressAutocompleteProvider 进行注册。
  • addressType 'billing' | 'shipping': 指定当前提供者适用于哪种地址类型。由于账单地址和配送地址可能位于不同的国家，因此每个国家可能需要不同的提供者。

示例 ​

const store = dispatch( checkoutStore );
store.setActiveAddressAutocompleteProvider( 'my-address-provider', 'billing' );