Price range slider handles have a strange behaviour when dragged to the most left or right positions and product count suggestion is incorrect.

[radub]

Preconditions

Magento 2.4.4 Community Edition

Magento Version : 2.4.4 Community Edition

ElasticSuite Version : smile/elasticsuite 2.10.10

Environment : local, test, prod

Third party modules : amasty/module-b2b-suite-premium

I have disabled this module and the issue is still reproducing.

Steps to reproduce

1. Install and enable ElasticSuite
2. In the Store Front try to use the price filter slider (see attached screen recording)
3. The slider handles values are wrong and so is the suggestion.

Expected result

1. When dragging the max value slider handle to the left (min price = 1$) the handle should not go beyond this value and the suggested number of products for this price range should be correct.
2. When dragging the min value slider handle to the right (max price = 6235,99$) should not go beyond this value.

Actual result

1. When dragging the max value slider handle to the left (min price = 1$) the handle value is 0,99$ - it is suggested that there is one product in that price range. When clicking ok, no products are listed although the suggestion previously indicated 1 product. In this case the suggestion was wrong as there are no products in that price range.
2. When dragging the min value slider handle to the right (max price = 6235,99$) the handle value is 6236$

https://user-images.githubusercontent.com/60108/180422775-50ea26f4-b498-4cd8-b0e6-1bf3e0a3fb8a.mov

Layered navigation settings:

for case 1) this is the line of code responsible vendor/smile/elasticsuite/src/module-elasticsuite-catalog/view/frontend/web/js/range-slider-widget.js - smileEs.rangeSlider._refreshDisplay line 107

[vahonc]

Hello @radub,

Are you using some custom theme on your Magento website?

BR, Vadym

[radub]

Hi @vahonc,

We are using Luma + some customisations (just css as far as PLP is concerned) with ElasticSuite on top.

One thing I've noticed, around this block of code

// vendor/smile/elasticsuite/src/module-elasticsuite-catalog/view/frontend/web/js/range-slider-widget.js - line 107
if (this.element.find('[data-role=to-label]')) {
    var to = this._getOriginalValue(this.to) - this.options.maxLabelOffset;
    if (this.showAdaptiveSlider && to < this._getOriginalValue(this.minValue)) {
        to = this._getOriginalValue(this.to);
    }
    this.element.find('[data-role=to-label]').html(this._formatLabel(to));
}

// maxLabelOffset : 0.01 is defined around line 38 in the same file

if I replace

var to = this._getOriginalValue(this.to) - this.options.maxLabelOffset;

with

// basically, removing the this.options.maxLabelOffset decrement 
var to = this._getOriginalValue(this.to)

the 1) item is partially fixed: The value of the max price handle can't be dragged below 1$ (instead of 0.99$). The product count suggestion still remains incorrect.

Hope this helps.

Thanks, Radu

[vahonc]

@radub,

We need a few more details about your environment.

First of all, could you clarify which exactly version of our module you are using, because the version that you specified ElasticSuite Version : "smile/elasticsuite": "~2.10.0" is not quite correct. You can do this by running this command: $ composer info | grep elasticsuite under your Magento root directory.

Also, could you check if you are enabling (or not) the Adaptive slider like shown on the screenshot below because in some cases this option could affect on the behavior of the price slider?

BR, Vadym

[radub]

@vahonc

I have updated the ElasticSuite version in the initial description of the issue (smile/elasticsuite 2.10.10). Below are my configurations on ElasticSuite > Catalog Search section (to be honest I don't remember changing anything in this section):

Please let me know if you need additional details.

Thanks, Radu

[rbayet]

Hello @radub,

Thanks for providing the exact Elasticsuite version. So you're on the last version published version, and it's possible the problem you described has been fixed since (a new release should be imminent), even though I was sure it had already been.

You're not using the adaptative slider, so the slider works on a price histogram provided by the search engine where the product prices are floored :

• 6.00 becomes 6
• 6.99 becomes 6
• 7.15 becomes 7
• ...
• 6235.99 becomes 6235

An extra step is always added at the end of the histogram (that would be 6235+1=6236 in your case) to serve as the upper limit :

• the value of the "min" handle becomes the value in a "price greater or equal than [value]"
• the value of the "max" handle becomes the value in a "price lower than [value]" and that's

So the label displayed for the "max" handle is actually computed by removing the 0.01 offset to the [value]. But the internal value pointed at by the handle should not indeed be changed.

Maybe it's a side effect of the introduction of the adaptative slider.

Regards,

[rbayet]

OK, @radub and @vahonc, the first issue (wrong label for the max handle)

• is indeed historic
• has indeed been fixed in the adaptative slider but not the classic behavior (pleading guilty)

But the correct fix should be in vendor/smile/elasticsuite/src/module-elasticsuite-catalog/view/frontend/web/js/range-slider-widget.js

if (this.element.find('[data-role=to-label]')) {
    var to = this._getOriginalValue(this.to) - this.options.maxLabelOffset;
    if (to < this._getOriginalValue(this.minValue)) {
        to = this._getOriginalValue(this.to);
    }
    this.element.find('[data-role=to-label]').html(this._formatLabel(to));
}

Now, for the second part, that is when the min and max are at the same position, by construction, as it is, we cannot display the correct product number and there is indeed an issue.

Let's take back my previous example :

• 6.00 becomes 6
• 6.99 becomes 6
• 7.15 becomes 7

So

• If the min handle is on 6 and the max handle is on 7, the number of products displayed is 2 and if the page is filtered, it will show indeed 2 products, because the condition applied will be "price >= 6 && price < 7"
• Now if both the min handle and max handles are on 6, the number of products displayed will also be 2 because we extract it from the histogram, but in this case it's wrong because the condition that would be applied is price >= 6 && price <= 6 (we detect that from = to in the layer filter model https://github.com/Smile-SA/elasticsuite/blob/31472d53ba2d4aa8a4f134fc53941159aaaaee88/src/module-elasticsuite-catalog/Model/Layer/Filter/DecimalFilterTrait.php#L54-L57) so the products list page will only display one product (the one exactly at 6.00)

Conclusions :

• EITHER we consider that, considering the likelyhood of psychological prices, having the need for "price exactly AT X" is unlikely and we prevent the max handle to be put on the min handle (and vice versa)
• OR we need rely on extra data (besides the price histogram) to know how many products are available exactly at each step of the slider
• but in both cases, the solution needs to work for
  • the legacy slider
    • both in the native currency
    • and an alternate currency
  • the adaptive slider

@romainruaud what do you think ?

[github-actions[bot]]

This issue was waiting update from the author for too long. Without any update, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away! Thanks for your contribution.

[github-actions[bot]]

This issue was waiting update from the author for too long. Without any update, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away! Thanks for your contribution.