Spartacus Add To Cart 按钮的技术实现

简介: 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.displayAddToCartfalse,按钮将有类 '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,这样对话框打开之后,直接敲击回车就能执行添加购物车的操作了。

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

相关文章
|
4月前
|
前端开发 Java API
Spartacus 点了 Configure 按钮后,这些 Group 数据哪里来的?
Spartacus 点了 Configure 按钮后,这些 Group 数据哪里来的?
|
4月前
|
监控 数据挖掘 定位技术
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
|
4月前
|
设计模式 API 数据处理
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
|
4月前
|
缓存 数据处理 UED
Spartacus cart item remove 不会进入到 59 行这个分支
Spartacus cart item remove 不会进入到 59 行这个分支
|
4月前
|
存储 缓存 数据管理
Spartacus cart list item 删除的实现原理
Spartacus cart list item 删除的实现原理
|
4月前
|
前端开发 搜索推荐 JavaScript
Spartacus Cart item 点击了 remove 之后 HTTP Delete 请求的触发逻辑 - Adapter
Spartacus Cart item 点击了 remove 之后 HTTP Delete 请求的触发逻辑 - Adapter
|
4月前
|
开发者 UED
Spartacus cart 点了 remove 之后的 HTTP Delete 请求是怎么触发的
Spartacus cart 点了 remove 之后的 HTTP Delete 请求是怎么触发的
|
4月前
|
前端开发 搜索推荐 开发者
Spartacus empty cart 页面的显示逻辑
Spartacus empty cart 页面的显示逻辑
|
4月前
|
API 前端开发 JavaScript
Spartacus 中 saved cart 的 occ API 请求
Spartacus 中 saved cart 的 occ API 请求
Spartacus 中 saved cart 的 occ API 请求
|
11月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题