How to create Checkout ConfigData Provider in Magento2

How to create Checkout ConfigData Provider in Magento2 - Magento Source24

In this blog post i'm share with you to How to create Checkout ConfigData Provider in Magento2

in this post main feature i have get configuration data in checkout js I 'm create file to validate delevey date behalf of module enable or disble - delivery-date-block.js

this way to get ConfigData in code\code\SR\DeliveryDate\view\frontend\web\js\view\delivery-date-block.js

👉 Step1: Create a system.xml file etc\adminhtml folder

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="sr_deliverydate" translate="label" type="text" sortOrder="1300" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Pickup Date Settings</label>
<tab>sales</tab>
<resource>SR_DeliveryDate::deliverydate</resource>
<group id="general" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<field id="active" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label" type="select">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<label>Pickup Date Shipping Method Settings</label>
<field id="format" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Date Format:</label>
<comment>yy-mm-dd</comment>
</field>
<field id="disabled" translate="label" type="multiselect" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Disabled Delivery Date</label>
<source_model>SR\DeliveryDate\Model\Config\Source\Disabled</source_model>
</field>
<field id="hourMin" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Delivery Hour Start:</label>
<comment>Should be 8=>8AM, 9=>9AM </comment>
</field>
<field id="hourMax" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Delivery Hour End:</label>
<comment>Should be 22=>7PM, 23=>8PM because Minutes cover 1hr </comment>
</field>
</group>
</section>
<section id="carriers" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="1000" translate="label">
<group id="pickupDateandTime" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label">
<label>Pickup Date and Time</label>
<field id="active" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label" type="select">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
</group>
</section>
</system>
</config>

👉 Step2: Create a file DeliveryDateConfigProvider.php in code\code\SR\DeliveryDate\Model\ Folder

<?php
namespace SR\DeliveryDate\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Store\Model\ScopeInterface;

class DeliveryDateConfigProvider implements ConfigProviderInterface
{
const XPATH_FORMAT = 'sr_deliverydate/general/format';
const XPATH_DISABLED = 'sr_deliverydate/general/disabled';
const XPATH_ACTIVE = 'sr_deliverydate/general/active';
const XPATH_HOURMIN = 'sr_deliverydate/general/hourMin';
const XPATH_HOURMAX = 'sr_deliverydate/general/hourMax';

/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;

/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfig;

/**
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
*/
public function __construct(
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
$this->storeManager = $storeManager;
$this->scopeConfig = $scopeConfig;
}

/**
* {@inheritdoc}
*/
public function getConfig()
{
$store = $this->getStoreId();
$disabled = $this->scopeConfig->getValue(self::XPATH_DISABLED, ScopeInterface::SCOPE_STORE, $store);
$active = $this->scopeConfig->getValue(self::XPATH_ACTIVE, ScopeInterface::SCOPE_STORE, $store);
$hourMin = $this->scopeConfig->getValue(self::XPATH_HOURMIN, ScopeInterface::SCOPE_STORE, $store);
$hourMax = $this->scopeConfig->getValue(self::XPATH_HOURMAX, ScopeInterface::SCOPE_STORE, $store);
$format = $this->scopeConfig->getValue(self::XPATH_FORMAT, ScopeInterface::SCOPE_STORE, $store);

$noday = 0;
if($disabled == -1) {
$noday = 1;
}

$config = [
'shipping' => [
'delivery_date' => [
'format' => $format,
'disabled' => $disabled,
'active' => $active,
'noday' => $noday,
'hourMin' => $hourMin,
'hourMax' => $hourMax
]
]
];

return $config;
}

public function getStoreId()
{
return $this->storeManager->getStore()->getStoreId();
}
}

👉 Step3 : Create a delivery-date-block.js file in code\code\SR\DeliveryDate\view\frontend\web\js\view\delivery-date-block.js

