Nike.com product availability monitor and check: block color and click avail

[ajitk (Ajit)]

Hello @sammydepthphoto, monitoring availability of sizes is a common use case. Following post shows a solution for zara.com. A similar technique can be used to monitor product availability for nike.com.

Monitoring zara.com - not detecting changes in color of available sizes

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: [image] You can change it to monitor the HTML instead (using innerHTML pro…

To summarize it, there are two methods:

1. First one is to monitor a filtered list of available items. Any change to that list will trigger an alert. Adding a condition for the desired size will trigger the alert only when that size is added to the list of available sizes. If you can share the page’s URL, I can share a selector that can do that.

2. The second method is to track changes to HTML using innerHTML or outerHTML property of monitored element. It works because HTML is used to show a size as available (black) or unavailable (gray).

Try it out and feel free to reach out if you need any help.