Magento 2 – Send Custom Data to Quote Table

checkoutcustom-optionsextension-attributesquotesales-order

I am new to magento 2. I have created a custom checkout step where user can select delivery day and time via dropdown. Dropdown options are coming from system.xml via customConfigProvider after seller sets available days and time. Now i want to send the day and time option selected by user at checkout to quote and sales_order table.
I have already created columns in those tables but how can i send data when customer places order?

This is my js file

    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_module/select-date'
            },

            dayData : window.checkoutConfig.day,
            timeData : window.checkoutConfig.time,
            isVisible: ko.observable(true),
            isLogedIn: customer.isLoggedIn(),
            stepCode: 'isLogedCheck',
            stepTitle: 'Day and Time',


            initialize: function () {
                this._super();
                stepNavigator.registerStep(
                    this.stepCode,
                    null,
                    this.stepTitle,
                    this.isVisible,
                    _.bind(this.navigate, this),
                    15
                );

                return this;
            },


            navigate: function () {

            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

my html file

<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
    <div id="checkout-step-title" class="step-content" data-role="content">
            <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
                <h4 style="padding-bottom: 1rem;padding-top: 1rem;">Select Delivery Day</h4>
                <select options="dayData" style="width: 200px; height: 30px;"> </select>
                <h4 style="padding-bottom: 1rem;padding-top: 1rem;">Select Delivery Time</h4>
                <select options="timeData" style="width: 200px; height: 30px;"> </select>
                <div class="actions-toolbar">
                <div class="primary" style="margin-top: 2rem;">
                    <button data-role="opc-continue" type="submit" class="button action continue primary" style="height: 2rem; width: 5rem;">
                        <span>Next</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

My extension_attribute.xml file

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Checkout\Api\Data\ShippingInformationInterface">
        <attribute code="delivery_day" type="string"/>
    </extension_attributes>
</config>

di.xml file

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">RolusTech\DateAndTime\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Best Answer

In the js file you need to send data via ajax

    function transfer() {
            const Http = new XMLHttpRequest();
            const str = 'day='+ document.getElementById('dayData').value + '&time=' + document.getElementById('timeData').value
            const url='http://magento2/dateandtime/index/placeorder?' + str;
            Http.open("GET", url);
            Http.send();

            Http.onreadystatechange = (e) => {
                console.log(Http.responseText)
            }
        }

Then get the data in your controller and save it in quote table via quoteRepository. Then you can get data from quote table and save it in sales_order table.

Related Topic