I am new to magento 2. I want to send the day and time option selected by user at checkout to my Controller. When the user selects a day and time slot from the dropdown, it gets the value but I do not know how to send it to my Controller.
Following are my files.
.js file
define(
[
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer'
],
function (
ko,
Component,
_,
stepNavigator,
customer
) {
'use strict';
/**
* check-login - is the name of the component's .html template
*/
let date = window.checkoutConfig.a4date;
let latestTime;
let latestDate;
let dateValues = date.toString().split(",");
if (dateValues[0] === '') {
dateValues = [];
dateValues.push('Tuesday');
}
console.log(dateValues);
let time = window.checkoutConfig.a4time;
let timeValues = time.toString().split(",");
if (timeValues[0] === '') {
timeValues = [];
timeValues.push('13:00-16:00');
}
console.log(timeValues);
return Component.extend({
defaults: {
template: 'A4_CustomDelivery/check-login'
},
//add here your logic to display step,
isVisible: ko.observable(true),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'isLogedCheck',
//step title value
stepTitle: 'Delivery Date & Time',
/**
*
* @returns {*}
*/
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//observable property with logic when display step or hide step
this.isVisible,
_.bind(this.navigate, this),
/**
* sort order value
* 'sort order value' < 10: step displays before shipping step;
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
* 'sort order value' > 20 : step displays after payment step
*/
15
);
return this;
},
/**
* The navigate() method is responsible for navigation between checkout step
* during checkout. You can add custom logic, for example some conditions
* for switching to your custom step
*/
navigate: function () {
},
/**
* @returns void
*/
navigateToNextStep: function () {
stepNavigator.next();
latestTime = this.chosenTime._latestValue[0];
latestDate = this.chosenDate._latestValue[0];
console.log(latestDate);
console.log(latestTime);
},
chosenDate : ko.observableArray([dateValues[0]]),
availableDates : ko.observableArray(
(dateValues)
),
getDate:function (data, event) {
//console.log(this.chosenDate());
},
chosenTime : ko.observableArray([timeValues[0]]),
availableTimes : ko.observableArray(
(timeValues)
),
getTime:function (data, event) {
//console.log(this.chosenTime());
},
transfer : function() {
const Http = new XMLHttpRequest();
const str = 'day='+ latestTime + '&time=' + latestDate;
console.log(latestTime + latestDate);
const url='http://new_key/dateandtime/index/placeorder?' + str;
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
alert('ok');
console.log("muizzzzz");
console.log(latestTime + latestDate);
console.log(Http.responseText);
}
},
});
}
)
I need to send latestDate
and latestTime
values to my Controller so I can use the data there.
Controller file
<?php
declare(strict_types=1);
namespace A4CustomDeliveryControllerIndex;
use MagentoFrameworkAppActionInterface;
use MagentoFrameworkControllerResultRawFactory;
class placeorder extends MagentoFrameworkAppActionAction
{
protected MagentoFrameworkViewResultPageFactory $resultPageFactory;
protected $customerSession;
public function __construct(
MagentoFrameworkAppActionContext $context,
MagentoFrameworkViewResultPageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
echo "hi";
exit();
//return $this->resultPageFactory->create();
}
}
Instead of echoing ‘hi’, I need to echo the latestDate
and latestTime
values here. I think these are the 2 main files needed to send the variable value. If any other file is required, you can ask and I will upload that as well. Thanks!