Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Rearrange the order of attributes in layered navigation

    General Discussion
    4
    5
    543
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      thirdeyetechs last edited by

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

      1 Reply Last reply Reply Quote 0
      • V
        Vaishali Agarwal last edited by

        @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.

        H 1 Reply Last reply Reply Quote 0
        • H
          harsha m @Vaishali Agarwal last edited by

          @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.

          1 Reply Last reply Reply Quote 0
          • devansh-webkul
            devansh-webkul last edited by 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.

            H 1 Reply Last reply Reply Quote 0
            • H
              harsha m @devansh-webkul last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post