List Store Locations on a Page Using a Store GraphCMS Schema and Data

Instructor: [0:00] As an online store, I want the ability for any of my customers to come through and add their products and purchase them right from my website. If I have physical stores, I want people to also be able to find those stores on a map and see which one is closest to them.

[0:14] We're going to create a store locator page, where we want to be able to list all of our stores and then display it on the map. To start off, just like all of our other data points, we needed the ability to manage those store locations programmatically.

[0:26] To do that, we need to create a schema where we can create an instance of each of those stores. Over on the schema page, I'm going to click add under the models and I'm going to create a store location. As usual, we're going to want a name for each of these stores.

[0:40] I'm going to create my name field that we're going to use as a title field. In this instance, we're not going to dynamically create pages for each store, so we don't need a slug. We will need an address.

[0:51] Let's add multi-line text where we can say, we're going to add an address and click create. We're going to want to add a phone number to make sure that we can have people call our stores.

[1:02] Now, as our last field, we also want to be able to add the physical location of the stores. Where in the world does it exist? What are the coordinates on the map?

[1:09] If we scroll down to the very bottom of add fields, we're going to find this under location called map, where we want to say this is going to be our location. This is going to be what we're going to use in order to set those coordinates.

[1:21] When we start to add our data, we're going to be able to see what exactly that field looks like, as it's going to be different from our traditional fields.

[1:28] For now, we have our schema. Let's head over to content where we can start adding our store locations. Now, let's click create item where we want to start to add in some data. Now, if you have some real stores, go ahead, and add those in now.

[1:42] Otherwise, I'm going to just add in some fake locations. How about starting in the city closest to me? Philadelphia. For the rest of this, I'm going to make up some information.

[1:52] Particularly for this address, I just used the location of a UNIQLO in Philadelphia because now what I can do is I can take this address...Remember, we added this location field inside of our schema. I can paste in this address, click search, and it's going to find that location on the map where now we have that location saved. We're going to get that back inside of our request.

[2:16] As usual, I'm going to click save and publish. Now, let's get a head start for creating the queries for our page. Over inside of our playground explorer, I'm going to scroll down until I find my store locations. Then, I'm going to start adding the data that I want, including the address, the ID, the name, the phone number.

[2:34] Then, we're going to also add our location field where we can see a few things that we have, including distance, latitude, and longitude. Let's add the latitude and longitude and click play. We can see all of our data including that location, which gives us those coordinates of that exact location.

[2:51] Next, let's move this query into our application to start grabbing the data. Starting off inside of our stores file, we have a basic React template like before, where we're going to be able to loop through and add all of our stores dynamically.

[3:04] In previous pages, because we were dynamically creating pages, we needed to use getStaticPaths. This time because we're only going to load data for this particular path/stores, we only need to use getStaticProps in order to add that data.

[3:20] I'm going to head over to my index.js file. The first thing I'm going to do is import my dependency for Apollo Client, that way I can make some queries. Down at the bottom of my home page index.js, I'm going to copy over this getStaticProps function.

[3:34] That way I have a little bit of a head start for creating my stores query. If I head back over to stores, head all the way to the bottom and paste that in, I can now get started editing this query. First, I'm going to copy the store locations query, where I'm going to replace this entire page home query, where I'm going to instead, call this page stores.

[3:56] Then I want to grab that data and return it as a prop. First, I'm going to get rid of that home and the products and replace it with data.data.store locations, and I'm going to return that first of all as a prop. I'm going to make it available as a prop and then console.log out the data like we always do, so we can make sure we have that.

[4:14] If we look in our browser, we can see our store locations array, including all of the data and including that latitude and longitude. While we'll build a map in our next lesson, let's first list out all of our locations. Like we did for our category products, we want to turn this list item into a dynamically created list.

[4:32] I'm going to say for all my store locations, I'm going to map through each location and I'm going to say, I want to return a new item, which is going to be this list item that I'm going to create and dynamically create product data for.

[4:45] Inside of this unordered list, I'm going to say I want to take my store locations and map through it. For each location, I'm going to return a new item. Inside, I'm going to paste in that entire list item, which then I'm going to fill in to return data inside dynamically.

[5:01] It includes making React happy by creating a new key on each of those items, but then we can also add our location.name and we can copy that. We can add our location.address, and we can add our phone number. If we look at our store, we should see all of our locations listed.

[5:19] We'll be updating this button in the next lesson to work alongside the map we add to this page, we can go ahead and update our Google Maps link now to go directly to our coordinates.

[5:28] To easily do that, we can head over to Google Maps. If we right click in really any location, we're going to be able to see the coordinates of that location. While we don't care about those coordinates particularly, what we want to do is click directions to here.

[5:42] Which what it's going to do, is it's going to create a URL where it's going to take our current location and it's going to say, I want to create a set of directions to those coordinates that were pasted in. Looking at this URL, we want to start using this as a way to actually template inside of our application.

[6:01] First of all, let's simplify it a little bit. We don't need this data attribute at the very end. First of all, that makes it greatly reduced. Additionally, we don't want to assume where the person's at. Let's get rid of this Philadelphia PA inside of there, or whatever location you see, where you can now see you'll have // there.

[6:19] All that means is, it's going to be an empty location. If we first of all copy that URL and we hit enter, we can see that Google Maps is going to load that URL where it's going to be an empty starting location to a particular location.

[6:32] I'm going to replace the URL that's currently inside of my application with a dynamic value. I'm going to first of all paste in that URL. Now, I'm going to replace these coordinates with the coordinates that I have inside of my app.

[6:45] I'm going to want to start accessing this data inside of my location object. I'm going to take my location and I'm going to say I want this first value to be location.location.latitude. Then I'm going to copy that and I'm going to say I want that second value to be longitude.

[7:01] Now, because that second parameter is going to be very similar except for that @ sign in the front, I'm going to first copy that entire value and I'm going to paste it in right after that @ sign. One thing to note here is at the very end, we see this Z attribute, which that's going to refer to the zoom level.

[7:21] If you want it to be very close to the map, you might want to have a higher zoom, but if you want it to be out more, you want to have a lower zoom. Once my app reloads, if I click any of these locations such as 3251 in San Francisco, it's going to open up a new page inside of Google Maps, where it's going to be able to give me directions right to that exact location.

[7:41] Finally, we want people to be able to find this page. Let's replace this link in the header, with the link to this page. Inside of my header.js file, we're going to find that third link. Let's call this find a store, where we can say instead of this href, we want that to go to /stores.

[7:58] If I'm on any other page and I click find a store, I'm going to be able to see all the locations. In review, we wanted the ability to show all of our physical locations on our website. To do this, we first set up a store location schema, where we added new locations for every location that we have.

[8:13] Where then we were able to query all that data, and bring it into our store with getStaticProps. Where not only did we loop through each location and show the information, we created dynamic Google Maps links. Not only can people see the location, but they can also get the directions easily right on Google Maps.