关于sap:SAP-Spartacus-express-checkout-设计

34次阅读

共计 1264 个字符,预计需要花费 4 分钟才能阅读完成。

所谓 express checkout(疾速结账),是一种超疾速结账表格,通常为回头客设计,可缩小表单字段以确保更快的结账流程。运输、计费和付款信息在站点的一个蕴含区域中提交,从而为客户提供简略和高效的服务。疾速结帐容许用户跳过所有步骤,并在单击“转到结帐”后立刻看到评论摘要页面。

Angular Page Guard 将检查用户是否至多有 1 个送货地址和 1 种付款形式 – 如果有更多,它将抉择默认值。设置好地址后,会抉择以后配置的默认投递形式。

如果所有都胜利了,用户应该被重定向到评论摘要。否则,他将实现结帐步骤。

在评论摘要步骤中,用户将看到事后设置的数据,也有可能更新步骤。

如何启用

该性能由 2 个新的可选属性管制:

  • express 标记位:在默认运输形式和付款形式可用时容许疾速结帐。
  • 数组 defaultDeliveryMode:i.a. 的默认交付模式。用于疾速结帐。按个别偏好(例如 DeliveryModePreferences.LEAST_EXPENSIVE)或特定交付代码的程序设置偏好。
checkout?: {
    //...
    express?: boolean;
    defaultDeliveryMode?: Array<DeliveryModePreferences | string>;
  };

Spartacus 反对下列几种交货模式的偏好设置:

enum DeliveryModePreferences {
  FREE = 'FREE',
  LEAST_EXPENSIVE = 'LEAST_EXPENSIVE', // but not free
  MOST_EXPENSIVE = 'MOST_EXPENSIVE',
}

默认的配置:

  checkout: {
    //...
    express: false,
    defaultDeliveryMode: [DeliveryModePreferences.FREE],
  };

客户能够应用上面的代码让本人的配置失效:

provideConfig({
  //...
  checkout: {
    //...
    express: true,
    defaultDeliveryMode: ['sample-code'],
  },
});

express checkout 的实现代码:

留神第 53 行 debounceTime(0) 的用法。

debounceTime 将源收回的值提早给定的到期工夫。如果在此工夫内有新值达到,则删除先前的挂起值并重置计时器。以这种形式 debounceTime 跟踪最近的值并在给定的到期工夫过来时收回该最近的值。

该算子多用于每秒可触发数十次甚至数百次的事件。最常见的例子是 DOM 事件,例如滚动、鼠标挪动和按键。应用 debouceTime 时,您只关怀最终状态。例如,用户进行滚动时的以后滚动地位,或用户进行输出字符后搜寻框中的最终文本。实际上,应用运算符容许将多个程序事件组合成一个事件,因而只执行一次回调。这能够大大提高性能。

去抖动的常见场景是调整大小、滚动和 keyup/keydown 事件。此外,您应该思考将任何触发过多计算或 API 调用的交互蕴含在去抖动中。

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

正文完
 0