6

I am trying to add some additonal data under checkout items summary (right sidebar).
I am not figuring out how to get dynamic data from maybe Block (or other way).

Here it is what I have already done:

1 / Add my component to checkout_index_index layout
File Foo/Bar/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="itemsAfter" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="foo-bar-summary" xsi:type="array">
                                                            <item name="component" xsi:type="string">Foo_Bar/js/sample/summary</item>
                                                            <!--<item name="displayArea" xsi:type="string">summary</item>-->
                                                            <item name="config" xsi:type="array">
                                                                <item name="template" xsi:type="string">Foo_Bar/sample/summary</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2 / Create component
File Foo/Bar/view/frontend/web/js/sample/summary.js

define([
        'jquery',
        'uiComponent',
        'ko'
    ], function ($, Component, ko) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
            }
        });
    }
);

3 / Add template
File Foo/Bar/view/frontend/web/template/sample/summary.html

<div class="component-wrapper">
    <div data-bind="text: 'Test sample'"></div>
</div>

4 / Same thing with M2 Block / Template logic
File Foo/Bar/view/frontend/templates/summary.phtml

<div id="sample-summary" data-bind="scope: 'sample-summary'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
        "#sample-summary": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "sample-summary": {
                        "component": "Foo_Bar/js/sample/summary",
                        "template" : "Foo_Bar/sample/summary"
                    }
                }
            }
        }
    }
    </script>
</div>

With that I can see my Test sample above the items list.

  • Do I really need to use Kojs or can I just use the "basic" way to implement Block / template / layout ?
  • How can I call my block / template in the checkout_index_index layout ?
  • Are there others ways to call dynamic data into Kojs ?
  • Why my Component is inserted before while it is in itemsAfter node ?
Improve this question
1
  • How about the other way around? How to pass input values from frontend to backend? I dont want to save the custom values in order,i want to export them elsewhere
    – Juljan
    Commented Mar 20 at 13:13

1 Answer 1

Reset to default
13

OK I figured out how to pass data to Kojs templates.
I had to create a class SampleConfigProvider implementing ConfigProviderInterface returning an array with my data

File Foo/Bar/Model/SampleConfigProvider.php

<?php

namespace Foo\Bar\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

/**
 * Class SampleConfigProvider
 */
class SampleConfigProvider implements ConfigProviderInterface
{

    /**
     * Retrieve assoc array of checkout configuration
     *
     * @return array
     */
    public function getConfig()
    {
        return [
            'foo' => [
                'bar' => 'data',
            ],
        ];
    }
}

Then in my frontend/di.xml add a new CompositeConfigProvider
File Foo/Bar/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="foo_bar_config_provider" xsi:type="object">Foo\Bar\Model\SampleConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

In my component call my configurations
File Foo/Bar/view/frontend/web/js/sample/summary.js

define([
        'jquery',
        'uiComponent',
        'ko'
    ], function ($, Component, ko) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
            },
            getSampleTotal: function () {;
                return window.checkoutConfig.foo.bar;
            }
        });
    }
);

In my Kojs template
File Foo/Bar/view/frontend/web/template/sample/summary.html

<div class="component-wrapper">
    <p data-bind="html: getSampleTotal()"></p>
</div>


NOTE:

For people wondering

Why my Component is inserted before while it is in itemsAfter node?

It is a Magento known issue. I opened an issue on GitHub for that: https://github.com/magento/magento2/issues/8344

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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