define([
'jquery',
'ko',
'uiComponent',
'Magento_Ui/js/form/element/abstract',
'mage/calendar'
], function ($, ko, Component) {
'use strict';

var active = window.checkoutConfig.shipping.delivery_date.active;
if(active == 1){
return Component.extend({

defaults: {
template: 'SR_DeliveryDate/delivery-date-block'
},

initialize: function () {
this._super();
var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
var noday = window.checkoutConfig.shipping.delivery_date.noday;
var hourMin = parseInt(window.checkoutConfig.shipping.delivery_date.hourMin);
var hourMax = parseInt(window.checkoutConfig.shipping.delivery_date.hourMax);
var format = window.checkoutConfig.shipping.delivery_date.format;
var date = new Date();
if(!format) {
format = 'yy-mm-dd';
}
var disabledDay = disabled.split(",").map(function(item) {
return parseInt(item, 10);
});

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

var $el = $(element);

// console.log($el);
//initialize datepicker
if(noday) {
var options = {
showsTime: false,
dateFormat:format,
hourMin: hourMin,
hourMax: hourMax,
minDate: '+1d',
maxDate: '+7d'

};
} else {
var options = {
showsTime: false,
dateFormat:format,
hourMin: hourMin,
hourMax: hourMax,
minDate: '+1d',
maxDate: '+7d',
beforeShowDay: function(date) {
var day = date.getDay();
alert(day);
if(disabledDay.indexOf(day) > -1) {
return [false];
} else {
return [true];
}
}
};
}

$el.datepicker(options);

var writable = valueAccessor();
if (!ko.isObservable(writable)) {
var propWriters = allBindingsAccessor()._ko_property_writers;
if (propWriters && propWriters.datepicker) {
writable = propWriters.datepicker;
} else {
return;
}
}
writable($(element).datepicker("getDate"));
},
// update: function (element, valueAccessor) {
// var widget = $(element).data("datepicker");

// if (widget) {
// var date = ko.utils.unwrapObservable(valueAccessor());
// widget.date(date);
// }
// }

};

return this;
}
});

}else{
return Component.extend({
});
}
});

👉 Step4: this is form file delivery-date-block.html in code\code\SR\DeliveryDate\view\frontend\web\template

<div class="deleverydateandtime">
<label class="label">Delivery Date</label>
<br/>
<div class="control delivery_date_class">
<input class="input-text" type="text" data-bind="datepicker: true" placeholder="Select Date" name="delivery_date" id="delivery_date"/>
</div>

<br/>
<label class="label">Delevery Time </label>
<div class="control delivery_time_class">
<select name="delivery_time" class="input-select" id="delivery_time">
<option value="">Select Time</option>
<option value="07:00AM - 10:00AM">07:00AM - 10:00AM</option>
<option value="10:00AM - 01:00PM">10:00AM - 01:00PM</option>
<option value="01:00PM - 03:00PM">01:00PM - 03:00PM</option>
<option value="03:00PM - 06:00PM">03:00PM - 06:00PM</option>
</select>
</div>
<br/>
<br/>
</div>

<style>
.delivery_date_class{
margin-top: 10px;
}
.delivery_time_class{
margin-top: 10px;
}
input#delivery_date {
width: 59%;
}
select#delivery_time {
width: 59%;
}
</style>

👉 Step5: create a default.js file in code\SR\DeliveryDate\view\frontend\web\js\model\shipping-save-processor

/*global define,alert*/
define(
[
'jquery',
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/payment-service',
'Magento_Checkout/js/model/payment/method-converter',
'Magento_Checkout/js/model/error-processor',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/action/select-billing-address'
],
function (
$,
ko,
quote,
resourceUrlManager,
storage,
paymentService,
methodConverter,
errorProcessor,
fullScreenLoader,
selectBillingAddressAction
) {
'use strict';

return {
saveShippingInformation: function () {
var payload;

if (!quote.billingAddress()) {
selectBillingAddressAction(quote.shippingAddress());
}

payload = {
addressInformation: {
shipping_address: quote.shippingAddress(),
billing_address: quote.billingAddress(),
shipping_method_code: quote.shippingMethod().method_code,
shipping_carrier_code: quote.shippingMethod().carrier_code,
extension_attributes:{
delivery_date: $('[name="delivery_date"]').val(),
delivery_comment: $('[name="delivery_comment"]').val(),
delivery_time: $('[name="delivery_time"]').val()
}
}
};

fullScreenLoader.startLoader();

return storage.post(
resourceUrlManager.getUrlForSetShippingInformation(quote),
JSON.stringify(payload)
).done(
function (response) {
quote.setTotals(response.totals);
paymentService.setPaymentMethods(methodConverter(response.payment_methods));
fullScreenLoader.stopLoader();
}
).fail(
function (response) {
errorProcessor.process(response);
fullScreenLoader.stopLoader();
}
);
}
};
}
);

👉 Step 6: create a file checkout_index_index.xml in code\code\SR\DeliveryDate\view\frontend\layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="delivery_date" xsi:type="array">
<item name="component" xsi:type="string">SR_DeliveryDate/js/view/delivery-date-block</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>

How to create Checkout ConfigData Provider in Magento2 - Magento Source24

How to create Checkout ConfigData Provider in Magento2 - Magento Source24

Post a Comment

Contact Form