Pickup and store locator

If your store has shops or warehouses where customers pick up their orders, Smootify can show them. On the product page, store-availability says whether the selected variant can be picked up, and where. On a page of its own, store-locator shows every store on a map, with a list the visitor can search. This page covers both.

1. Pickup on the product page

Add the element store-availability inside smootify-product. Outside it, the element is removed.

<store-availability>
  <div condition="available-at-location">Pick up at <span location="name">Store</span></div>
  <div condition="not-available-at-location">Not in stock at <span location="name">Store</span></div>
  <div location="pick-up-time">Usually ready in 24 hours</div>
  <button type="button" popovertarget="stores">Check other stores</button>
  <div id="stores" popover="auto">
    <store-location><div location="name">Store</div><div location="address">Address</div><div location="quantity">0</div></store-location>
  </div>
</store-availability>

The first store. Outside the list, the location attributes show the first pickup location Shopify gives for the selected variant, and they follow the variant as it changes:

Its states. Inside store-availability, conditions show what the first location has, and classes follow it. Design these states:

The other stores. For a list of every store that offers the variant:

1. Inside store-availability, add a panel: a div with popover="auto" and an id, or a dialog.
2. Inside the panel, add the element store-location: the template of one store, with the same location attributes. Smootify copies it once per store, except the store the visitor chose in a location switcher.
3. Outside the panel, add a button with popovertarget set to the panel’s id, such as “Check other stores”. It opens the panel.

Without a panel, the button is removed. Add skeleton="text" inside store-location for a placeholder while it loads. With a dialog, the attributes animation-name, animation-duration and disable-blur on store-availability style its opening, as on the market suggestion.

Every value is in pickup attributes and pickup conditions.

2. A store locator page

Get a Mapbox token. In your Mapbox account, create a token with the default public scopes, and limit it to your site’s addresses (your *.workers.dev address and your domain). Copy it: it is public, and it goes in the page.

Which stores are listed. The list comes from Shopify, not from your site’s content: Smootify asks Shopify for your store’s locations that offer local pickup, up to 200, and makes one store-location per location.

• A location is listed only when, in Shopify, it is active under Settings > Locations, it fulfils online orders (Fulfill online orders from this location), and local pickup is turned on for it under Settings > Shipping and delivery > Local pickup. A warehouse or a shop without local pickup is never listed.
• The name, address and phone are the ones set on the location in Shopify. Change them there: the page follows.
• The map places each store at the coordinates Shopify finds for its address. A location whose address Shopify cannot place stays in the list without a marker.
• Stock does not matter here: the locator lists the stores, not the products they have.

Build the locator. Add the element store-locator with the attribute data-api-key set to your token. Inside it go these parts, each an element with that tag unless the table says otherwise:

<store-locator data-api-key={mapboxToken}>
  <map></map>
  <form><input name="query"></form>
  <store-location><div location="name">Store</div><div location="address">Address</div><a href="#" location="directions-link">Directions</a></store-location>
  <map-marker></map-marker>
  <store-popup><div location="name">Store</div></store-popup>
</store-locator>

What the visitor gets.

• The browser asks the visitor for their position. With it, the stores are sorted by distance and the map starts there. Without it, the map starts at the first store.
• A click on a store in the list moves the map to it, and the store gets the class is-active. A click on a marker opens its store-popup and marks its store in the list.
• The search field filters the list as the visitor types.

Inside store-location and store-popup, location shows name, address, zip, phone (a link with it calls the number), country and directions-link.

Map options, as attributes on store-locator:

• data-style: the style URL of a Mapbox Studio style, mapbox://styles/mapbox/light-v11 by default;
• data-initial-zoom: the zoom when the map opens, 13 by default;
• data-zoom: the zoom when the map moves to a store, 13 by default;
• data-fit-bounds: true by default, the map zooms out to show every store; false keeps the initial zoom;
• data-padding: the space kept around the stores when the map fits them, 100 pixels by default.

More in store-locator and its attributes.

Before you publish