1

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?

  • Are you going to use it with existing component or new? – B G Kavinga May 1 '17 at 3:34
  • I am extending uiComponent into a new ui component – Cinder Biscuits May 1 '17 at 11:42
3

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!

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,
        };
    }
);
  • Hi, since I am using UI components, it uses Knockout html templates, so there is no phtml. – Cinder Biscuits May 1 '17 at 11:44
  • Than you can refer this html file /vendor/magento/module-checkout/view/frontend/web/template/billing-address/details.html method: currentBillingAddress() – Sarfaraz bheda May 1 '17 at 11:55
  • 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. – Cinder Biscuits May 1 '17 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.