Magento2: Extending swatch functionality using javascript mixins does not work in Safari and MS Edge

[srenon]

Preconditions

Magento 2.1.8

Steps to reproduce

Create a custom module with mixin as describe in http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_mixins.html for Magento_Swatches/js/swatch-renderer. Then go a category page that has products with swatches and reviews your console log in each browser to see if the "mixin" got executed. Please disable browser cache because sometimes after viewing multiple pages in Safari the mixins will get download/cached and start to work sporadically.

app/code/MagePal/SwatchExtend/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'MagePal_SwatchExtend/js/swatch-renderer-mixin': true
            }
        }
    }
};

app/code/MagePal/SwatchExtend/view/frontend/web/js/swatch-renderer-mixin.js

define([
    'jquery'
], function ($) {
    'use strict';

    return function (widget) {
        console.log('Hello from SwatchExtend');

        $.widget('mage.SwatchRenderer', widget, {
            _Rebuild: function () {
                console.log('Hello from rebuild method');
                return this._super();
            }
        });

        return $.mage.SwatchRenderer;
    }
});

Full source code to replicate the issue - https://github.com/srenon/Magento2-SwatchExtend

Expected result

Console.log() will trigger in all browser consistently

Actual result

Only work consistently in Chrome and Firefox.
Work sporadically in Safari, Mobile Safari and MS Edge (I did not test on any other browsers).

Please note: if you are testing in an extremely slow environment (i.e local dev, cache disabled etc) then it may work in safari but once you move to a faster environment it will not work anymore. So if it working consistently in Safari and your environment is in default or developer mode then switch your environment into production mode.

[lduivenvoorde-zz]

Having the same issue on Firefox, on Chrome it works perfectly, but Firefox seems to ignore the extended file

[srenon]

@lduivenvoorde ... our solution was to rewrite https://github.com/magento/magento2/blob/2.1/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml in our local theme

(should work for M2 < 2.2)

app/design/frontend/{COMPANY}/{THEME}/Magento_Swatches/templates/product/listing/renderer.phtml

<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>" data-role="swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>

<script type="text/x-magento-init">
    {
        "[data-role=swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>]": {
            "Magento_Swatches/js/swatch-renderer": {
                "selectorProduct": ".product-item-details",
                "onlySwatches": true,
                "enableControlLabel": false,
                "numberToShow": <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
                "jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
            }
        }
    }
</script>

[nuovecode]

Same issue for me. Firefox and Safari can't see the extended file

[nuovecode]

Thanks @srenon!! your solution works nice also in M2.0 if you change the name of the resource

<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>" data-role="swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
<script type="text/x-magento-init">
    {
        "[data-role=swatch-option-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>]": {
            "SwatchesRenderer": {
                "selectorProduct": ".product-item-details",
                "onlySwatches": true,
                "enableControlLabel": false,
                "numberToShow": <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
                "jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
                "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
            }
        }
    }
</script>

[Brengineer]

@srenon - Thanks for the fix!
My issue was the same as @lduivenvoorde: It worked perfectly in Chrome, sporadically in Safari, and not at all in Firefox. Using x-magento-init worked for me in M2.2, although I left the other 2.2 functionality as it was, so my product/listing/renderer.phtml ended up looking like this:

<div class="swatch-opt-<?= $id ?>"></div>
<script type="text/x-magento-init">
    {
        ".swatch-opt-<?= $id ?>": {
            "Magento_Swatches/js/swatch-renderer": {
                "selectorProduct": ".product-item-details",
                "onlySwatches": true,
                "enableControlLabel": false,
                "numberToShow": <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
                "jsonConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                "jsonSwatchConfig": <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
                "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
            }
        }
    }
</script>
<script>
    require([
        'jquery',
        'jquery/ui',
        'Magento_Swatches/js/swatch-renderer',
        'Magento_Swatches/js/catalog-add-to-cart',
        'priceBox'
    ], function ($) {
        var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
            dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $id ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes.priceBox({
            'priceConfig': {
                priceFormat: jsonConfig.priceFormat,
                prices: jsonConfig.prices
            }
        });
    });
</script>

[srenon]

@Brengineer ... take a look at PR to fix 2.2 https://github.com/magento/magento2/pull/12929/files

[magento-engcom-team]

@srenon, thank you for your report.
We've acknowledged the issue and added to our backlog.

[magento-engcom-team]

Hi @srenon. Thank you for your report.
The issue has been fixed in magento/magento2#12929 by @srenon in 2.2-develop branch
Related commit(s):

• 1350c77193f939e40deea8101cf8fd6befde4abe
• 33261e0b5096a249a0bd0a239a4c2b9f4cbfdc0c
• 4fca69d21b15a2614d3df11cfc51bbaba0217c4f
• 97779a63eb34d72f82a34ba430cd37b7356f9b9c
• 494c9c08a1c9491f211f6d234308fc0a7d9f8d31
• 20b9575ba10c9de8fc26b550fb3b675bd72d766a
• 089b46898368b06c1a637e0953662a05a206608f
• ca471e473235e9884ad77131868162c44fa530d0
• c84087e4d8d35d1879b3adf6e7f5a95148081df7
• ec51bd27f89fee5152c2d818b0422881d48f6725
• d4fa8a57023de659499a3751cd78e9884124f90f

The fix will be available with the upcoming 2.2.5 release.

[magento-engcom-team]

Hi @srenon. Thank you for your report.
The issue has been fixed in magento/magento2#12928 by @srenon in 2.1-develop branch
Related commit(s):

• 155f91c71dba48f3b27f86364a15675b7ab321c7

The fix will be available with the upcoming 2.1.14 release.

[vkublytskyi]

Hi @srenon. Thank you for your report.
The issue has been fixed in magento/magento2#14247 by @rostyslav-hymon in 2.3-develop branch
Related commit(s):

• 3b276059dba0da74bfac7c90779ebc78471349c9
• 7d512766bd2f3235b2aeeb5a513a2c59d76b1788
• 0044fef110a1f17eab1be8efde090be2320729bf

The fix will be available with the upcoming 2.3.0 release.