Skip to content

Add dynamic block based on customer segment to checkout

We are trying to display custom content in checkout using a dynamic block with a customer segment.

I have created a new module to add a CMS block that contains my dynamic block to my checkout page. I have been able to get the CMS block to display and can see the dynamic block, but the content in the dynamic block is not displaying.

enter image description here

The CMS block with the dynamic block in it:

enter image description here

The dynamic block:

enter image description here

My segment is set up correctly, because I can drop the dynamic block on the home page and see the content there when I have added the item to the cart.

enter image description here

Conditions for customer segment:

enter image description here

Below is the code for my module to add the CMS block to checkout.

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="MagentoCheckoutModelCompositeConfigProvider">
    <arguments>
        <argument name="configProviders" xsi:type="array">
            <item name="cms_block_config_provider" xsi:type="object">VendorModuleModelConfigProvider</item>
        </argument>
    </arguments>
</type>
<type name="VendorModuleModelConfigProvider">
    <arguments>
        <argument name="blockId" xsi:type="string">cms_block_id</argument>
    </arguments>
</type>
</config>

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

<?php

namespace VendorModuleModel;

use MagentoCheckoutModelConfigProviderInterface;
use MagentoCmsBlockWidgetBlock;

class ConfigProvider implements ConfigProviderInterface
{
protected $cmsBlockWidget;

public function __construct(Block $block, $blockId)
{
    $this->cmsBlockWidget = $block;
    $block->setData('block_id', $blockId);
    $block->setTemplate('Magento_Cms::widget/static_block/default.phtml');
}

public function getConfig()
{
    return [
        'cms_block' => $this->cmsBlockWidget->toHtml()
    ];
}
}

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<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="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="billing-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="cms-block" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                    <item name="config" xsi:type="array">
                                                         <item name="template" xsi:type="string">Vendor_Module/cms-block</item>
                                                    </item>
                                                    <item name="sortOrder" xsi:type="string">1</item>
                                             </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

app/code/Vendor/Module/view/frontend/web/template/cms-block.html

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

What do I need to do get the dynamic content to display in Checkout?

We need to be able to drop multiple dynamic blocks into the CMS block, so using a specific ID will not work.