Magento 2 – How to Save Custom Field Value in Order Table on Checkout Page

checkoutmagento2orders

I have extended checkout page with comment note for customer feedback. And the textbox also appearing in checkout page.

But I don't know how to get custom field value and save Could you please instruct me how to do it.

For this I have wrote below code.

app/design/frontend/Learning/Test/Magento_Checkout/web/template/billing-address.html

<div>
    <label><span data-bind="i18n: 'Comments'"></span></label>
    <textarea id="order_comment" rows="7" cols="15"/>
</div>
<br/>
<div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
    <input type="checkbox" name="billing-address-same-as-shipping" data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + $parent.getCode()}"/>
    <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + $parent.getCode()}"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
</div>

<!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
<fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
    <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
    <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
    <div class="actions-toolbar">
        <div class="primary">
            <button class="action action-update" type="button" data-bind="click: updateAddress">
                <span data-bind="i18n: 'Update'"></span>
            </button>
            <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
                <span data-bind="i18n: 'Cancel'"></span>
            </button>
        </div>
    </div>
</fieldset>

My textbox appearing in Checkout Page

Could you please instruct me how to get custom field and save.

Best Answer

There is already a pretty good tutorial about this, check out: http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/.

What he does:

Create the field in both quote and sales_order table with InstallData.php
Add extension attribute for shipping information
Override Magento_Checkout/js/model/shipping-save-processor/default to get the attribute data with jQuery and add it to the shipping information.
Add the attribute data the the quote
Add the attribute data to the order
Fetch the data in the admin panel and show on the order page

Related Solutions

Magento – Magento 2 – Where is jquery code of click on place order button in checkout page

These two files.

PATH:

html/vendor/magento/module-checkout/view/frontend/web/js/action/place-order.js:12

html/vendor/magento/module-checkout/view/frontend/web/js/view/review/actions/default.js:17

Magento2 UI Components – Clear Billing Form Validation Errors

You've asked a bit of a mouthful there -- probably too much for a single Stack Exchange question, so I'm going to concentrate on teaching you how to reset the initial state of the form so things no longer appear invalid if there's a blank value. If you're interested in the whys, you'll need to get up to speed on the fundamentals of UI Components and x-magento-init scripts. My Magento 2 UI Components and uiElement Internals series are a good place to start. The following assumes you have some familiarity with these systems -- if there's something confusing below then the above articles (as well as the other Magento 2 articles) will probably have the information you're looking for.

In the Checkout Application, each form field is represented by a view model, and one-or-many view model templates. You can see this in Commerce Bug's KO Scopes tab.

The firstname's view model is an object derived from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module. You can find that model's source code here

vendor/magento//module-ui/view/base/web/js/form/element/abstract.js

The reset method is the one we're interested in. This will reset a field's validation state. You'll need to figure out the full uiRegistry string identifier for the specific model (again, Commerce Bug is useful here), use that string to fetch the instantiated view model, and then call the reset function. For the checkmo form, the following program (easily adapted into a define module if you're going to use it in your application) will do that for the firstname field.

requirejs(['uiRegistry'], function(uiRegistry){
    uiRegistry.get('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields.firstname').reset();
});

Of course, you'll likely want to fetch each view model that's part of a particular form -- the following is a start on that.

uiRegistry.get(function(viewModel){
    var parentName = viewModel['parentName'] ? viewModel['parentName'] : '';
    if(parentName.indexOf('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields') === -1){
        return;
    };       
    console.log(viewModel);
});

This uses the uiRegistry's callback feature to search for all view models with a parent of checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields. Some of these may not be form elements, but we'll leave that problem as an exercise for the questioner.

Hope that helps!

Best Answer

Related Solutions

Magento – Magento 2 – Where is jquery code of click on place order button in checkout page

Magento2 UI Components – Clear Billing Form Validation Errors

Related Topic