Magento 2 – Call CMS Block in Non-Checkout KO Template

cms-blockknockoutjsmagento2

I am using the WeltPixel theme and want to add add a CMS block to the ajaxlogin-popup.html file below the "Forgot Password" link.

I am getting this error in console:

Uncaught TypeError: Unable to process binding "html: function(){return    
window.checkoutConfig.cms_block_signin_message }"
Message: Cannot read property 'cms_block_signin_message' of undefined
at html (eval at createBindingsStringEvaluator (knockout.js:2982), <anonymous>:3:86)
at update (knockout.js:4371)
at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3373)
at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173)
at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140)
at Function.evaluateImmediate (knockout.js:2101)
at Object.ko.computed.ko.dependentObservable (knockout.js:1954)
at knockout.js:3371
at Object.arrayForEach (knockout.js:159)
at applyBindingsToNodeInternal (knockout.js:3343)

/app/code/Vendor/Module/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="cms_block_config_provider" xsi:type="object">Vendor\Module\Model\Checkout\ConfigProvider</item>
     </argument>
  </arguments>
 </type>
</config>

/app/code/Vendor/Module/Model/Checkout/ConfigProvider.php

<?php
namespace Vendor\Module\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 = 'sign-in-message'; // id of cms block to use

    return [
        // 'cms_block_signin_message' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($cmsBlockId)->toHtml()
        'cms_block_signin_message' => $this->_layout->createBlock(\Magento\Cms\Block\Block::class)
        ->setBlockId($cmsBlockId)->toHtml()
    ];
}
}

/app/design/frontend/Vendor/ThemeName/WeltPixel_SocialLogin/web/template/ajaxlogin-popup.html

A portion of the ajaxlogin-popup.html file. My data-bind is at the bottom:

<div class="block-content" aria-labelledby="block-customer-login-heading" id="login_section">
        <form class="form form-login"
              method="post"
              data-bind="event: {submit: login }"
              id="ajaxlogin-form">
            <div class="fieldset login" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
                <div class="field email required">
                    
                </div>
                <div class="field password required">
                    
                </div>
                <!-- ko foreach: getRegion('additional-login-form-fields') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!-- /ko -->
                <div class="actions-toolbar">
                    <div class="primary">
                        <button type="submit" class="action login primary" name="send" id="ajaxlogin-send">
                            <span data-bind="i18n: 'Sign In'"></span>
                        </button>
                    </div>
                    <div class="secondary">
                        <a class="action" data-bind="attr: {href: forgotPasswordUrl}">
                            <span data-bind="i18n: 'Forgot Your Password?'"></span>
                        </a>
                    </div>
                </div>
                <div data-bind="html: window.checkoutConfig.cms_block_signin_message"></div>
            </div>
        </form>
    </div>

I've looked up several tickets here and help on other sites, but everything is directed toward the Checkout pages. This is not a Checkout page, it is a modal that slides in from the side of the screen. I am going to keep poking around, but any help would be greatly appreciated.

Best Answer

You can declare JS variable in any phtml file and you can use this variable in html file as below

<script type="text/javascript">
window.cms_block_signin_message = <?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('sign-in-message') // your cms block identifier as per defined in admin
->toHtml();
?>
</script>

in your html file use below code

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

Related Solutions

Magento 2 – How to Call CMS Block

Try to use Magento\Cms\Model\BlockRepository to get block by ID, like this:

/**
 * @var \Magento\Cms\Model\BlockRepository
 */
protected $blockRepository;

/**
 * @param \Magento\Cms\Model\BlockRepository $blockRepository
 */
public function __construct(
    \Magento\Cms\Model\BlockRepository $blockRepository
) {
    $this->blockRepository = $blockRepository;
}

public function getBlockById($id, $storeId)
{
    $block = $this->blockRepository->getById($id)
        ->setStoreId($storeId);

    return $block;
}

In addition you can use the method getList() to get block like this:

/**
 * @var \Magento\Cms\Model\BlockRepository
 */
protected $blockRepository;

/**
 * @var \Magento\Framework\Api\FilterBuilder
 */
protected $filterBuilder;

/**
 * @var \Magento\Framework\Api\Search\FilterGroup
 */
protected $filterGroup;

/**
 * @var \Magento\Framework\Api\SearchCriteriaInterface
 */
protected $searchCriteria;

/**
 * @param \Magento\Cms\Model\BlockRepository $blockRepository
 * @param \Magento\Framework\Api\SearchCriteriaInterface $criteria
 * @param \Magento\Framework\Api\Search\FilterGroup $filterGroup
 * @param \Magento\Framework\Api\FilterBuilder $filterBuilder
 */
public function __construct(
    \Magento\Cms\Model\BlockRepository $blockRepository,
    \Magento\Framework\Api\SearchCriteriaInterface $criteria,
    \Magento\Framework\Api\Search\FilterGroup $filterGroup,
    \Magento\Framework\Api\FilterBuilder $filterBuilder
) {
    $this->blockRepository = $blockRepository;
    $this->searchCriteria = $criteria;
    $this->filterGroup = $filterGroup;
    $this->filterBuilder = $filterBuilder;
}

/**
 * @return \Magento\Cms\Model\Block|null
 * @throws \Magento\Framework\Exception\NoSuchEntityException
 */
protected function getBlockData()
{
    $block = null;
    $storeId = 0;
    $blockId = 'test-block';

    $this->filterGroup->setFilters([
        $this->filterBuilder->create()
            ->setField('store_id')
            ->setValue($storeId)
            ->setConditionType('eq'), // default value
        $this->filterBuilder->create()
            ->setField('identifier')
            ->setValue($blockId),
    ]);

    $this->searchCriteria->setFilterGroups([$this->filterGroup]);
    $blocks = $this->blockRepository->getList($this->searchCriteria);

    if ($blocks->getItems()) {
        /** @var \Magento\Cms\Model\Block $block */
        $block = $this->blockRepository->getById($blockId);
    }

    return $block;
}

The getList() result should look like this:

and block looks as usual:

Magento 2 – How to Call CMS Block in Email Templates

We can try:

{{block class="Magento\\Cms\\Block\\Block" area='frontend' block_id="mail_include_header"}}

We can see more how to add a block to email: vendor/magento/module-sales/view/frontend/email/shipment_new.html

Best Answer

Related Solutions

Magento 2 – How to Call CMS Block

Magento 2 – How to Call CMS Block in Email Templates

Related Topic