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
email.html
Knockout template. - Follow a similar format as the
payment.html
template. Copy the childdiv
frompayment.html
and paste it intoemail.html
. - Change the
checkout-step-payment
text tocheckout-step-email
. - Within this
div
, create a newform
element. Copy the form element frompayment.html
and paste it into theemail.html
template. - Remove the
ID
andclass
attributes from theform
element, and replace them with an action that will execute when the Next button is clicked. This should look like:data-bind="submit"
. - 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
div
with the classprimary
. - Within this
div
, create abutton
element with the following attributes:
data-roll="opc-continue"
type="submit"
class="button action continue primary"
- Inside the
button
element, create aspan
element to use the translation function. Define atranslate
attribute and set it equal toNext
surrounded by single quotes. Thetranslate
attribute is a special Magento Knockout binding created for the purpose of translating text.
Creating the navigateToNextStep Function
- In the Knockout component, create a
navigateToNextStep
function after thenavigate
function. - 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.
Enroll to access all lessons, source code & comments.
Enroll now to Unlock