Client Scenario: Building a Product Availability Map

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson introduces a practical client scenario: visualizing product availability on a map. Building upon the foundation laid in the UX Framework course, we'll enhance the Fluent Store app's Product Availability screen by adding a map that displays nearby store locations and stock information for a selected product variant. This hands-on lab will guide you through configuring the product lookup and detail availability pages, setting the stage for creating custom components in subsequent lessons.

Key points

Client Need: The client requires a visual representation of product availability in nearby stores, which would enable staff to locate items quickly for customers.
Map Functionality: The map should be integrated into the Product Availability details screen. It should display pins for the 10 closest stores with stock and show store details (name, product reference, available stock) when a pin is clicked. The map's appearance and behavior should be configurable via the manifest.
Product Lookup Configuration: This involves adding a new page to the Fluent Store app, using a List Component to display product variants, configuring list filters, and creating hyperlinks to product details pages.
Detail Availability Page Configuration: This includes creating a new page, linking it from the Product Lookup page, and adding card components to display product details and images. A List Component will show data from the search VirtualInventory query.
Hands-on Lab Focus: The lab simulates a real-world scenario where a customer seeks a specific shoe size, requiring a store associate to check nearby store inventory. This exercise will prepare you for creating custom components in the following lessons to realize the client's vision fully.

Client Scenario

Our Client wants to provide their staff with a visual view of the product availability in nearby locations. Following on from the UX Framework course, they would like to add a Map view to the page in the Fluent Store app. The map should show the locations closest to the current store with stock information for the currently viewed product.

The Map should:

Be added to the Product Availability details screen/interface.
Display pins corresponding to the 10 closest locations currently stocked for the specific shoe variant requested.
Display store details upon clicking each pin to display:
- Location Name
- Product Reference
- Available Stock on hand
Be configurable through the manifest and unit tested.

Hands-on Lab:

In this lab, the scenario is that a Customer walks into a store and finds a pair of shoes they really like but cannot find their size. They ask the Store Associate if they have the shoe in their size. The Store Assistant says they don't have any of that size left in the store but will do a lookup to find out if the correct size is in a nearby location.

Ensure you have completed the Configuration - UX Framework course

This lab is written in a guideline rather than a step by step, click by click. It assumes you have successfully completed the Configuration - UX Framework course, and performed the required actions learned in the previously.

Should you get stuck and require assistance, first review the relevant lessons in the Configuration - UX Framework course. Thereafter, if you still require further assistance please message us via this platform or send us an email and we will connect you with an instructor.

Make sure you successfully complete the following tasks before moving to the next lesson:

Configure the Product Lookup:

Add a new Page to the Fluent Store Web App as a top level menu item.

How to add a new page

You learned how to add a new page in the Configuration - UX Framework course. You can call this fragment

`fc.mystique.manifest.store.fragment.availability`

Use a List Component and configure it to show variant products

Show variant products using a GraphQL Query

You can use the following GraphQL Query:

`query products { variantProducts { edges { node { id catalogue {   ref } ref name gtin attributes { name value } categories { edges { node { name } } } prices { type currency value } } } } }`

Not all fields are named

Some of the fields displayed in the table are from custom attributes on the Variant Product record, and therefore not named fields in the query above!

Configure the List Filter
Hyperlink the product reference using the following format:
```
`#/products/{{node.catalogue.ref}}/{{node.ref}}`
```

Training Accounts should contain products AH8050-001 and AH8050-003

Training Accounts are initially setup to have stock of products AH8050-001 and AH8050-003 for this lab. Make sure you click on one of these products when viewing availability in other stores.

Configure the Detail Availability Page:

Add a new page
Update the Product Lookup page to link the product ref to the Detail Availability Page

Link the product reference using a GraphQL Query

You can use the following GraphQL Query:

`query availabilityDetails ($productCatalogue: String!, $productRef: String!, $virtualCatalogueRef: String!, $currentLocationRef: String!, $currentLocationLatitude: Float!, $currentLocationLongitude: Float!) { variantProduct ( catalogue: { ref: $productCatalogue }, ref: $productRef ) { id ref name gtin attributes { name value } prices { type currency value } summary categories (first: 1) { edges { node { name } } } } searchVirtualInventory(virtualCatalogue: { ref: $virtualCatalogueRef}, productQuantities: [{ productRef: $productRef, quantity: 1}], excludedLocationRefs: [$currentLocationRef], orderByProximity: { latitude: $currentLocationLatitude, longitude: $currentLocationLongitude}) { edges { node { location { ref name primaryAddress { street city state postcode longitude latitude } } virtualPositions { ref productRef quantity } } } } }`

Parameter notes

The Product Catalogue Ref and Product Ref can be set from the URL parameters.
The Location related parameters can come from the currently active context object `activeLocation`.
For the purposes of this lab, you can hard code the `virtualCatalogueRef` variable to "VC:ATS:CC:1".

Add a card component for product details
Add a card component to show the product image
Add a list component and configure it to show data from the searchVirtualInventory query

Through this course, we will continue to build out this Client Scenario, and build some new custom components to enhance the capability of the Product Availability lookup screen in the Fluent Store app.

Remember the Client Scenario

The client scenario will be referenced at certain points throughout the remainder of this course.