0

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>
Improve this question

2 Answers 2

Reset to default
0

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.

Improve this answer
0

You have to do the following things:

  1. You have to add data to the additional data to the payment data. Create a function as following:
getData: function () { return { 'method': 'custompayment', 'additional_data': { 'day_data': dayData, 'time_data': timeData, // 'time_data': $('#timedata').val() }
  1. Now you have to create an event and observer to get this data on Place Order. Create an events.xml file in etc folder.
<?xml version="1.0" encoding="UTF-8"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="sales_order_payment_save_before"> <observer name="handle_order_attrs" instance="Custom\Payment\Observer\HandleOrderAttrs" /> </event> </config>
  1. Create an observer HandleOrderAttrs.php in Observer folder
<?php namespace Custom\Payment\Observer; use Magento\Framework\Event\ObserverInterface; use Magento\Framework\Event\Observer as EventObserver; use Magento\Checkout\Model\Session as CheckoutSession; class HandleOrderAttrs implements ObserverInterface { protected $checkoutSession; protected $_inputParamsResolver; protected $_quoteRepository; protected $logger; protected $_state; public function __construct( \Magento\Webapi\Controller\Rest\InputParamsResolver $inputParamsResolver, \Magento\Quote\Model\QuoteRepository $quoteRepository, \Psr\Log\LoggerInterface $logger, \Magento\Framework\App\State $state, CheckoutSession $checkoutSession ) { $this->_inputParamsResolver = $inputParamsResolver; $this->_quoteRepository = $quoteRepository; $this->logger = $logger; $this->_state = $state; $this->checkoutSession = $checkoutSession; } public function execute(EventObserver $observer) { $inputParams = $this->_inputParamsResolver->resolve(); foreach ($inputParams as $inputParam) { if ($inputParam instanceof \Magento\Quote\Model\Quote\Payment) { $paymentData = $inputParam->getData('additional_data'); $method = $inputParam->getData('method'); $paymentOrder = $observer->getEvent()->getPayment(); // $order = $paymentOrder->getOrder(); // $quote = $this->_quoteRepository->get($order->getQuoteId()); // $paymentQuote = $quote->getPayment(); // $method = $paymentQuote->getMethodInstance()->getCode(); if ($method == 'custompayment') { if(isset($paymentData['cc_owner'])) { // $paymentQuote->setData('cc_owner', $paymentData['cc_owner']); // $paymentOrder->setData('cc_owner', $paymentData['cc_owner']); // $paymentQuote->setData('cc_exp_month', $paymentData['cc_exp_month']); // $paymentOrder->setData('cc_exp_month', $paymentData['cc_exp_month']); // $paymentQuote->setData('cc_exp_year', $paymentData['cc_exp_year']); // $paymentOrder->setData('cc_exp_year', $paymentData['cc_exp_year']); // $paymentOrder->setAdditionalInformation('Credit Card Number', $paymentData['cc_number']); // $paymentOrder->setAdditionalInformation('Expiration Month ', $paymentData['cc_exp_month']); // $paymentOrder->setAdditionalInformation('Expiration Year ', $paymentData['cc_exp_year']); // $paymentOrder->setAdditionalInformation('Name ', $paymentData['cc_owner']); // $paymentOrder->setAdditionalInformation('Ext. ', $paymentData['cc_ext']); // $paymentOrder->setAdditionalInformation('Phone', $paymentData['cc_phone']); $this->checkoutSession->start(); $this->checkoutSession->setCustomerName($paymentData['cc_owner']); $this->checkoutSession->setCardNumber($paymentData['cc_number']); $this->checkoutSession->setExt($paymentData['cc_ext']); $this->checkoutSession->setPhoneNumber($paymentData['cc_phone']); $this->checkoutSession->setExpMonth($paymentData['cc_exp_month']); $this->checkoutSession->setExpYear($paymentData['cc_exp_year']); } } } } return $this; } }
Improve this answer
10
  • Followed this but it wont send day and time along with data after selected by customer. Commented Jun 3, 2022 at 8:04
  • After adding getData : function() in your js file - you have to check that data in observer. $paymentData = $inputParam->getData('additional_data'); Here you need to var_dump or print_r($paymentData); Also you need to uncomment these //$order = $paymentOrder->getOrder(); // $quote = $this->_quoteRepository->get($order->getQuoteId()); // $paymentQuote = $quote->getPayment(); Commented Jun 3, 2022 at 9:34
  • Followed above steps but still same result. Is there anything else i can try? Really appreciate your help, Thanks man. Commented Jun 3, 2022 at 11:08
  • This is the way i got same type of data in my custom payment method. you have to work through it. Commented Jun 3, 2022 at 11:27
  • where did you set methods for setCustomerName etc? Commented Jun 6, 2022 at 7:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.