Wizards

Wizards are handled by the jQuery Smart Wizard 4 library.

Our initializer will create a wizard in its most basic form. Further options should be provided through editing the js/wizard.js file to include your required parameters, such as events and validation.

1. Include the library in your page

   • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

     <!-- jQuery smartWizard facilitates steppable wizard content -->
     <script type="text/javascript" src="assets/js/jquery.smartWizard.min.js"></script>

     Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

     <!-- jQuery Countdown (displays countdown text to a specified date) -->
     <script type="text/javascript" src="https://unpkg.com/smartwizard@~4.4.1"></script>

2. Load the initializer code in index.js

   • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

     import './wizard';

Wizards are initialized by class wizard on page load.

Below is the basic HTML required to work with a wizard. First child of the .wizard element should be a ul to house the wizard navigation elements. Second child of the .wizard element should be a div with a child div for each wizard step.

And id on each step div allows for linking to the step through both URL or an a on the page.

<div class="wizard">
  <ul>
      <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
      <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
  </ul>

  <div>
      <div id="step-1" class="">
          Step Content
      </div>
      <div id="step-2" class="">
          Step Content
      </div>
      <div id="step-3" class="">
          Step Content
      </div>
      <div id="step-4" class="">
          Step Content
      </div>
  </div>
</div>

By default, our initializer starts each wizard with the following options:

The jQuery Smart Wizard 4 plugin provides an in-depth array of options that can be set upon initialization, including event handlers which can help to validate form content before making ajax calls etc.

Visit the Smart Wizard documentation for full detail on each option.

To initialize your wizard using options that are not specified by default, open js/mrare/wizard.js and edit the options object. Defaults are shown below.

$('.wizard').smartWizard({
  transitionEffect: 'fade',
  showStepURLhash: false,
  toolbarSettings: { toolbarPosition: 'none' },
});