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
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.