Spartacus Add To Cart 按钮的技术实现

Add to Cart 按钮如下：

找到其实现的 Angular Component：

实现该按钮的元素：

  <button
    *ngIf="hasStock"
    [ngClass]="
      options?.displayAddToCart
        ? 'btn btn-tertiary'
        : 'btn btn-primary btn-block'
    "
    type="submit"
    [disabled]="quantity <= 0 || quantity > maxQuantity"
  >

首先，让我们分析这个 Angular Component 的 HTML 源代码的语义。这段代码是一个按钮元素，具有一些 Angular 指令和属性，让我们逐步分析：

1. <button> 元素：
   这是一个按钮元素，用于触发某种操作，比如提交表单。按钮是用户与应用程序交互的重要部分。
2. *ngIf="hasStock"：
   这是 Angular 的结构性指令 *ngIf，用于根据条件动态渲染或移除元素。在这里，按钮仅在 hasStock 变量为真时显示。
3. [ngClass]="..."
   这是 Angular 的属性绑定，用于动态设置元素的类。类的选择取决于 options?.displayAddToCart 的值。如果为真，按钮将具有 'btn btn-tertiary' 类，否则将具有 'btn btn-primary btn-block' 类。
4. type="submit"：
   这是 HTML 按钮的属性，指定按钮的类型。在这里，按钮的类型被设置为 "submit"，这通常用于提交表单。
5. [disabled]="quantity <= 0 || quantity > maxQuantity"：
   这是另一个属性绑定，用于动态设置按钮的禁用状态。按钮将在 quantity 小于等于 0 或大于 maxQuantity 时被禁用。

现在，让我们通过示例进一步说明这些概念：

假设在组件的 TypeScript 代码中有以下定义：

// 组件类
export class MyComponent {
  hasStock: boolean = true;
  options: { displayAddToCart: boolean } = { displayAddToCart: true };
  quantity: number = 5;
  maxQuantity: number = 10;
}

在这个例子中，按钮会显示，因为 hasStock 是真值。根据 options?.displayAddToCart 的值，按钮的类将是 'btn btn-tertiary'。按钮不会被禁用，因为 quantity 大于 0 且小于等于 maxQuantity。

如果我们将 hasStock 设置为 false，按钮将不会显示。如果 options.displayAddToCart 为 false，按钮将有类 'btn btn-primary btn-block'。如果 quantity 设置为 0 或大于 maxQuantity，按钮将被禁用。

这个组件的HTML代码是一个具有条件渲染、动态类绑定和动态禁用状态的按钮，这使得按钮的外观和交互能够根据组件状态进行动态调整。

form submit 绑定了一个事件处理函数：

创建 UI Event，便于监听这个事件的实现者弹出对话框：

监听者显示 Model Dialog：

  protected openModal(event: CartUiEventAddToCart): void {
    const addToCartData = {
      productCode: event.productCode,
      quantity: event.quantity,
      numberOfEntriesBeforeAdd: event.numberOfEntriesBeforeAdd,
      pickupStoreName: event.pickupStoreName,
    };

    const dialog = this.launchDialogService.openDialog(
      LAUNCH_CALLER.ADDED_TO_CART,
      undefined,
      undefined,
      addToCartData
    );

    if (dialog) {
      dialog.pipe(take(1)).subscribe();
    }
  }

这是 Modal Dialog 的实现 Component：AddedToCartDialogComponent

动态创建该 Component 的实例。

tabindex = -1

focus config 是硬编码的 Json 对象：

如果设置成空对象，就可以双击选中了。

Autofocus 设置为 button，这样对话框打开之后，直接敲击回车就能执行添加购物车的操作了。

注释掉之后，又可以重新选中文字了。