Kroger...

Product Tutorial

In This Tutorial

This tutorial covers how to construct and execute an API request to the /products endpoint, using a search term and locationId as filters.

The locationId is used as a filter in this tutorial. The locationId is retrieved in the Location Tutorial and is an optional filter component of the product API request. If you do not wish to use the locationId in the request, omit it from the request parameters.

Introduction to the Product API

The /products endpoint allows for clients to search for specific products or return a list of available products within the Kroger Company. Using the locationId as a filter, the returned product list will be specific to that location.

Construct and Execute a Product API Request

The product request is initiated when the user enters a search term in the HTML form on the demo application. The code example below obtains the search term and passes it to the getProduct(term) function. The function then constructs the product request, passing the term (i.e., milk, bread, butter, etc.) as a filter.

If the user has selected a location, the locationId is also passed as an additional filter. By using the locationId, the returned data will only apply to that location.

The previously stored access token described in the Authorization Tutorial is used in the “Authorization” header.

product.js file (client side)

// Product request
async function getProducts(term) {
  // Use access stored access token for product request
  let accessToken = authentication.getAccessToken();
  // Use stored locationId
  let locationId = localStorage.getItem("locationId");

  // Use locationId as filter (if) selected by user
  let searchByLocation = "";
  if (locationId) {
    searchByLocation = `filter.locationId=${locationId}&`;
  }
  // Building product URL
  // Base URL (https://api.kroger.com)
  // Version/Endpoint (/v1/products)
  // Query String (?filter.locationId=${locationId}&filter.term=${term})
  let productsUrl = `${
    config.apiBaseUrl
  }/v1/products?${searchByLocation}filter.term=${term}`;

  // Product request body
  let productsResponse = await fetch(productsUrl, {
    method: "GET",
    cache: "no-cache",
    headers: {
      Authorization: `bearer ${accessToken}`,
      "Content-Type": "application/json; charset=utf-8"
    }
  });

  // Return json object
  return productsResponse.json();
}

Example Product Request and Response

A sample product request and JSON response are shown below.

Example Product Request

curl -X GET \
  'https://api.kroger.com/v1/products?filter.term=milk&filter.locationId=01400441' \
  -H 'Authorization: Bearer {{TOKEN}}' \
  -H 'Cache-Control: no-cache' 
The example below has been shortened. The returned object may provide large amounts of data depending on the location size and number of locations returned.

Example Response JSON Object

{
  "data": [
    {
      "productId": "0001111041600",
      "upc": "0001111041600",
      "brand": "Kroger",
      "categories": ["Dairy"],
      "description": "Kroger 2% Reduced Fat Milk",
      "items": [
        {
          "itemId": "0001111041600",
          "favorite": false,
          "fulfillment": {
            "curbside": true,
            "delivery": true
          },
          "price": {
            "regular": 1.49,
            "promo": 0
          },
          "size": "1/2 Gallon"
        }
      ],
      "temperature": {
        "indicator": "Refrigerated",
        "heatSensitive": false
      },
      "images": [
        {
          "perspective": "front",
          "featured": true,
          "sizes": [
            {
              "size": "xlarge",
              "url": "https://www-test.kroger.com/product/images/xlarge/front/0001111041600"
            },
            {
              "size": "small",
              "url": "https://www-test.kroger.com/product/images/small/front/0001111041600"
            },
            {
              "size": "large",
              "url": "https://www-test.kroger.com/product/images/large/front/0001111041600"
            },
            {
              "size": "medium",
              "url": "https://www-test.kroger.com/product/images/medium/front/0001111041600"
            },
            {
              "size": "thumbnail",
              "url": "https://www-test.kroger.com/product/images/thumbnail/front/0001111041600"
            }
          ]
        }
      ]
    }
  ]
}

Next Steps

Now that you have seen one possible way to implement the product API, we recommend checking out the Cart API Tutorial. The cart tutorial covers how to create and retrieve a cart for a user. In addition, the tutorial shows how to add and delete an item from the cart using the UPC returned from the product request.

For more information on the /products endpoints and a full list of acceptable filters, see our Swagger Documentation Page.