I achieved this with sections.
I am passing the values as json in the CustomSection.php file in app/code/Namespace/Module/CustomerData.
<?php
namespace Namespace\Module\CustomerData;
use Magento\Customer\CustomerData\SectionSourceInterface;
class CustomSection implements SectionSourceInterface
{
public function getSectionData()
{
return [
'customdata' => "We are getting data from custom section",
'deal'=> json_encode([['id'=>'14','display'=>'true'],['id'=>'11','display'=>'false']]),
];
}
}
Here is the phtml file
<?php $_product = $block->getProduct();
$buttonTitle ="Add To Cart"; ?>
<div class="aureatelabs-custom-section"data-bind="scope: 'section'">
<p data-bind="text: customsection().customdata"></p>
<p data-bind="text: customsection().deal"></p>
<!--ko foreach: JSON.parse(customsection().deal)-->
<!--ko if: ($data.id == <?php echo $_product->getId()?> && $data.display == true)-->
<p class="label" data-bind="text: id"></p>
<button type="submit"
title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
class="action primary tocart"
id="product-addtocart-button">
<span><?= $block->escapeHtml($buttonTitle) ?></span>
</button>
<!-- /ko -->
<!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"section": {
"component": "Namespace_Module/js/section"
}
}
}
}
}
</script>