首页 > 其他分享 >Spartacus payment types 在 checkout 步骤中发送 HTTP put 请求的实现明细

Spartacus payment types 在 checkout 步骤中发送 HTTP put 请求的实现明细

时间:2023-02-18 21:00:32浏览次数:37  
标签:HTTP 请求 ng put js payment Spartacus

我在我本地的开发环境,执行批处理程序 b2c.bat 可以正常运行 4.3.x 这个版本的 Spartacus,但是 5.0 即 develop 分支就不行,报这个错误:

$ info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. error @typescript-eslint/[email protected]: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14

使用命令行 where ng,发现 Angular CLI 的可执行文件 ng 的位置,是基于 node v14 这个版本的文件夹下面。

环境变量如下,PATH 环境变量的值:

我在上图将 path 环境变量里的 Node.js 配置成 16,但是 Angular CLI 仍然是老的 12 版本,所以需要升级。

使用命令行 npm uninstall -g @angular/cli 将 Node.js 16 文件夹下的 ng 先卸载。

卸载成功:

Node.js 16 下面已经看不到 ng 这个文件了:

然后使用命令行进行全局安装:

npm install -g @angular/cli

不加任何参数的话,版本号太高了:15.1.5

使用 Angular CLI 14.2.3 可以成功编译 Spartacus 5.0:

编译成功的截图如下:

5.0 的 payment details,在 dropdown list 里切换 Payment type,不会有 HTTP 请求产生。

仅当点击 continue 按钮时才会触发事件。

Continue 按钮所在的 form Component 的选择器:cx-payment-form

点了 submit 后执行什么函数?在 form 的 ngSubmit 事件绑定函数上能够找到答案:next 函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gxzqpkF-1676028574844)(null)]

我们在 next 函数里设置断点,点击 continue 按钮,断点触发:

发送事件:

这是一个 command pattern:

request 请求的目的是询问一个 postUrl:

这个 postUrl 的值,包含在 HTTP post 请求的 response 里:

command 执行的 payload 在调试器里能够看到:

command pattern 其实并没有神秘之处,本质仍然是在 service 类里调用 connector 类来发送 HTTP 请求:

标签:HTTP,请求,ng,put,js,payment,Spartacus
From: https://www.cnblogs.com/sap-jerry/p/17133590.html

相关文章

  • Spartacus Storefront 的 wishlist 设计
    Storefront的客户可以从产品详细信息页面将产品添加到愿望清单。如果未登录,“添加到愿望清单”选项将指示需要先登录才能将产品添加到愿望清单。将项目添加到愿望清单后......
  • nginx启用http2不生效
    Nginx启用http2不生效,可以检查openssl版本是不是过低查看当前openssl版本opensslversionOpenSSL1.0.1e-fips11Feb2013查看完版本可知,当前版本是1.0.1的,版本过老,需......
  • http client
    HttpClientHttpClient是idea的插件简单案例:@PostMapping("/greeting")publicStringpostGreeting(@RequestBodyUseruser){return"HelloWorl......
  • SpringBoot: 自定义HttpMessageConverter
    一、定义类继承自AbstractHttpMessageConverterpackagecn.edu.tju.config;importcn.edu.tju.UserInfo;importorg.springframework.http.HttpInputMessage;importorg.spr......
  • openwrt_编写动态页面.uHTTPd.lua_独立于luci之外
    openwrt_编写动态页面.uHTTPd.lua_独立于luci之外转载注明来源:本文链接来自osnosn的博客,写于2023-02-17.参考【ExampleofwebinterfaceusinguHTTPdandLua】......
  • inputbox-inputquery-messagedlg
    InputBoxprocedureTForm1.Button1Click(Sender:TObject);varstr:string;beginstr:=InputBox('输入窗口标题','输入提示','默认输入内容');Label4.Capti......
  • js的几种循环方式-key值的解释-数组,对象的检测与更新-input事件-v-model双向数据绑定
    目录js的几种循环方式-key值的解释-数组,对象的检测与更新-input事件-v-model双向数据绑定-过滤案例-事件修饰符-按键修饰符-表单控制今日内容概要今日内容详细1js的几种......
  • HTTPS 相比于 HTTP 而言,其安全性要高出许多
    HTTPS相比于HTTP而言,其安全性要高出许多。首先,HTTPS是基于SSL/TLS协议,而这种协议本身就具备许多安全机制,比如证书验证和数据加密以及消息完整性的校验等。其次,HTTPS......
  • Qt Embedded之二:Input 输入系统
    相对于没有视窗系统,鼠标、键盘、触摸板输入直接从evdev读取或者使用第三方的库实现比如libinput、tslib。这需要/dev/input/event*可以被用户读取。Eglfs和Linuxfb内部......
  • 如何批量检测隧道HTTP代理的可用性?
    本质上来说,检测隧道HTTP代理的可用性就是检测HTTP代理的可用性,目前市面上常见的方法有如下几种:一、常用软件利用常用的日用软件当中的“设置”,使用HTTP代理,填写对应ip代理的......