Magento - 如何将步骤图像添加到结帐

Question

我试图在 Magento 的单页结帐页面的顶部显示进度概览。 我有步骤图标，并且有不同的状态（完成、当前、活动等），但我对如何连接手风琴来确定状态有点迷茫？

在每个面板上，我都可以对其进行编辑并添加到 onclick 事件中，如下所示：

<button type="button" class="button" onclick="updateOpcProgress('login');checkout.setMethod();">......

然后我在我的 updateOpcProgress() 函数中将我的进度图像的 css 类更改为它需要的任何内容。

这会起作用，但它似乎是一种非常低效的方法（另外我必须覆盖所有面板 phtml 文件）（另外，如果他们编辑一个部分，它将不起作用 - 除非我也在编辑点击！）

任何人都知道如何做到这一点？

谢谢

Answer 1

您是否考虑过使用页面上已有的进度块，然后重新设计它？

否则，如果您更喜欢制作新的进度条，您可以修改 opcheckout.js 中的单页结帐 Javascript。您不必修改文件，您可以添加自己的 .js 文件并覆盖一些结帐功能，如下所示：

Checkout.prototype.gotoSection = function(section)
{
    section = $('opc-'+section);
    section.addClassName('allow');
    this.accordion.openSection(section);
    // Call your own progress updater:
    updateOpcProgress(section);
};