Execute mixin only when my custom module is enabled from configuration

Question

I've implemented swatch-renderer-mixin through require-js. It's working fine but I need to only run it when my module is enabled. What's the best way to check it in my mixin.js file? This is my requirejs-config file:

var config = {
 config: {
 mixins: {
 'Magento_Swatches/js/swatch-renderer': {
 'Vendor_Module/js/swatch-renderer-mixin': true
 },
 'mage/gallery/gallery': {
 'Vendor_Module/js/gallery-mixin': true
 }
 }
 }
};

Answer 1

Create the mixin as part of your custom module, then whenever the module is disabled your mixin will not load.

• Abdul Samad Abbasi: I've updated my answer with requirejs file code. Sorry, I don't understand how can I make mixin as part of my custom module. Can you elaborate a bit?
• Ben Crook: Where are your JS files located, in the theme? If so you can move them over to your module and they will now be included in your module and not the theme, so when the module is disabled the files will not load. Does that help?
• Abdul Samad Abbasi: My JS files are in my module. and FYI, it's just like a dummy enable/disable you know, where we need to check isEnabled() at every php function. So disabling that doesn't effect JS files. What's a better way of disabling modules?
• Ben Crook: When you say disabling do you mean disabling the whole module or a custom feature flag?
• Abdul Samad Abbasi: I mean disabling from configurations only, the field defined by system.xml and you know it has no effect on anything when we disable our module, unless we check enabled/disable above every module feature by getting configuration value of this field

Answer 2

It Can be achieved by this way

Vendor\Module\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\Framework\View\Page\Config\Renderer">
 <plugin name="Vendor_Module::DisableJsMixins" type="Vendor\Module\Plugin\View\Page\Config\Renderer" />
 </type>
</config>

Vendor\Module\Plugin\View\Page\Config\Renderer.php

<?php
namespace Vendor\Module\Plugin\View\Page\Config;
use Magento\Framework\App\CacheInterface;
use Magento\Framework\View\Asset\File;
use Magento\Framework\View\Page\Config;
use Magento\Framework\View\Page\Config\Renderer as MagentoRenderer;
use Vendor\Module\Helper\Data as helper;
use Magento\Framework\View\Asset\Repository;
use Magento\Framework\View\Asset\GroupedCollection; 
class Renderer 
{
 /**
 * @var Repository
 */
 private $assetRepo;
 /**
 * @var GroupedCollection
 */
 private $pageAssets;
 /**
 * @var helper
 */
 private $helper;
 public function __construct(
 helper $helper,
 Repository $assetRepo,
 GroupedCollection $pageAssets 
 ) {
 $this->helper = $helper;
 $this->assetRepo = $assetRepo;
 $this->pageAssets = $pageAssets; 
 }
 /**
 * Disable js mixins if module is disabled
 *
 * @param MagentoRenderer $subject
 * @param array $resultGroups
 *
 * @return array
 */
 public function beforeRenderAssets(MagentoRenderer $subject, $resultGroups = [])
 {
 if (!$this->helper->getStatus()) { 
 $file = 'Vendor_Module::js/moduledisable.js';
 $asset = $this->assetRepo->createAsset($file);
 $this->pageAssets->insert($file, $asset, 'requirejs/require.js');
 return [$resultGroups];
 }
 return [$resultGroups];
 }
}

Vendor/Module/view/frontend/web/js/moduledisable.js

window.vendor_module_disabled = true;

Now in your requirejs-config.js

var module_mixin_enabled = !window.vendor_module_disabled,
 config;
config = {
 config: {
 mixins: {
 'Magento_Swatches/js/swatch-renderer': {
 'Vendor_Module/js/swatch-renderer-mixin': module_mixin_enabled
 },
 'mage/gallery/gallery': {
 'Vendor_Module/js/gallery-mixin': module_mixin_enabled
 }
 }
 }
};

Answer 3

To conditionally apply a mixin based on a configuration value in Magento, you need to combine both frontend (JavaScript) and backend (PHP) code.

etc/frontend/di.xml

...
<type name="Magento\Checkout\Model\CompositeConfigProvider">
 <arguments>
 <argument name="configProviders" xsi:type="array">
 <item name="checkout_your_config" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
 </argument>
 </arguments>
 </type>
...

Create the Configuration in my case I created checkout config

Vendor\Module\Model\ConfigProvider

...
class ConfigProvider implements ConfigProviderInterface
{
 /**
 * @var YourHelper
 */
 protected $helper;
 /**
 * ConfigProvider constructor.
 *
 * @param YourHelper $helper
 */
 public function __construct(
 YourHelper $helper
 ) {
 $this->helper = $helper;
 }
 /**
 * Get configuration values for checkout.
 *
 * @return array
 */
 public function getConfig()
 {
 $config = [];
 $config['yourFeatureEnabled'] = $this->helper->isFeatureEnabled() ?? false;
 return $config;
 }
} 

Now that the configuration value is available in mixin js, you can conditionally apply your mixin logic based on the configuration value on initialize() on any other method

...
initialize: function () {
 this._super();
 console.log(window.checkoutConfig.yourFeatureEnabled);
 if (window.checkoutConfig.yourFeatureEnabled) { // Check if feature is set to enabled in configuration
 this.headers = {
 'Auth-Token': this.apiToken,
 'accept': 'application/json'
 }; 
 this.initDebouncedInput();
 }
 return this;
}
...

If the configuration is not enabled, none of this logic is executed.