如何将 PrestaShop 1.7 结帐手风琴步骤转换为步骤进度条？

Question

我是 PrestaShop 的新手，PHP，我被要求将 PrestaShop 1.7（经典主题）的当前手风琴结帐步骤转换为步骤进度条。我对 CSS 和 JavaScript 有一些足够好的概念，但是当我查看 PrestaShop 文件时，我完全迷路了。 :(

这里是一些代码（注释中的内容是我尝试添加以创建步骤进度条的代码）。 checkout-process.tpl 是个谜：

{foreach from=$steps item="step" key="index"}
  {render identifier  =  $step.identifier
          position    =  ($index + 1)
          ui          =  $step.ui
          {* steps       =  $steps *}
  }
{/foreach}

然后我得到 checkout-step.tpl:

{block name='step'}
{* <div id="checkout-steps">
  <ul id="checkout-steps__bar">
    {foreach from=$steps item="step" key="index"}
    <li id="{$step.identifier}" class="step-title h3">{$step.title}</li>
    {/foreach}
  </ul>
</div> *}

<section id="{$identifier}" class="{[
                              'checkout-step'   => true,
                              '-current'        => $step_is_current,
                              '-reachable'      => $step_is_reachable,
                              '-complete'       => $step_is_complete,
                              'js-current-step' => $step_is_current
                          ]|classnames}">
  <h1 class="step-title h3">
    <i class="material-icons rtl-no-flip done">&#xE876;</i>
    <span class="step-number">{$position}</span>
    {$title}
    <span class="step-edit text-muted">
      <img src="{$urls.img_url}/icn/edit.png" alt="{l s='Update' d='Shop.Theme.Actions'}" class="icn-16" />
      {l s='Edit' d='Shop.Theme.Actions'}</span>
  </h1>

  <div class="content">
    {block name='step_content'}DUMMY STEP CONTENT{/block}
  </div>
</section>
{/block}

我通过编辑CheckoutProcess.php成功获得了标题：

public function render(array $extraParams = array())
    {
        $scope = $this->smarty->createData(
            $this->smarty
        );

        $params = array(
            'steps' => array_map(function (CheckoutStepInterface $step) {
                return array(
                    'identifier' => $step->getIdentifier(),
                    'ui' => new RenderableProxy($step),
                    // Add title to steps array
                    'title' => $step->getTitle(),
                );
            }, $this->getSteps()),
        );

        $scope->assign(array_merge($extraParams, $params));

        $tpl = $this->smarty->createTemplate(
            $this->template,
            $scope
        );

        return $tpl->fetch();
    }

我不认为我在做正确的事，但如果我几乎明白那里发生了什么，我不知道从哪里开始。 -_-” 如果有人得到了一些建议或者更好的建议（人们总是可以梦想）已经尝试过这种修改，我会很高兴提供任何信息、帮助、代码示例！！提前致谢。

Answer 1

我花了一段时间，这可能不是最好的方法，但我通过添加进度条然后使用自定义 CSS 和 JavaScript 覆盖默认行为来管理转换。

它有很多代码，我不确定它是否有用我 post 它在那里，但如果有人需要一些信息或代码，我很乐意分享它！

如何将 PrestaShop 1.7 结帐手风琴步骤转换为步骤进度条？

How to transform PrestaShop 1.7 checkout accordion steps into steps progress bar?

templates

checkout

accordion

prestashop

progress-bar