I have created a new custom section for updating content from the cache block. Please check the code below for more details.
app/code/VendorName/ModuleName
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'VendorName_ModuleName',
__DIR__
);
app/code/VendorName/ModuleName/etc
module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="VendorName_ModuleName" setup_version="1.0.0">
</module>
</config>
app/code/VendorName/ModuleName/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\Customer\CustomerData\SectionPoolInterface">
<arguments>
<argument name="sectionSourceMap" xsi:type="array">
<item name="custom_section" xsi:type="string">VendorName\ModuleName\CustomerData\CustomSection</item>
</argument>
</arguments>
</type>
</config>
app/code/VendorName/ModuleName/CustomerData
CustomSection.php
<?php
namespace VendorName\ModuleName\CustomerData;
use Magento\Customer\CustomerData\SectionSourceInterface;
class CustomSection implements SectionSourceInterface
{
protected $resultPageFactory;
public function __construct(
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
}
public function getSectionData()
{
$resultPage = $this->resultPageFactory->create();
$block = $resultPage->getLayout()
->createBlock(\Magento\Framework\View\Element\Template::class)
->setTemplate("VendorName_ModuleName::custom.phtml")
->toHtml();
return [
'customdata' => $block,
];
}
}
app/code/VendorName/ModuleName/etc/frontend
sections.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
<action name="*">
<section name="custom_section"/>
</action>
</config>
app/code/VendorName/ModuleName/view/frontend/layout
default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="custom.file.cacheable" template="VendorName_ModuleName::custom_cacheble.phtml" />
</referenceContainer>
</body>
</page>
app/code/VendorName/ModuleName/view/frontend/templates
custom_cacheble.phtml
<div class="custom-section-show" data-bind="scope: 'section'">
<div data-bind="html: customsection().customdata"></div>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"section": {
"component": "VendorName_ModuleName/js/section"
}
}
}
}
}
</script>
app/code/VendorName/ModuleName/view/frontend/templates
custom.phtml
<?php
// $locale = Locale::acceptFromHttp($_SERVER['HTTP_CF_IPCOUNTRY']);
$locale = 'be';
?>
<?php if ($locale == "be"):?>
<h1>HTML CODE BE</h1>
<?php elseif ($locale == "uk"):?>
<h1>HTML CODE UK</h1>
<?php endif;?>
app/code/VendorName/ModuleName/view/frontend/web/js
section.js
define([
'uiComponent',
'Magento_Customer/js/customer-data'
], function (Component, customerData) {
'use strict';
return Component.extend({
initialize: function () {
this._super();
var sections = ['custom_section'];
customerData.invalidate(sections);
customerData.reload(sections, true);
this.customsection = customerData.get('custom_section');
}
});
});
OUTPUT