This is my first time to mess with the checkout step. I have created a time slot function on a custom step which will save an address to the database on custom address entity when the user navigates to shipping step. However, in the database, the new record has been added to the table by ajax call but not displayed on the address renderer HTML. Since I can see the correct result when I re-enter to the checkout process, I am guessing the result is initial at the first step when the user enters to checkout. My question is "Are there a way to refresh that HTML or the data: Elem in that HTML?"
Code Below:
The function to navigate to the next step
view/frontend/web/time-slot.js
navigateToNextStep: function () {
var form = $('#form-validate-address')[0];
var formData = new FormData(form);
$('.timeslot-address-error').empty();
$('body').trigger('processStart');
$.ajax({
url: window.checkoutConfig.getMyBaseUrl+'managetime/managetime/checktimeslot',
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
dataType:'json',
success: function(data){
$('body').trigger('processStop');
if(data.success){
stepNavigator.next();
}else{
$('.timeslot-address-error').html(data.message);
}
},
error: function(data){
$('body').trigger('processStop');
}
});
},My ajax called php, i have registered the route name as managetime in etc/frontend/routes.xml ,the below script skipped how i get value:
Controller/ManageTime/CheckTimeSlot.php
$checkoutSession = $objectManager->get('Magento\Checkout\Model\Session');
if ($checkoutSession->getQuote()) {
$cartId = $checkoutSession->getQuote()->getId();
if ($cartId) {
$addressInfo = $objectManager->get('\Magento\Customer\Model\AddressFactory');
$addressInfo = $addressInfo->create();
$shippingAddress = $addressInfo
->setCustomerId($val_cid)
->setFirstname($val_fname)
->setMiddlename($val_mname)
->setLastname($val_lname)
->setStreet($val_street)
->setCity('Hong Kong')
->setPrefix($center_id)
->setCountryId('IS')
->setRegionId(0)
->setRegion('NULL')
->setPostcode(518003)
->setCompany($val_comp)
->setTelephone($val_tel)
->setFax($val_fax)
->setSaveInAddressBook('1')
->setIsDefaultShipping('1')
->setSameAsBilling(true);
$addressInfo->save();
}
}What I observed is that in vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/list.js it will initialize the address changes from customer_address_entity and get the address displayed after i re enter the checkout process. i am wondering if I can reproduce the initialize function in my custom function Or there is any other possible way.
initialize: function () {
this._super()
.initChildren();
addressList.subscribe(
function(changes) {
var self = this;
changes.forEach(function(change) {
if (change.status === 'added') {
self.createRendererComponent(change.value, change.index);
}
});
},
this,
'arrayChange'
);
return this;
},I guess another possible way to solve this is to update the data:elems in
vendor/magento/module-checkout/view/frontend/web/template/shipping-address/list.html but i don't know how. Hope there are some professionals share their experience. Thank you.
