Magento 2 : Retreiving Data From Database, Use it in Knockout UI Component in Checkout

Question

I have been developing a module for Magento2 Checkout that fills some information, not important what, this data resides in Magento's db, and I am able to access it via Magento database access layer.

My question is, how do I get this retrieve this data and use it in a Knockoutjs UI Component in Checkout?

• B G Kavinga: Are you going to use it with existing component or new?
• Cinder Biscuits: I am extending uiComponent into a new ui component

Answer 1

I was able to get this working by implementing a ConfigProvider via implementing ConfigProviderInterface.

<?php
namespace My\Plugin\Model;
class MyPluginConfigProvider implements ConfigProviderInterface
{
 protected $scopeConfig;
 public function __construct(
 ScopeConfigInterface $scopeConfig
 ) {
 $this->scopeConfig = $scopeConfig;
 }
 public function getConfig()
 {
 $config = [
 'store_address' => [
 'name' => $this->scopeConfig->getValue('general/store_information/name'),
 'city' => $this->scopeConfig->getValue('shipping/origin/city'),
 (...)
 ]
 ];
 return $config;
 }
}

Added it to app/code/My/Plugin/etc/frontend/di.xml:

<?xml version="1.0"?>
<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="instore_config_provider" xsi:type="object">Premiergroup\InStoreShipping\Model\InStoreConfigProvider</item>
 </argument>
 </arguments>
 </type>
</config>

And then, finally, called it from within my ko uiComponent:

define(
[
 'jquery',
 'ko',
 'uiComponent'
],
function (
 ,ドル
 ko,
 Component
) {
 'use strict';
 return Component.extend({
 (...)
 functionToBind: function () {
 var storeName = window.checkoutConfig.store_address.store_name;
 // do something with the storeName

I hope someone else finds this helpful and I can't find any documentation on this!

Answer 2

In the phtml file where you get the Value from db write below code:

.phtml file code:

<script>
 window.myData = "<?php echo $datafromdb ?>";
</script>

in Knockout js you can access this data like:

define(
 [
 //your model
 ],
 function (url) {
 'use strict';
 return {
 mydata: window.myData,
 };
 }
);

• Cinder Biscuits: Hi, since I am using UI components, it uses Knockout html templates, so there is no phtml.
• Sharfaraz Bheda: Than you can refer this html file /vendor/magento/module-checkout/view/frontend/web/template/billing-address/details.html method: currentBillingAddress()
• Cinder Biscuits: That file doesn't really have anything to do with getting data from the database, just filling it in with a template. I found a way to do it via ConfigProviderInterface.