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

Question

I'm pretty new to PrestaShop and PHP, I was asked to transform the current accordion checkout steps of PrestaShop 1.7 (classic theme) into a steps progress bar. I've got some good enough notions of CSS and a bit of JavaScript but I'm totally at lost when I look at the PrestaShop files. :(

Here some code (what's in comment is what I tried to add to create the steps progress bar). The checkout-process.tpl is a mystery:

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

Then I've got the 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}

I managed to got the title by editing 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();
    }

I don't think I'm doing the right thing but if I almost understood what's happening there, I've got no clue where to begin. -_-" If anybody got some advices or even better (one can always dream) already attempt this kind of modification, I'll be glad for any information, help, code example!! Thanks in advance.

Answer 1

It took me a while and it's probably not the best way to go, but I managed the transformation by adding my progress bar then overriding the default behaviour with custom CSS and JavaScript.

It's a lot of code, I'm not sure it's useful I post it there but if anyone want some information or the code, I will share it gladly!