Update programmatically config content text/x-magento-init script inside of phtml template

Question

For a requirement I had to override the config of the configurable.js script that is initialised inside configurable.phtml, this one specifically:

<script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                        'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            }
        }
    </script>

I did so with a plugin using the afterGetJsonConfig method and adding my data to that spConfig after loading the template with ajax. Everything looks good when calling the template the first time, but I need to change and keep those changes to the configuration of the component after a validation via an ajax call. The problem is that, because the template is cached, it will always return the initial content.

This is confirmed by the fact that if I disable block_html cache the content is updated correctly and if I turn the cache on it doesn't and it doesn't even call then afterGetJsonConfig method on successive page reload. Is there a way to force disable the cache or get the most updated content and retain it without being forced to disable the cache for the whole page?

Answer 1

Try adding cacheable="false" argument to the block that you have assigned the .phtml template in your layout .XML file

<block class=".." name="..." template="..." cacheable="false" />

This will remove the block from the caching list, basically.

More details can be found here

Answer 2

Yes. your code should be ok. but I want cache it and if it's updated in backend, I want update "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>

then after visit the product page,it need cache the data again.