How can we define twig template based on checkout flow in Commerce 2.x? I am using Drupal Commerce 2.x. I try to build different twig templates based on the checkout flow.

So, I use hook_theme_suggestions_HOOK_alter to register other theme suggestions. However, I can't find any useful variable which we can use in the function.

The following code is what I tried now.

Please give me some advice. 

Thanks a lot.

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bootstrap_sass_theme_suggestions_commerce_checkout_form_alter(array &amp;$suggestions, array $variables) {
    if( $variables['form']['#id']=="commerce-checkout-flow-multistep-default" ){
    //add theme suggestions.
    $suggestions[]='my_new_checkout_template';
    }
}
I found out the answer. Share here if someone needed in the future.

I think if we want to define the twig template based on the checkout flow, we shouldn't create ones using the same plugin. (default is Multistep - Default)

Instead, we need to create a new plugin for the checkout flow. I followed the instruction here. https://docs.drupalcommerce.org/commerce2/developer-guide/checkout/create-custom-checkout-flow

After I finished the custom checkout flow plugin, we can create another flow based on the custom one.

Therefore, we can use Implements hook_theme_suggestions_HOOK_alter() to implement what we need.


/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bootstrap_sass_theme_suggestions_commerce_checkout_form_alter(array &amp;$suggestions, array $variables) {
  $suggestions[] = $variables["form"]["#form_id"];
}