1

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="Magento\Customer\Block\Account\AuthenticationPopup" 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('Magento\Cms\Block\Block')->setBlockId('reset_password_notice')->toHtml(); ?>

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

Improve this question

1 Answer 1

Reset to default
1

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

There I found the file vendor/module-customer/Model/Checkout/ConfigProvider.php. That was exactly what I need.

Following this link I create:

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

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

  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_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. The provider is configured.

3)The last one needed to override the 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>
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.