Location pages and store locator with custom theme

Start to finish examples of creating everything you need for location pages and a store locator

Overview

The goal of this guide is to illustrate how you would create

• A business for a theoretical customer "ABC Brand" which all locations and sites will be published under

• A custom theme that will be used to customize the header, footer, and style used on the Store Locator page and each Location Page

• Locations and their associated location pages for each location which will be set to locations.abcbrand.com/location-slug/

• A Store Locator site that will be setup to be hosted under locations.abcbrand.com/

Note: Each instance of our platform is configured with a "directory depth" that is used to specify what the URLs will look like for each of the Sites. In the below example, it is set to 1 which would allow you to publish sites under /example-location-slug/

Business

1. Create a Business

Using the Businesses resource

POST /api/v2/businesses/

{
  "business_name": "ABC Brand"
}

The returned business.id will be used in later requests

Custom theme

1. Create the custom theme

A Theme with header and footer and location page content is added here

See Example request to create a custom theme

You will use the returned theme.id in later requests

2. Create a Site that will be used as the "master template" content

Assign the theme_id from above to that new Site. We will leave this Site as unpublished as it is only used as a template.

POST /api/v2/sites/

{
  "business_id": BUSINESS_ID,
  "base_directory": "/master-template/",
  "formatted_domain": "locations.customerbrand.com",
  "title": "Location Page Master Template",
  "theme_id": THEME_ID
}

3. Enable theme as master template pointing to the site_id from above

PUT /api/v2/themes/:theme_id/

{
  "site_overrides": {
    "en": SITE_ID
  },
  "site_override_objects": [
    "linklists",
    "pages",
    "plugins"
  ]
}

For more details on site override view here

Locations and location pages

For each location, we will be creating a location and a location page (site)

1. Create a location

Create a location and also pass the location_url which is used to link to the location page from the store locator.

POST /api/v2/locations/

{
  "business_id": BUSINESS_ID,
  "street": "555 Main St",
  "city": "Seattle",
  "state": "WA",
  "postal_code": "98121",
  "country": "US",
  "phones": [
    {
      "type": "phone",
      "number": "[phone]"
    }
  ],
  "location_url": "http://locations.abcbrand.com/seattle/"
}

You will use the returned location.id in the next request

2. Create a location page (site)

Create a location page (site) under the same location_url from above and using the business_id, location_id, and theme_id from previous requests.

POST /api/v2/sites/

{
  "base_directory": "/seattle/",
  "business_id": BUSINESS_ID,
  "formatted_domain": "locations.abcbrand.com",
  "locations": [LOCATION_ID],
  "published": true,
  "theme_id": THEME_ID,
  "title": "Seattle Location Page"
}

Store locator

1. Create the store locator site

We will then publish a Store Locator site under locations.abcbrand.com and we will pass /lp/ as the base_directory which is a special method to support rendering the store locator under the root domain.

POST /api/v2/sites/

{
  "base_directory": "/lp/",
  "business_id": BUSINESS_ID,
  "formatted_domain": "locations.abcbrand.com",
  "published": true,
  "theme_id": THEME_ID,
  "title": "Store Locator"
}

The returned site.id will be used in later requests

2. Update the home page to add the default Store Locator module

In step 1, the site that was created has a blank home page. So we will now update the home page to add the store locator. This will also override the default location page (site) content that would normally show for that theme_id

1. Find the current home page

We will grab all the pages under the Site (there should only be one) and use it's page.id to update the content in the next step. The home page will be the one with the path set to / (slash)

GET /api/v2/pages/?site_id=:site_id

{
  "objects": [
    {
      "id": 123,
      "path": "/",
      "name": "Home"
    }
  ]
}

2. Update the home page

Update the Page detail

PUT /api/v2/pages/:page_id/

{
  "column_widths": [[100]],
  "modules": [
    {
      "column": 1,
      "module": "multilocation",
      "order": 1,
      "props": {
        "is_location_finder": true,
        "location_finder_version": "v2",
        "within_business": true
      },
      "row": 1
    }
  ]
}