Rearrange the order of attributes in layered navigation

thirdeyetechs

Hi,
How to rearrange the order of attributes in layered navigation?

Vaishali Agarwal

@thirdeyetechs said in Rearrange the order of attributes in layered navigation:

Hi,
How to rearrange the order of attributes in layered navigation?

you can only change the rearrange the attribute options orders instead of attributes.

harsha m

@Vaishali-Agarwal After changing the code,we got the expected order while printing that array.But printing in layered navigation section the order of attributes is different.
[connection:protected] => mysql
[table:protected] => attributes
[primaryKey:protected] => id
[keyType:protected] => int
[incrementing] => 1
[with:protected] => Array
(
)

                [withCount:protected] => Array
                    (
                    )

                [perPage:protected] => 15
                [exists] => 1
                [wasRecentlyCreated] => 
                [attributes:protected] => Array
                    (
                        [id] => 34
                        [code] => Vendor2
                        [admin_name] => Vendor
                        [type] => select
                        [validation] => 
                        [position] => 
                        [is_required] => 0
                        [is_unique] => 0
                        [value_per_locale] => 0
                        [value_per_channel] => 0
                        [is_filterable] => 1
                        [is_configurable] => 0
                        [is_user_defined] => 1
                        [is_visible_on_front] => 1
                        [created_at] => 2021-06-22 10:25:51
                        [updated_at] => 2021-06-22 10:25:51
                        [swatch_type] => 
                        [use_in_flat] => 1
                        [is_comparable] => 1
                    )

Here vendor is in first position , But in layered navigation section the price is in first position.

devansh-webkul

@harsha-m ,

This is because in the backend (Admin Panel) it is not implemented yet and in the database positions are present.

So if you try to add a vendor it won't save positions. As clearly seen in your code. Just try to save the positions also.

And one more thing you need to check the sort order of layered navigation also.

Important Note: In Bagisto we have not implemented positions yet.

harsha m

@devansh-webkul Now I got the attribues in expected order.But in view page.The order is different.How to fix it.
<script>
Vue.component('layered-navigation', {

        template: '#layered-navigation-template',

        data: function() {
            return {
                attributes: @json($filterAttributes),

                appliedFilters: {}
            }
        },

        created: function () {
            var urlParams = new URLSearchParams(window.location.search);

            var this_this = this;

            urlParams.forEach(function (value, index) {
                this_this.appliedFilters[index] = value.split(',');
            });
        },

        methods: {
            addFilters: function (attributeCode, filters) {
                if (filters.length) {
                    this.appliedFilters[attributeCode] = filters;
                } else {
                    delete this.appliedFilters[attributeCode];
                }

                this.applyFilter()
            },

            applyFilter: function () {
                var params = [];

                for(key in this.appliedFilters) {
                    if (key != 'page') {
                        params.push(key + '=' + this.appliedFilters[key].join(','))
                    }
                }

                window.location.href = "?" + params.join('&');
            }
        }
    });

    Vue.component('filter-attribute-item', {

        template: '#filter-attribute-item-template',

        props: ['index', 'attribute', 'appliedFilterValues'],

        data: function() {
            let maxPrice  = @json($maxPrice);

            maxPrice = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;

            return {
                appliedFilters: [],

                active: false,

                sliderConfig: {
                    value: [
                        0,
                        0
                    ],
                    max: maxPrice,
                    processStyle: {
                        "backgroundColor": "#FF6472"
                    },
                    tooltipStyle: {
                        "backgroundColor": "#FF6472",
                        "borderColor": "#FF6472"
                    }
                }
            }
        },

        created: function () {
            if (!this.index)
                this.active = true;

            if (this.appliedFilterValues && this.appliedFilterValues.length) {
                this.appliedFilters = this.appliedFilterValues;

                if (this.attribute.type == 'price') {
                    this.sliderConfig.value = this.appliedFilterValues;
                }

                this.active = true;
            }
        },

        methods: {
            addFilter: function (e) {
                this.$emit('onFilterAdded', this.appliedFilters)
            },

            priceRangeUpdated: function (value) {
                this.appliedFilters = value;

                this.$emit('onFilterAdded', this.appliedFilters)
            },

            clearFilters: function () {
                if (this.attribute.type == 'price') {
                    this.sliderConfig.value = [0, 0];
                }

                this.appliedFilters = [];

                this.$emit('onFilterAdded', this.appliedFilters)
            }
        }

    });

</script>

I want to change this code.