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
- Open the
- Follow a similar format as the
payment.htmltemplate. Copy the child
payment.htmland paste it into
- Change the
- Within this
div, create a new
formelement. Copy the form element from
payment.htmland paste it into the
- Remove the
classattributes from the
formelement, and replace them with an action that will execute when the Next button is clicked. This should look like:
- 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
- Code the semantics for the primary button by creating a
divwith the class
- Within this
div, create a
buttonelement with the following attributes:
class="button action continue primary"
- Inside the
buttonelement, create a
spanelement to use the translation function. Define a
translateattribute and set it equal to
Nextsurrounded by single quotes. The
translateattribute is a special Magento Knockout binding created for the purpose of translating text.
Creating the navigateToNextStep Function
- In the Knockout component, create a
navigateToNextStepfunction after the
- This function should call
stepNavigator.next, a function that will automatically navigate to the next step in the checkout process.
- 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.