Get current checkout step into (checkout-process.tpl file)

[DARKF3D3]

I added a progress bar to show checkout steps.
The bar has been added into "checkout-process.tpl" just before this foreach loop.

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

This is the html code:

<ol id="progress-bar">
  <li class="step-done">Personal info</li>
  <li class="step-done">Address</li>
  <li class="step-active">Shipping</li>
  <li class="step-to-do">Payment</li>
</ol>

Do you now how can I get current checkout step?
I need it to add "step-" classes based on the step.

[DARKF3D3]

I tried using something like this script but it not working properly, in particular when the checkout skip some steps because already completed.
Instead of using on click funcion I also tried MutationObserver but I got the same result.

$(document).ready(function() {
$("body").click(function() {
	if ($("#checkout-delivery-step").hasClass("-complete")) {
      $("#bar-step1").removeClass().addClass("step-done");
	  $("#bar-step2").removeClass().addClass("step-done");
	  $("#bar-step3").removeClass().addClass("step-done");
	  $("#bar-step4").removeClass().addClass("step-active");
    } else if ($("#checkout-delivery-step").hasClass("-current")) {
      $("#bar-step1").removeClass().addClass("step-done");
	  $("#bar-step2").removeClass().addClass("step-done");
	  $("#bar-step3").removeClass().addClass("step-active");
	  $("#bar-step4").removeClass().addClass("step-todo");
    } else if ($("#checkout-addresses-step").hasClass("-current")) {
      $("#bar-step1").removeClass().addClass("step-done");
	  $("#bar-step2").removeClass().addClass("step-active");
	  $("#bar-step3").removeClass().addClass("step-todo");
	  $("#bar-step4").removeClass().addClass("step-todo");
    } else if ($("#checkout-personal-information-step").hasClass("-current")) {
      $("#bar-step1").removeClass().addClass("step-active");
	  $("#bar-step2").removeClass().addClass("step-todo");
	  $("#bar-step3").removeClass().addClass("step-todo");
	  $("#bar-step4").removeClass().addClass("step-todo");
    }
  });
});

 

[Ali Samie]

I'm looking for a solution to this one too. I just cant find any docs for the render function in smarty files

[Ali Samie]

found it !

@DARKF3D3

as you are in checkout page, the whole page is rendered with order controller

so you can use this code

Context::getContext()->controller->getCheckoutProcess()

in your templates that are rendered by order controller

then you have access to all details

[Lucas.S]

Hello @Ali Samie, i'm in the same position as you were but i can't find my way in this problem. Do you have a working example of what you achieved to do ? I need a multi step checkout with step above the content and the ability to move from one step to another but I can't make it work !

Same question for you @DARKF3D3, did you manage to find a way to do what you wanted to do ? I would love to have some example.

Thanks for your help.

Edited September 22, 2023 by Lucas.S (see edit history)

[Ali Samie]

@Lucas.S just use this line in your templates

Context::getContext()->controller->getCheckoutProcess()

then you have access to all steps and their properties. you can then create buttons for next and previous steps

[Lucas.S]

11 minutes ago, Ali Samie said:

@Lucas.S just use this line in your templates

Context::getContext()->controller->getCheckoutProcess()

then you have access to all steps and their properties. you can then create buttons for next and previous steps

Thanks for your reply @Ali Samie, I tried it but the steps object is private and I it seems that I can't access them easily. Maybe I can use them, but I don't know how ?

[Ali Samie]

7 minutes ago, Lucas.S said:

Thanks for your reply @Ali Samie, I tried it but the steps object is private and I it seems that I can't access them easily. Maybe I can use them, but I don't know how ?

this is my template for the checkout page at this path

mytheme/templates/checkout/_partials/header.tpl

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="checkout-header">
        <div class="hidden-sm-down" id="_desktop_logo">
          {renderLogo}
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="top-logo" id="_mobile_logo"></div>
        </div>
        <div class="checkout-progress">
          {foreach Context::getContext()->controller->getCheckoutProcess()->getSteps() as $index => $step}
            <div class="{[
                        'checkout-progress-step'   => true,
                        '-current'        => $step->isCurrent(),
                        '-reachable'      => $step->isReachable(),
                        '-complete'       => $step->isComplete(),
                        'js-current-step' => $step->isCurrent()
                    ]|classnames}"
              data-index="{$index+1}"
              data-id-checkout-step="{$step->getIdentifier()}" 
              >
              <h1 class="step-title js-step-title">
                {$step->getTitle()}
              </h1>
            </div>
          {/foreach}
        </div>
      </div>
    </div>
  </nav>
{/block}