Configurable product using javascript / jquery

Question

Configurable Product

Hi,

I'm trying to generate configurable products for the selected attributes using JavaScript. I want to generate 3.0_Aluminium_1219, 3.0_Amber_1219, 3.8_Aluminium_1219 and 3.8_Amber_1219.

I have used the following script to store the option value in array

$('.complexSel').on('select2:select', function (e) {

        var obj = {}
        var keysArray = new Array();
        var price = $('.complexSel').find(':selected');
        $.each(price, function(index){
            keysArray.push($(this).attr('data-mst-id'));
            if($(this).attr('data-mst-id') in obj ) {
                obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
            }else{
                obj[$(this).attr('data-mst-id')] = new Array();
                obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
            }
        });
        var unique = keysArray.filter(function(itm, i, keysArray) {
            return i == keysArray.indexOf(itm);
        });
        console.log(obj);
        
    });

enter image description here

Please help me to achieve the result

Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jan 27 '22 at 12:52
@mplungjan I also want to guide askers with such comments as yours, can I find them prebuilt in StackOverflow or do we need to type it completely every time. Sorry, it's not related to this question but I was unable to find so asking you. Thanks in advance :) — Shivam Sharma, Jan 27 '22 at 13:57
@ShivamSharma [autoreviewcomments](https://chrome.google.com/webstore/detail/autoreviewcomments/bcfoamnigomkoaaiceppbbdlembpeejc?hl=en) — mplungjan, Jan 27 '22 at 14:07

score 0 · Answer 1 · answered Jan 29 '22 at 08:04

used the following function to solve this issue.

$('.complexSel').on('change', function (e) {
            var obj = {}
            //var obj = new Array();
            var price = $('.complexSel').find(':selected');
            $.each(price, function(index){
                if($(this).attr('data-mst-val') in obj ) {
                    obj[$(this).attr('data-mst-val')].push($(this).text());
                }else{
                    obj[$(this).attr('data-mst-val')] = new Array();
                    obj[$(this).attr('data-mst-val')].push($(this).text());
                }
            });

            var cartesianRes = getCartesian(obj);
            console.log(cartesianRes);
            
            /* OUTPUT AS FOLLOWS*/
            /*
            [
                {
                    "Size": "3.0",
                    "Color": "Aluminum"
                },
                {
                    "Size": "3.0",
                    "Color": "Amber"
                },
                {
                    "Size": "3.8",
                    "Color": "Aluminum"
                },
                {
                    "Size": "3.8",
                    "Color": "Amber"
                }
            ]
            
            */
        });
        function getCartesian(object) {
            return Object.entries(object).reduce((r, [k, v]) => {
                var temp = [];
                r.forEach(s =>
                    (Array.isArray(v) ? v : [v]).forEach(w =>
                        (w && typeof w === 'object' ? getCartesian(w) : [w]).forEach(x =>
                            temp.push(Object.assign({}, s, { [k]: x }))
                        )
                    )
                );
                return temp;
            }, [{}]);
        }

Your answer could be improved by adding more information on what the code does and how it helps the OP. — Tyler2P, Jan 29 '22 at 08:45

Configurable product using javascript / jquery

1 Answers1