Cfrtjryk

I’ve written some code that does the following:

1. Push the selected radio buttons (default options set by PHP) into an array (selectedOptions)




2. Loop over a JSON array (from Shopify) and for each array (variants) push the values into an array (variantOptions)




3. If the variantOptions array is equal to the selectedOptions (i.e if the users selection matches a valid product variant) then break the loop and update a few DOM elements, otherwise declare the product unavailable.

My question is... is this the most efficient way to do this? Is it okay to be looping multiple times for my checks and should I be storing the fetches JSON array somehow so I’m not fetching it via the API on every radio button change?

function optionChange() {



    var gid = $('[data-gid]').attr('data-gid');



    selectedOptions = new Array();

    $('.product__options .option input:radio:checked').each(function() {

        var $this = $(this),

            selectedOption = $this.val();

        selectedOptions.push(selectedOption);

    });



    client.product.fetch(gid).then(function(product) {

        console.log('product ↓');

        console.log(product);



        $.each(product.variants, function(index, variant) {



            variantOptions = new Array();

            $.each(variant.selectedOptions, function(index, option) {

                variantOptions.push(option.value);

            });



            if (variantOptions.join() == selectedOptions.join()) {

                console.log('variant ↓');

                console.log(variant);

                $('a.add-to--cart').attr('data-variant-id', variant.id);

                $('a.add-to--cart').text('Add to Cart');

                $('span.money').text(parseFloat(variant.price).toLocaleString(navigator.language, {style: 'currency', currency: 'GBP'}));

                return false;

            } else {

                $('a.add-to--cart').attr('data-variant-id', '');

                $('a.add-to--cart').text('Unavaliable');

            }



        });

    });



}

optionChange();

$('.product__options .option input:radio').on('change', optionChange);