Prestashop 1.7 结账页地址后展示配送步骤 前端调整方法问询

实现前提：主题覆写规范 #

所有修改均采用主题覆写方式实现，不改动核心代码，不影响原有底层业务逻辑：

• 结账模板覆写路径：/themes/你的自定义主题/templates/checkout/
• 前端JS逻辑覆写路径：/themes/你的自定义主题/assets/js/checkout/

步骤1：调整结账步骤配置 #

Prestashop 1.7 原生结账步骤定义存放在核心checkout.js的steps数组中，你可以在自定义主题的JS文件中覆写该配置，适配你的需求：

// 覆写后的自定义步骤配置示例
const customCheckoutSteps = [
  {id: 'login', name: '登录/注册', isCompleted: window.ps_checkout.step >= 1},
  {id: 'address_shipping', name: '地址与配送', isCompleted: window.ps_checkout.step >= 2},
  {id: 'payment', name: '支付方式', isCompleted: window.ps_checkout.step >= 3},
  {id: 'summary', name: '订单确认', isCompleted: window.ps_checkout.step >= 4}
]

同步修改进度条模板checkout/_partials/progress-bar.tpl，适配4个步骤的高亮、置灰状态，匹配设计稿效果。

步骤2：拆分合并模板内容 #

合并地址与配送步骤模板 #

将原生独立的地址模板address.tpl和配送模板shipping.tpl整合到同一个步骤模板内：

• 上半部分保留地址表单编辑、确认逻辑
• 下半部分放置配送方式选择模块，地址未提交确认前默认给配送模块加disabled类置灰，地址提交成功后自动解除禁用

拆分支付与订单汇总模板 #

原生payment.tpl默认同时包含支付选择和订单汇总代码，做拆分处理：

• 保留payment.tpl仅作为支付方式选择步骤，删除原有汇总代码和订单提交按钮，选择支付方式后点击下一步跳转汇总步骤
• 新建summary.tpl模板，放入抽离的订单明细、金额计算、协议勾选、订单提交按钮代码，作为最后一个步骤的展示内容

步骤3：适配交互校验逻辑 #

所有底层接口完全复用原生逻辑，仅调整前端交互规则：

• 地址提交校验：地址表单提交成功后，不跳转独立步骤，直接触发当前步骤内的配送方式加载、解除禁用，保留原生运费自动计算逻辑
• 配送选择校验：选完配送方式后，调用原生ps_checkout.goToStep()方法跳转到支付步骤
• 支付选择校验：选完支付方式后将选中标识存入sessionStorage，跳转到汇总步骤时自动带出，提交订单时将支付标识和原有参数一起传给原生订单提交接口即可
• 调整goToStep方法的步骤计数规则，匹配你自定义的4步逻辑即可，无需改写内部业务请求逻辑

注意事项 #

• 所有修改均在自定义主题目录下完成，升级Prestashop版本不会覆盖调整内容
• 无需修改任何后端业务逻辑，原生结账的地址校验、运费计算、支付对接、订单生成逻辑完全复用
• 测试覆盖访客结账、登录用户结账、多地址配送、多支付方式场景，确保原有校验规则正常生效

内容的提问来源于stack exchange，提问作者Patryk