I want to display static block in html login popup during checkout, but there is a problem.

This is the html template which is called from js, this js is called from phtml, and this phtml template called from xml layout. ( xml -> phtml -> js -> html)

So the question is how to send custom content block from the phtml or xml throught js to html template


This file is calling pthml template with

 <block class="Magento\Customer\Block\Account\AuthenticationPopup" name="authentication-popup" as="authentication-popup" template="Magento_Customer::account/authentication-popup.phtml">


This file is calling js layout with code:

     <script type="text/x-magento-init">
            "#authenticationPopup": {
                "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>


this file is called the last html template where should be a static block from admin panel, with code:

    // ......... //
], function ($, ko, /* ... ... ... .... ... */) {
    'use strict';

    return Component.extend({
        registerUrl: window.authenticationPopup.customerRegisterUrl,
        forgotPasswordUrl: window.authenticationPopup.customerForgotPasswordUrl,
        autocomplete: window.authenticationPopup.autocomplete,
        modalWindow: null,
        isLoading: ko.observable(false),

        defaults: {
            template: 'Magento_Customer/authentication-popup'

this is how i get this block in php

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('reset_password_notice')->toHtml(); ?>

I tried to paste it to phtml, it doesn't work !!!


The problem is solved by myself. So for the first step i started looking for data provider which helps to send data from pthml throught js to html in vendor/module-customer/

There i found file vendor/module-customer/Model/Checkout/ConfigProvider.php. That was exectly what i need.

Following this link i create:

1) app/code/Theme/Customer/etc/frontend/di.xml with code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Customer\Controller\Account\CreatePost"
                type="Theme_Name\Customer\Controller\Account\CreatePost" />

    <type name="Magento\Checkout\Model\CompositeConfigProvider">
            <argument name="configProviders" xsi:type="array">
                <item name="cms_block_config_provider" xsi:type="object">Theme_Name\Customer\Model\Checkout\ConfigProvider</item>

2) The next step was to create a class which is called in item tag: Theme_Name/Customer/Model/Checkout/ConfigProvider.php with code that extends

Note! They both implement the same ConfigProviderInterface. So in new ConifgProvider.php we use the same interface to extend data-provider correctly

namespace Theme_Name\Customer\Model\Checkout;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
    /** @var LayoutInterface  */
    protected $_layout;

    public function __construct(LayoutInterface $layout)
        $this->_layout = $layout;

    public function getConfig()
        $cmsBlockId = 'block_ID'; // id of cms block to use

        return [
            'cms_block_message' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($cmsBlockId)->toHtml()

Good. Provider is configured.

3)The last one was need to override frontend html KO template:


Write the next:

<div data-bind="html: window.checkoutConfig.cms_block_message"></div>

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.