I would like to know if there is any way taht Distill can notify me when the part of the page inside the red rectangle changes. As you can see, the size letter is black when it is available, and turns grey when unavailable. Could you please send me the configuration so I can be notified when the sizes’ color changes? I would really appreciate it.
Here is the link to the page: https://www.zara.com/es/es/vestido-punto-combinado-semitransparente-p09598220.html
Thanks in advance
Hello @jpruiz, there are two ways to monitor the list of available sizes for changes.
First method is to only monitor the list of available sizes instead of all of them. This can be done using the following CSS selector expression: .size-selector__size-list-item:not([disabled])
The second method is to monitor the list’s HTML. Note that by default, Distill monitors changes to text as shown in the following screenshot:
You can change it to monitor the HTML instead (using innerHTML property). That way, it will capture all changes to the selected element. Following screenshot shows it in action:
@vulvare As you can see, the page’s layout has changed. Using the first method, following CSS selector should be able to select the items that are in stock:
[data-qa-action='size-in-stock']
Similarly, there are others to match different kinds of availability:
I will recommend using the second method. This should give you the most flexibility where you can configure things on your own using the visual selector.
