SAP Spartacus 基于行项目的订单取消功能(order cancel)实现

简介: SAP Spartacus 基于行项目的订单取消功能(order cancel)实现
+关注继续查看

进入Order History页面:


image.png


http://localhost:4200/electronics-spa/en/USD/my-account/order/00001075


点击 Cancel Items:


image.png


这个按钮会路由到一个 cancel 页面去:


image.png


选择要cancel的行项目:

image.png

image.png

selector:cx-cancel-order


image.png


点击Continue按钮后的处理函数:continue($event)


image.png


continue函数里,进行另一个路由跳转:


image.png


这说明Commerce Cloud 订单取消是基于行项目的:


image.png



form 的提交请求按钮,没有具体实现,类型为submit,因此需要去最上层,找到form的实现:


image.png


cx-cancel-order-confirmation节点下面,有form节点:


image.png


cx-cancel-order-confirmation


下图第26行的submit函数,即submit按钮点击后的处理函数。


image.png


cancer-order-confirmation.component.ts


image.png


this.userOrderService.cancelOrder


image.png


CancelOrderConfirmationComponent里的实现代码:

save() {
        const orderCode = this.form.value.orderCode;
        const entries = this.form.value.entries;
        const inputs = Object.keys(entries)
            .filter((entryNumber) => entries[entryNumber] > 0)
            .map((entryNumber) => ({
            orderEntryNumber: Number(entryNumber),
            quantity: entries[entryNumber],
        }));
        this.form.reset();
        this.userOrderService.cancelOrder(orderCode, {
            cancellationRequestEntryInputs: inputs,
        });
        this.userOrderService
            .getCancelOrderSuccess()
            .pipe(first(Boolean))
            .subscribe(() => this.afterSave(orderCode));
    }

image.png


订单取消成功后,状态变为Cancelled:


image.png


An invoice has been sent by email.


image.png

image.png



image.png


cancellationAndReturn

image.png


image.png

相关文章
|
2天前
|
前端开发 JavaScript API
借助 SAP 电商云 Spartacus UI 提供的 Schematics 辅助您的前端项目升级
借助 SAP 电商云 Spartacus UI 提供的 Schematics 辅助您的前端项目升级
19 0
|
4月前
|
JavaScript 前端开发 开发者
Spartacus 项目中 scss 文件里的 mergeAll 函数
Spartacus 项目中 scss 文件里的 mergeAll 函数
|
6月前
|
API
Spartacus 项目中的 facade 和 core 文件夹
Spartacus 项目中的 facade 和 core 文件夹
|
6月前
|
前端开发 JavaScript CDN
关于 fontawesome 库在 Spartacus 项目中的应用
关于 fontawesome 库在 Spartacus 项目中的应用
|
6月前
|
JavaScript Shell 数据库连接
Spartacus 项目中 .env-cmdrc 文件的作用是什么?
Spartacus 项目中 .env-cmdrc 文件的作用是什么?
|
6月前
|
JavaScript 前端开发 Java
Hybris Accelerator 的一些局限介绍和 Spartacus 项目的诞生
Hybris Accelerator 的一些局限介绍和 Spartacus 项目的诞生
|
JavaScript 前端开发 Java
Hybris Accelerator 的一些局限介绍和 Spartacus 项目的诞生
Hybris Accelerator 的一些局限介绍和 Spartacus 项目的诞生
71 0
Hybris Accelerator 的一些局限介绍和 Spartacus 项目的诞生
|
资源调度
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
SAP Spartacus一个客户项目无法启用SSR服务器端渲染的实际例子和分析方法
SAP Spartacus一个客户项目无法启用SSR服务器端渲染的实际例子和分析方法
|
资源调度
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
SAP Spartacus 项目执行 yarn build --stats-json 遇到的一些错误消息
推荐文章
更多