Jun 28, 2022
In General Discussions
In this movie, Casey identifies endpoints and HTTP requests from Chrome's Network tab, which contains the data points used to create the category page. You don't have to do this on your site because you need direct access to the data model. For illustration purposes, you can usually find that data by limiting network transactions to XHR. If you look at the AJAX request and find a request that contains all the data, right-click the request in Chrome to get the details. Here is an example from Nike.com. This is their men's basketball page. Nike Men's Basketball Page Nike.com is built on the single page application framework React. This site has an API endpoint located at https: //api.nike.com/cic/browse/v1. advertisement Continue reading below That endpoint is used to bring the product to the page. Within Chrome, you can right-click on a request to get the exact details of the HTTP request as a fetch, NodeJS, or cURL Real Estate Photo Editing command used to ping that endpoint. nike-products-endpoint-curl In this example, the cURL request looks like this: cURL request example Indeed, some sites are sophisticated in that they are not easily accessible from the command line, and Nike is one such site. advertisement Continue reading below Therefore, we recommend that you use Puppeteer to load the page and intercept and save the XHR response from api.nike.com. The JSON payload you're looking for tends to have some nested nodes. This can be seen on the Network tab by looking at the individual requests in the waterfall. nike-products-endpoint If you zoom in a bit, you can see the features of the data model that Nike provides in the creation of this page. Nike data model example In this case, consider that the following are available: advertisement Continue reading below Color Description : High-level colorway for sneakers . inStock, isJersey, isMemberExclusive, isNBA, isNFL, isSustainable: A Boolean feature that shows the key characteristics of an item. Price : If you know who works at Nike, you'll know the price of your employees. Subtitle : Item type. Title : The name of the item. You now have an endpoint.