Create a button to navigate to the next checkout step

Next, we will be adding a Next button to the email checkout step, which will allow users to proceed to the shipping step. This will be done by modifying the email.html template and creating a new function in the Knockout component.

Modifying the email.html Template

1. Open the email.html Knockout template.
2. Follow a similar format as the payment.html template. Copy the child div from payment.html and paste it into email.html.
3. Change the checkout-step-payment text to checkout-step-email.
4. Within this div, create a new form element. Copy the form element from payment.html and paste it into the email.html template.
5. Remove the ID and class attributes from the form element, and replace them with an action that will execute when the Next button is clicked. This should look like: data-bind="submit".
6. Define the function that will execute when the form is submitted: "navigatToNextStep". This function will be created in the next section.

Coding the Next Button

1. Code the semantics for the primary button by creating a div with the class primary.
2. Within this div, create a button element with the following attributes:

• • data-roll="opc-continue"
  • type="submit"
  • class="button action continue primary"

1. Inside the button element, create a span element to use the translation function. Define a translate attribute and set it equal to Next surrounded by single quotes. The translate attribute is a special Magento Knockout binding created for the purpose of translating text.

Creating the navigateToNextStep Function

1. In the Knockout component, create a navigateToNextStep function after the navigate function.
2. This function should call stepNavigator.next, a function that will automatically navigate to the next step in the checkout process.
3. Save the file.

Now, when you go back to the front end of the site and refresh, you will see the Next button. When clicked, it will take you to the next checkout step.