Browse and discover as a shopper

3.0 Browse and discover as a shopper

When building a Buy Online, Pick up in Store solution, you can create custom experiences for shoppers that support Buy Online, Pick up in Store.

There are two ways to access data on the storefront:

• REST Storefront API
• GraphQL Storefront API

Over time, BigCommerce will be investing more in the GraphQL Storefront API, so all future enhancements to support Buy Online, Pick up in Store will be made against the GraphQL Storefront API.

3.1 REST Storefront API

3.1.1 Find available pickup options with stock available

To show pickup options to customers on a storefront page (e.g. the product detail page), send a request to the Find available pickup options endpoint.

1
POST https://{{yourstore.example.com}}/api/storefront/pickup-options
2
Content-Type: application/json
3
Accept: application/json
4
5
{
6
  "searchArea": {
7
    "radius": {
8
      "value": 25,
9
      "unit": "MI"
10
    },
11
    "coordinates": {
12
      "latitude": 32.8058616,
13
      "longitude": -98.0105544
14
    }
15
  },
16
  "items": [
17
    {
18
      "variantId": 1,
19
      "quantity": 1
20
    },
21
    {
22
      "variantId": 2,
23
      "quantity": 2
24
    }
25
  ]
26
}

3.2 GraphQL Storefront API

You can use the GraphQL Storefront API to query locations and inventory that are available to a storefront.

3.2.1 Get locations

For example queries, see Query Locations with the GraphQL Storefront API.

For info on getting location data in the storefront using Stencil Utils powered by GraphQL, see Stencil Utils Reference- Get page by GraphQL.

3.2.2 Get inventory by location

For example queries, see Query Inventory with the GraphQL Storefront API.