Get store data with the API

What this article helps you do

Fetch active Mapstore locations from storefront JavaScript for a custom list or map. Do not use this procedure for the standard Mapstore block.

Before you start

• Mapstore is installed and has active stores.
• You can edit your Shopify theme’s JavaScript.
• Your code runs in a shopper’s browser on an HTTPS storefront.

Make a request

The endpoint is:

https://app.usemapstore.com/api/public/entities

Pass your permanent *.myshopify.com domain in the required shop query parameter. Shopify exposes it as window.Shopify.shop in storefront pages.

const url = new URL('https://app.usemapstore.com/api/public/entities')
url.searchParams.set('shop', window.Shopify.shop)
url.searchParams.set('sort', 'name-a-z')

const response = await fetch(url)

if (!response.ok) {
  throw new Error(`Mapstore request failed: ${response.status}`)
}

const data = await response.json()
console.log(data.entities)

The browser sets the Origin header. Do not set the header in your code.

Available query parameters

Only send map bounds when all four values are available.

Read the response

The response contains:

• entities contains the current batch of active stores
• hasNextPage and nextCursor contain the pagination state
• pageSize, loadingStrategy, and sortBy contain the request settings
• Mapstore includes countries when includeCountries=true
• Mapstore includes zipSearchContext when it finds a postal code

Store records can include name, address, coordinates, contact details, filters, images, country code, and Google rating and hours data. They can also include marker settings, directions settings, and distance for postal-code searches. Mapstore omits optional values that are null or empty arrays.

To load the next page, send the returned cursor:

if (data.hasNextPage && data.nextCursor) {
  url.searchParams.set('cursor', data.nextCursor)
  const nextPage = await fetch(url).then(result => result.json())
}

Mapstore applies the plan limit for the shop before it returns locations.

Troubleshooting

Related articles

• Allow website access to store data
• Change map settings
• Add Mapstore to your theme