Fluent Commerce Docs

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.

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Client Scenario: Building a Product Availability Map

Client Scenario: Building a Product Availability Map

Overview

Key points

Client Scenario

Hands-on Lab:

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Building Blocks

By Type

Helpful Resources

Quick Links