In Magento 2, how to bypass cache for a custom block template extended from \Magento\Swatches\Block\Product\Renderer\Listing\Configurable?

Question

Recently I customized category listing page to auto-select the color swatch in listing page when a color swatch is selected in the layered navigation filter.

Everything is working fine with cache disabled. If the cache is enabled, even though the filters are cleared, the previously selected swatches remain selected.

I know this is because the template is getting cached. I tried using cacheable="false" but no use. Can anyone please help me to resolve this, I just want a block not to be cached or any other better way to achieve this.

For your reference here is the piece of code I added in the "renderer.phtml" template. Added "colorOptionId: '<?php echo $colorOptionId ?>'" to pass it to swatch-renderer.js.

<script>
require([
    'jquery',
    'jquery/ui',
    'Magento_Swatches/js/swatch-renderer',
    'Magento_Swatches/js/catalog-add-to-cart',
    'priceBox'
], function ($) {
    var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;

    $('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
        selectorProduct: '.product-item-details',
        colorOptionId: '<?php echo $colorOptionId ?>',
        colorOption: '<?php echo $color ?>',
        onlySwatches: true,
        enableControlLabel: false,
        numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
        jsonConfig: jsonConfig,
        jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
        mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>'
    });

    var dataPriceBoxSelector = '[data-role=priceBox]',
        dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
        priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

    priceBoxes.priceBox({
        'priceConfig': {
            priceFormat: jsonConfig.priceFormat,
            prices: jsonConfig.prices
        }
    });
});

Answer 1

I resolved using a different approach. As the logic I previously used is within the template, cache caused the problem. Now I injected the additional parameter into "jsonSwatchConfig" array and tried to use it within swatch-renderer.js.

In order to add a parameter in jsonSwatchConfig, you have to override \Magento\Swatches\Block\Product\Renderer\Listing\Configurable.php

To add that parameter within in the "div" override swatch-renderer.js and add that parameter within the function _RenderSwatchOptions. Here is the code sample demonstrating the same with a parameter called "customparam".

_RenderSwatchOptions: function (config, controlId) {
        var optionConfig = this.options.jsonSwatchConfig[config.id],
            optionClass = this.options.classes.optionClass,
            moreLimit = parseInt(this.options.numberToShow, 10),
            moreClass = this.options.classes.moreButton,
            moreText = this.options.moreButtonText,
            countAttributes = 0,
            html = '';

        if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
            return '';
        }

        $.each(config.options, function () {
            var id,
                type,
                value,
                thumb,
                label,
                colorOptionId,
                attr;

            if (!optionConfig.hasOwnProperty(this.id)) {
                return '';
            }

            // Add more button
            if (moreLimit === countAttributes++) {
                html += '<a href="#" class="' + moreClass + '">' + moreText + '</a>';
            }

            id = this.id;
            type = parseInt(optionConfig[id].type, 10);
            value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
            thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
            customparam = optionConfig[id].hasOwnProperty('customparam ') ? optionConfig[id].customparam : '';
            label = this.label ? this.label : '';
            attr =
                ' id="' + controlId + '-item-' + id + '"' +
                ' custom-id="' + customparam + '"'+
                ' aria-checked="false"' +
                ' aria-describedby="' + controlId + '"' +
                ' tabindex="0"' +
                ' option-type="' + type + '"' +
                ' option-id="' + id + '"' +
                ' option-label="' + label + '"' +
                ' aria-label="' + label + '"' +
                ' option-tooltip-thumb="' + thumb + '"' +
                ' option-tooltip-value="' + value + '"' +
                ' role="option"';

            if (!this.hasOwnProperty('products') || this.products.length <= 0) {
                attr += ' option-empty="true"';
            }

            if (type === 0) {
                // Text
                html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
                    '</div>';
            } else if (type === 1) {
                // Color
                html += '<div class="' + optionClass + ' color" ' + attr +
                    ' style="background: ' + value +
                    ' no-repeat center; background-size: initial;">' + '' +
                    '</div>';
            } else if (type === 2) {
                // Image
                html += '<div class="' + optionClass + ' image" ' + attr +
                    ' style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' +
                    '</div>';
            } else if (type === 3) {
                // Clear
                html += '<div class="' + optionClass + '" ' + attr + '></div>';
            } else {
                // Default
                html += '<div class="' + optionClass + '" ' + attr + '>' + label + '</div>';
            }
        });

        return html;
    }