1

How to extend the Swatch rendered js file in my custom module?

I have override the phtml template files.

<script type="text/x-magento-init">
    {
        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $productId ?>]": {
            "Custom_Swatch/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() ?>",
                "flipImageAttribute": "<?= /* @escapeNotVerified */ $getFlipAttributeLabel ?>",
                "isFlipEnabled":"<?= /* @escapeNotVerified */ $isFlipEnabled ?>"
            }
        }
    }
</script>

I have added Require JS file in that I have mapped my custom JS file like this -

var config = {
    map: {
        '*': {
              'Magento_Swatches/js/swatch-renderer':'Custom_Swatch/js/swatch-renderer'
        }
    }
};

After this I have copied the Swatch-renderer.js in the shared location and the file is working fine. But I only want the specific function in my file, and not all. And that is done by extended. I read that mixin does something like that but I am not sure on how to do that.

0

You can try this way:

custom_swatch/view/frontend/templates/product/view/renderer.phtml

<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt" data-role="swatch-options"></div>

<script type="text/x-magento-init">
{
    "[data-role=swatch-options]": {
        "Custom_Swatch/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() ?>",
            "flipImageAttribute": "<?= /* @escapeNotVerified */ $getFlipAttributeLabel ?>",
            "isFlipEnabled":"<?= /* @escapeNotVerified */ $isFlipEnabled ?>"
        }
    }
}

/custom_swatch/view/frontend/web/js/swatch-renderer.js

/** make your edit **/

custom_swatch/etc/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\Swatches\Block\Product\Renderer\Configurable">
    <plugin name="updateBlockTemplate" type="Custom\Swatch\Plugin\Product\Renderer\ConfigurablePlugin" />
</type>

Custom/Swatch/Plugin/Product/Renderer/ConfigurablePlugin

<?php
namespace Custom\Swatch\Plugin\Product\Renderer;

use Magento\Swatches\Block\Product\Renderer\Configurable;

class ConfigurablePlugin
{
    public function beforeSetTemplate(Configurable $subject, $template) 
    {
        return ['Custom_Swatch::product/view/renderer.phtml'];
    }
}
  • I am sorry, can you explain if I will delete the functions not needed from swatch-renderer.js how the file will work? – Tester Oct 12 '18 at 12:33
0

This one is through mixin. Inside your requirejs-config.js

var config = {
...
config: {
    mixins: {
        'Magento_Swatches/js/swatch-renderer': {
            'js/swatch-renderer-mixin': true    // Add your module name if not in theme's js folder.
        }
    }
}};

Next in js/swatch-renderer-mixin.js override widget and return same response as original

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

return function (widget) {
    $.widget('mage.SwatchRenderer', widget, {

    });   
    return $.mage.SwatchRenderer;
};
});

Here you can override methods, just call this._super to call parent

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.