I am trying to add an instore shipping checkbox above the Shipping Address information in checkout. I am not the most adept Magento2 developer, that's for sure. I have been stuck on this for over a week.

I have followed the instructions here: http://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_form.html to no avail.

I have a script that rebuilds the entire site from scratch every time so I know caching is not the problem. I have created a very basic module and have verified it is loaded and active as well. Included are the files I have added to attempt to add a checkbox, maybe it will be a clue as to where I've gone wrong. The checkbox simply doesn't show up. Is it possible this is because I'm using Onepage checkout? Is there another way of doing this? Any hints on debugging this?


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="checkout.root">
            <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="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="before-form" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <!-- Start container -->
                                                            <item name="instore-shipping-form-container" xsi:type="array">
                                                                <item name="component" xsi:type="string">/Premiergroup/InStoreShipping/js/view/custom-checkout-form</item>
                                                                <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">Premiergroup/InStoreShipping/custom-checkout-form</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="custom-checkout-form-fieldset" xsi:type="array">
                                                                        <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <!-- the following display area is used in template (see below) -->
                                                                        <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="checkbox_field" xsi:type="array">
                                                                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
                                                                                <item name="config" xsi:type="array">
                                                                                    <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                                                                                    <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                    <item name="template" xsi:type="string">ui/form/field</item>
                                                                                    <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
                                                                                <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
                                                                                <item name="label" xsi:type="string">I want in-store shipping and pickup</item>
                                                                                <item name="sortOrder" xsi:type="string">1</item>
                                                                <!-- End container -->


/*global define*/
], function(Component) {
'use strict';
return Component.extend({
    initialize: function () {
        // component initialization logic
        return this;

     * Form submit handler
     * This method can have any name.
    onSubmit: function() {
        // trigger form validation
        this.source.set('params.invalid', false);

        // verify that form data is valid
        if (!this.source.get('params.invalid')) {
            // data is retrieved from data provider by value of the customScope property
            var formData = this.source.get('instoreForm');
            // do something with form data


<form id="instore-shipping-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
    <fieldset class="fieldset">
        <legend data-bind="i18n: 'Instore Shipping'"></legend>
        <!-- ko foreach: getRegion('instore-shipping-form-fields') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
  • i did the same thing but not working for me... can you please help to add this in checkout page ? – Sarfaraj Sipai Dec 19 '17 at 11:10

The reason it's not showing up is that you have some errors in your path declarations and also because UI components use knockout html templates, not the .phtml kind which are used for blocks.

corrected component path in layout:

<item name="component" xsi:type="string">Premiergroup_InStoreShipping/js/view/custom-checkout-form</item>

Note underscore between vendor and module name.

Your template should be this: {module_dir}/view/frontend/web/template/custom-checkout-form.html

You declare it in the layout like:

<item name="template" xsi:type="string">Premiergroup_InStoreShipping/custom-checkout-form</item>
|improve this answer|||||
  • Thank you so much for the help. I had forgotten the underscore needed. I made these changes, but still no dice. Anything else you can see wrong there? – Cinder Biscuits Apr 25 '17 at 2:50
  • 1
    <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item> doesn't match the getRegion call in your template. Also you are missing one </item> closing tag in your layout. – Aaron Allen Apr 25 '17 at 3:24
  • how can i add checkbox like terms and condition in payment tab with validataion..? – Sarfaraj Sipai Dec 19 '17 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.