0

Hi I'm stucked on a simple checkbox. I'm wondering if there is a way to make a custom checkbox checked as default. Basically, I created a custom field on the Checkout Page.

<item name="ship_when_complete" xsi:type="array">
                 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
                 <item name="config" xsi:type="array">
                  <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="dataType" xsi:type="string">boolean</item>
                 </item>
                 <item name="provider" xsi:type="string">checkoutProvider</item>
                 <item name="dataScope" xsi:type="string">customCheckoutForm.ship_when_complete</item>
                 <item name="sortOrder" xsi:type="string">1</item>
                </item>

Does not seem to work even if I put

<item name="default" xsi:type="boolean">1</item>

or

<item name="checked" xsi:type="boolean">true</item>

Valuemap does not work as well. I also created custom template but the value won't capture.

Please let me know how to overcome this. Thank you

0

Check for two thing

  1. data-bind="checked: isChecked" is implement or not
  2. check in your js Compoment js defaults have isChecked: ko.observeable(true);

and then in <item name="config" xsi:type="array"> add <item name="isChecked" xsi:type="boolean">true</item>

Happy Coding

5
  • Hi doesnt seem to work. I have sample js
    – topski
    Sep 20 at 8:14
  • Hi Nilesh it is now checked as default but won't change the database value. Database still shows false. How can it manipulate the value and insert to db?
    – topski
    Sep 20 at 8:34
  • Using this code now checked as default? If yes happy to know that. Second, your data is not saving to the database right and I assume you have created the column in order table if that is also yes then you need to use an observer to set that something like this $order->setData('my_checkbox', $checkboxValue); Sep 20 at 16:30
  • Im following this module: github.com/sbodak/magento2-checkout-custom-form but could not make checkbox work
    – topski
    Sep 20 at 23:34
  • That's why I had mentioned that you have to use observer after order placed to save you value into database Sep 21 at 7:28
0

You can use the following code to set the default checkbox value in ui_component

<item name="ship_when_complete" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
    <item name="config" xsi:type="array">
        <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="dataType" xsi:type="string">boolean</item>
        <item name="default" xsi:type="boolean">true</item>
        <item name="valueMap" xsi:type="array">
            <item name="true" xsi:type="number">false</item>
            <item name="false" xsi:type="number">true</item>
        </item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">customCheckoutForm.ship_when_complete</item>
    <item name="sortOrder" xsi:type="string">1</item>
</item>

Let me know if you have any other issue with the code Thanks

1
0

Got the answer im looking:

<item name="checked" xsi:type="boolean">true</item>
<item name="valueUpdate" xsi:type="boolean">true</item>

Complete xml code

<item name="ship_when_complete" xsi:type="array">
                 <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
                 <item name="config" xsi:type="array">
                  <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="dataType" xsi:type="string">boolean</item>
                  <item name="checked" xsi:type="boolean">true</item>
                  <item name="valueUpdate" xsi:type="boolean">true</item>
                 </item>
                 <item name="provider" xsi:type="string">checkoutProvider</item>
                 <item name="dataScope" xsi:type="string">customCheckoutForm.ship_when_complete</item>
                 <item name="sortOrder" xsi:type="string">1</item>
                </item>

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.