Adding contact preferences to the checkout

With our component now working on the customer's My Account page, let's go ahead and add it to the checkout's Review & Payments step as well.

By tapping into the checkout_index_index layout handle, and nesting our component under the desired children element, we can easily add it to the checkout page. We do so with the <MODULE_DIR>/view/frontend/layout/checkout_index_index.xml file, as follows:

<page>
 <body>
  <referenceBlock name="checkout.root">
   <arguments>
    <argument name="jsLayout" xsi:type="array">
     <item name="components" xsi:type="array">
      <item name="checkout" xsi:type="array">
       <item name="children" xsi:type="array">
        <item name="steps" xsi:type="array">
         <item name="children" xsi:type="array">
          <item name="billing-step" xsi:type="array">
           <item name="children" xsi:type="array">
            <item name="payment" xsi:type="array">
             <item name="children" xsi:type="array">
              <item name="afterMethods" xsi:type="array">
               <item name="children" xsi:type="array">
                <item name="contact-preferences" xsi:type="array">
                 <item name="component" xsi:type="string">Magelicious_ContactPreferences/js/view/contact-preferences</item>
                <!-- closing tags -->

The nesting structure of checkout_index_index.xml is quite robust. There are several places where we can actually insert our own component. Most of the time, this might be trial and error. In this case, we opted for the children area of afterMethods. This should position it under the checkout's Review & Payments step, right after the payments method list.

Table of Contents for Adding contact preferences to the checkout

Create new playlist

Sign In

Sign Up

Table of Contents for
Adding contact preferences to the checkout