0

I want to reload a div section on the product detail page of the configurable product when the configurable variation is selected. How do I achieve that?

require(['jquery','jquery/ui'],function($){
    jQuery(document).on('click', '.swatch-option',function(){
        $('#points-refresh').load(document.URL +  ' #points-refresh');
    })
});

points-refresh is the id of the div section I want to reload whenever I switch one configurable child product to another.

I have tried this. But this does not work. Can anyone tell me the proper way to achieve this?

0

I assume you are using a custom Module name "Company_MyModule"

step 1) Create requirejs-config.js under app/code/Company/MyModule/view/frontend/

File : app/code/Company/MyModule/view/frontend/requirejs-config.js

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

Step 2) Create the JS mixin file swatch-renderer-mixin.js under app/code/Company/MyModule/view/frontend/web/js

File : app/code/Company/MyModule/view/frontend/web/js/swatch-renderer-mixin.js

define(['jquery'], function ($) {
    'use strict';
         var mixin = {         
         _OnClick: function ($this, $widget) {
             //Start Write you Code here for Conf option Click event
             var myDuv = '<div style="width:100%; border:1px solid #95a5a6;padding:10px 0 10px 0;"><center>An option Clicked!.</center></div>';
             $(".product-add-form").prepend(myDuv);
             console.log("========= Config Option OnClick ====================");
             //End you code
             return this._super($this, $widget);
        },
         _OnChange: function ($this, $widget) { 
             //Start Write you Code here for Conf option Change event
             var myDuv = '<div style="width:100%; border:1px solid #95a5a6;padding:10px 0 10px 0;"><center>An option Change!.</center></div>';
             $(".product-add-form").prepend(myDuv);
             console.log("========= Config Option Change ====================");
             //End you code
            return this._super($this, $widget);
         }
    };

    return function (targetWidget) {        
        $.widget('mage.SwatchRenderer', targetWidget, mixin);
        return $.mage.SwatchRenderer;
    };
});

step 3) Clean Magento cache

sudo php bin/magento cache:clean

=========== Demo ==============

enter image description here

| improve this answer | |
0

You can directly select the options by url -

https://domain.com/test8.html#319=662&322=685

https://domain.com/test8.html#super_attribute1=option-value&super_attribute2=option-value

So you can use that concept and implement.

| improve this answer | |

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.