Dependent filters JS

Viewed 38

I set up dependent filters mFilter (from the mSearch2 Modx component).

There is a script that works fine, provided that the product card has the option brand (Ford) and model (Ford Galaxy). That is, the name of the model - contains the brand

img1

When selecting a specific brand, select appears and option works fine

I have a large database of products and there is no way to change it (change the name of the model to make brand + model)

Question: How to create a condition that checks if there is a model (Galaxy) in the admin panel in the product options for a given brand (for example, Ford)?

img2

Sorry for my English, I hope my question is clear)

<script>
var modelFilter = {
    // Our selectors
    options: {
        marka: '#mse2_tv\\|marka',
        model: '#mse2_tv\\|model',
    },
    // Initializing the function
    initialize: function() {
        $this = this;
        // We get the elements we need and save them as object properties
        this.marka = $(this.options['marka']);
        this.model = $(this.options['model']);

        // We look into parameters of the address line in search of the chosen brand 
        var params = mSearch2.Hash.get();
        // If there is no such brand there - we turn off models 
        if (params['marka'] == undefined) {
            $this.disableModel();
        }
        // If there is such brand there - we turn on models 
        else {
            $this.enableModel();
        }

        // We add an operator for brand change 
        this.marka.find('select').on('change', function() {
            // If something is selected, we turn on models 
            if ($(this).val() != '') {
                // We switch model to the first point 'Select from the list' 
                $this.model.find('option:first').attr('selected', true);
                // Then we activate block 
                $this.enableModel();
            }
            // If nothing is selected, we turn off models 
            else {
                $this.disableModel();
            }
        })
    },

    // Turning off models function 
    disableModel: function() {
        // We look for all fields witn an unempty value
        $this.model.find('option[value!=""]').attr('selected', false).attr('disabled', true);
        // Then we hide the whole block 
        $this.model.hide();
    },

   // Turning on models function 
    enableModel: function() {
        // We get the car brand
        var marka = this.marka.find(':selected').text().replace(/\(.*?\)$/, '').replace(/\s+$/, '');
        var re = new RegExp('^' + marka);
        // Then we go through all models and check their names
        $this.model.find('option').each(function() {
            var $this = $(this);
            // If the name does not fit, model should be turned off 
            if (!$this.text().match(re) && $this.prop('value') != '') {
                $this.attr('disabled', true);
                $this.hide();
            }
            // If it doesm model should be turned on
            else {
                $this.attr('disabled', false);
                $this.show();
            }
        });
        // Then we show the whole block witn models 
        $this.model.show();
    },

}

// Script begins to work when the document is fully downloaded 
$(document).ready(function() {
    // And if on the page there are filters 
    if ($('#mse2_mfilter').length > 0) {
        modelFilter.initialize();
    }
});
</script>
0 Answers
Related