Custom step page template

[ange007]

Is it planned to add something like that? I planned to implement it myself and use it for default pages, but I do not want to break everything.

	/**
	 * Step Page
	 */
	public function step_page( $id, $callback ) {
		$is_theme_registered = $this->is_theme_registered();
		$action_url          = $this->theme_license_help_url;

		// Theme Name.
		$theme = ucfirst( $this->theme );

		// Remove "Child" from the current theme name, if it's installed.
		$theme = str_replace( ' Child', '', $theme );

		// Strings passed in from the config file.
		$strings = $this->strings;

		// Text strings.
		$header    = array_key_exists($id . '-header', $strings) ? $strings[$id . '-header'] : '';
		$paragraph = array_key_exists($id, $strings) ? $strings[$id] : '';
		$action    = array_key_exists($id . '-action', $strings) ? $strings[$id . '-action'] : '';
		$label     = array_key_exists($id . '-label', $strings) ? $strings[$id . '-label'] : '';
		$skip      = array_key_exists('btn-' . $id . '-skip', $strings) ? $strings['btn-' . $id . '-skip'] : $strings['btn-skip'];
		$next      = array_key_exists('btn-' . $id . '-next', $strings) ? $strings['btn-' . $id . '-next'] : $strings['btn-next'];
		// $install   = array_key_exists('btn-' . $id . '-activate', $strings) ? $strings['btn-' . $id . '-activate'] : '';
		?>

		<div class="merlin__content--transition">

			<?php echo wp_kses( $this->svg( array( 'icon' => 'license' ) ), $this->svg_allowed_html() ); ?>

			<svg class="icon icon--checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
				<circle class="icon--checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="icon--checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
			</svg>

			<h1><?php echo esc_html( sprintf( $header, $theme ) ); ?></h1>

			<?php if ( is_callable( $callback ) ) { echo $callback( ); } ?></p>
		</div>

		<footer class="merlin__content__footer">
			<a href="<?php echo esc_url( $this->step_next_link() ); ?>" class="merlin__button merlin__button--skip merlin__button--proceed"><?php echo esc_html( $skip ); ?></a>
			<a href="<?php echo esc_url( $this->step_next_link() ); ?>" class="merlin__button merlin__button--next button-next" data-callback="custom" data-key="<?php echo $id; ?>">
				<span class="merlin__button--loading__text"><?php echo esc_html( $next ); ?></span>
				<?php echo wp_kses( $this->loading_spinner(), $this->loading_spinner_allowed_html() ); ?>
			</a>

			<?php wp_nonce_field( 'merlin' ); ?>
		</footer>
		<?php
		$this->logger->debug( __( 'The ' . $id . ' step has been displayed', 'merlin-wp' ) );
	}

	var callbacks = {
		....
		custom: function (btn) {
			var content = new Custom();
			content.init(btn);
		}
	};
	...
	function Custom(btn) {
		var body = $('.merlin__body');
		var complete, notice = $("#custom-text");

		function ajax_callback(r) {

			if (typeof r !== "undefined") {
				setTimeout(function () {
					notice.addClass("lead");
				}, 0);
				setTimeout(function () {
					notice.addClass("success");
					notice.html(r.message);
				}, 600);


				complete();
			} else {
				notice.addClass("lead error");
				notice.html(r.error);
			}
		}

		function do_ajax(btn) {
			jQuery.post(merlin_params.ajaxurl, {
				action: "merlin_custom",
				key: $(btn).attr( 'data-key' ),
				wpnonce: merlin_params.wpnonce,
			}, ajax_callback).fail(ajax_callback);
		}

		return {
			init: function (btn) {
				complete = function () {

					setTimeout(function () {
						$(".merlin__body").addClass('js--finished');
					}, 1500);

					body.removeClass(drawer_opened);

					setTimeout(function () {
						$('.merlin__body').addClass('exiting');
					}, 3500);

					setTimeout(function () {
						window.location.href = btn.href;
					}, 4000);

				};
				do_ajax(btn);
			}
		}
	}

Use:

add_filter( wp_get_theme( )->template . '_merlin_steps', function( $steps ) use ( &$wizard )
{
	$steps[ 'test' ] = [
		'name'		=> esc_html__( 'Test', '{domain}' ),
		'view'		=> function( ) use ( &$wizard )
		{
			echo $wizard->step_page( 'test', function( )
			{
				?>
					<div class="merlin__content--transition">
						<div> TEST </div>
					</div>
				<?php
			} );
		},
		'handler' => function( )
		{
			fw_print( 'test' );
			return true;
		}
	];

	return $steps;
} );

add_action( 'wp_ajax_merlin_custom', function( )
{
	$key = $_POST[ 'key' ];

	if( $key === 'test' )
	{
		echo '+';
	}
	
	wp_die( );
} );