We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    You can try below custom module and modify according to your requirement.

    1. app/code/Magemonkey/Simpleconfigure/registration.php

    <?php
    
    MagentoFrameworkComponentComponentRegistrar::register(
        MagentoFrameworkComponentComponentRegistrar::MODULE,
        'Magemonkey_Simpleconfigure',
        __DIR__
    );

    2. app/code/Magemonkey/Simpleconfigure/composer.json

    {
        "name": "magemonkey/simpleconfigure",
        "description": "Magemonkey Simpleconfigure",
        "require": {
          "php": "~5.6.0|7.0.2|~7.0.6",
          "magento/module-store": "0.74.0-beta4",
          "magento/module-theme": "0.74.0-beta4",
          "magento/module-widget": "0.74.0-beta4",
          "magento/module-backend": "0.74.0-beta4",
          "magento/module-catalog": "0.74.0-beta4",
          "magento/module-email": "0.74.0-beta4",
          "magento/module-ui": "0.74.0-beta4",
          "magento/module-variable": "0.74.0-beta4",
          "magento/module-media-storage": "0.74.0-beta4",
          "magento/framework": "0.74.0-beta4",
          "magento/magento-composer-installer": "*"
        },
        "type": "magento2-module",
        "version": "0.74.0-beta4",
        "license": [
            "OSL-3.0",
            "AFL-3.0"
        ],
        "extra": {
            "map": [
                [
                    "*",
                    "Magemonkey/Simpleconfigure"
                ]
            ]
        }
    }

    3. app/code/Magemonkey/Simpleconfigure/etc/module.xml

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
        <module name="Magemonkey_Simpleconfigure" setup_version="1.0.0">
            <sequence>
                <module name="Magento_Backend"/>
                 <module name="Magento_Sales"/>
                <module name="Magento_Quote"/>
                <module name="Magento_Checkout"/>
                <module name="Magento_Cms"/>
            </sequence>
    	</module>
    </config>

    4. app/code/Magemonkey/Simpleconfigure/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="MagentoConfigurableProductBlockProductViewTypeConfigurable">
            <plugin disabled="false" name="Magemonkey_Simpleconfigure_Plugin_ConfigurableProduct_Block_Product_View_Type_Configurable" sortOrder="10" type="MagemonkeySimpleconfigurePluginConfigurableProductBlockProductViewTypeConfigurable"/>
        </type>
     
        <type name="MagentoSwatchesBlockProductRendererConfigurable">
            <plugin disabled="false" name="Magemonkey_Simpleconfigure_ConfigurableSkuSwitch_Plugin_Magento_Swatches_Block_Product_Renderer_Configurable" sortOrder="10" type="MagemonkeySimpleconfigurePluginSwatchesBlockProductRendererConfigurable"/>
        </type>
    </config>

    5. app/code/Magemonkey/Simpleconfigure/Plugin/Swatches/Block/Product/Renderer/Configurable.php

    <?php
    namespace MagemonkeySimpleconfigurePluginSwatchesBlockProductRenderer;
     
    class Configurable
    {
        public function afterGetJsonConfig(MagentoSwatchesBlockProductRendererConfigurable $subject, $result) {
     
            $jsonResult = json_decode($result, true);
            $jsonResult['skus'] = [];
            $jsonResult['names'] = [];
     
            foreach ($subject->getAllowProducts() as $simpleProduct) {
               $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
               $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
            }
            $result = json_encode($jsonResult);
            return $result;
    	}
    }

    6. app/code/Magemonkey/Simpleconfigure/Plugin/ConfigurableProduct/Block/Product/View/Type/Configurable.php

    <?php
    namespace MagemonkeySimpleconfigurePluginConfigurableProductBlockProductViewType;
     
    class Configurable
    {
     
        public function afterGetJsonConfig(
            MagentoConfigurableProductBlockProductViewTypeConfigurable $subject,
            $result
    	) {
     
        $jsonResult = json_decode($result, true);
        $jsonResult['skus'] = [];
        $jsonResult['names'] = [];
            foreach ($subject->getAllowProducts() as $simpleProduct) {
                $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
                $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
    	}
        $result = json_encode($jsonResult);
            return $result;
    	}
    }

    7. app/code/Magemonkey/Simpleconfigure/Plugin/ConfigurableProduct/Block/Product/Renderer/Configurable.php

    <?php
    namespace MagemonkeySimpleconfigurePluginSwatchesBlockProductRenderer;
     
    class Configurable
    {
        public function afterGetJsonConfig(MagentoSwatchesBlockProductRendererConfigurable $subject, $result) {
     
            $jsonResult = json_decode($result, true);
            $jsonResult['skus'] = [];
            $jsonResult['names'] = [];
     
            foreach ($subject->getAllowProducts() as $simpleProduct) {
               $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
               $jsonResult['names'][$simpleProduct->getId()] = $simpleProduct->getName();
            }
            $result = json_encode($jsonResult);
            return $result;
    	}
    }

    8. app/code/Magemonkey/Simpleconfigure/view/frontend/requirejs-config.js

    var config = {
        config: {
            mixins: {
                'Magento_ConfigurableProduct/js/configurable': {
                    'Magemonkey_Simpleconfigure/js/model/skuswitch': true
                },
                'Magento_Swatches/js/swatch-renderer': {
                    'Magemonkey_Simpleconfigure/js/model/swatch-skuswitch': true
                }
            }
    	}
    };

    9. app/code/Magemonkey/Simpleconfigure/view/frontend/web/js/model/swatch-skuswitch.js

    define([
        'jquery',
        'mage/utils/wrapper'
    ], function ($, wrapper) {
    	'use strict';
     
        return function(targetModule){
            var updatePrice = targetModule.prototype._UpdatePrice;
            targetModule.prototype.configurableSku = $('div.product-info-main .sku .value').html();
            targetModule.prototype.configurableName = $('div.product-info-main .page-title .base').html();
            var updatePriceWrapper = wrapper.wrap(updatePrice, function(original){
                var allSelected = true;
                for(var i = 0; i<this.options.jsonConfig.attributes.length;i++){
                    if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){
                    	allSelected = false;
                    }
                }
                var simpleSku = this.configurableSku;
                var simpleName = this.configurableName;
                if (allSelected){
                    var products = this._CalcProducts();
                    simpleSku = this.options.jsonConfig.skus[products.slice().shift()];
                    simpleName = this.options.jsonConfig.names[products.slice().shift()];
                }
                $('div.product-info-main .sku .value').html(simpleSku);
                $('div.product-info-main .page-title .base').html(simpleName);
                  return original();
            });
     
            targetModule.prototype._UpdatePrice = updatePriceWrapper;
            return targetModule;
    	};
    });

    10. app/code/Magemonkey/Simpleconfigure/view/frontend/web/js/model/skuswitch.js

    define([
        'jquery',
        'mage/utils/wrapper'
    ], function ($, wrapper) {
    	'use strict';
     
        return function(targetModule){
     
            var reloadPrice = targetModule.prototype._reloadPrice;
            var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
            var result = original();
            var simpleSku = this.options.spConfig.skus[this.simpleProduct];
            var simpleName = this.options.spConfig.names[this.simpleProduct];
     
                if(simpleSku != '') {
                    $('div.product-info-main .sku .value').html(simpleSku);
                }
                if(simpleName != '') {
                    $('div.product-info-main .page-title .base').html(simpleName);
                }
                return result;
            });
            targetModule.prototype._reloadPrice = reloadPriceWrapper;
            return targetModule;
    	};
    });

     

    field_5bfb909c5ccae

      Get a Free Quote