Magento Question posted in
The official documentation can be found here.

Magento 2 Knockout XML->PHTML->JS->HTML

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

vendor/magento/module-catalog/view/frontend/layout/default.xml

This file is calling pthml template with

 <block class="MagentoCustomerBlockAccountAuthenticationPopup" name="authentication-popup" as="authentication-popup" template="Magento_Customer::account/authentication-popup.phtml">

vendor/magento/module-customer/view/frontend/templates/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() ?>
            }
        }
    </script>

vendor/magento/module-customer/view/frontend/web/js/view/authentication-popup.js

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

    define([
    'jquery',
    'ko',
    // ......... //
], 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('MagentoCmsBlockBlock')->setBlockId('reset_password_notice')->toHtml(); ?>

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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="MagentoCustomerControllerAccountCreatePost"
                type="Theme_NameCustomerControllerAccountCreatePost" />

    <type name="MagentoCheckoutModelCompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="cms_block_config_provider" xsi:type="object">Theme_NameCustomerModelCheckoutConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

    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
    vendor/module-customer/Model/Checkout/ConfigProvider.php

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

    <?php
namespace Theme_NameCustomerModelCheckout;

use MagentoCheckoutModelConfigProviderInterface;
use MagentoFrameworkViewLayoutInterface;

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('MagentoCmsBlockBlock')->setBlockId($cmsBlockId)->toHtml()
        ];
    }
}

    Good. Provider is configured.

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

    app/design/frontend/theme_name/Magento_Customer/web/template/authentication-popup.html

    Write the next:

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

  2. 0

    You need to put this code into your phtml file.

    <?php echo $this->getLayout()->createBlock('MagentoCmsBlockBlock')->setBlockId('reset_password_notice')->toHtml(); ?>

    And now it show what you write into this block.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search