The Commercetools in store app allows customers to manage order reservations from the Sunrise mobile app, reviewing customer insights and checking inventory entries for different channels.
The motivation of this app is to allow sales force to engage customers and improving the shopping experience by using the information already existing in the Commercetools platform and machine learning features. and machine learning features.
Its current incarnation targets the staff of a physical store that is part of a 'click and collect' fulfilment offering.
Install local dependencies of the implementation:
npm install
In addition you need a commercetools platform project with suitable data structures:
- There need to be channels set up that have the
ProductDistributionand theInventorySupplyroles set. - The in-store UI only shows orders that have
- a custom Boolean field
isReservationset. - the correct store set as the
supplyChannelof the order line items to be picked up.
- a custom Boolean field
This is the type of data generated by the SUNRISE demo storefront, so you can use the SUNRISE example data and the SUNRISE Java Storefront to set up the data and a storefront to easily create the reservation orders.
Configuration files for the commercetools API and client credentials can be found in the src/config/env/ folder.
They override the data in default.json. API defaults to the EU CTP at api.sphere.io.
You need to set your project's credentials there.
The best way is to create a specific client ID for this app.
The 'default' build command launches a local server with the development configuration:
npm run-script gulp
The production configuration can be launched as:
npm run-script production
The local address of both is http://localhost:3000
Allows you to briefly display the sales, orders, customers and stocks for the selected store. The dashboard also allows the user to filter by dates in order to get the required info based on a desired period of time.
In the inventories section, products of the selected store are displayed indicating the available quantity. You can access the product details from this list by clicking on the row and also check the availability of the product in any other store sorted by distance.
When clicking on the check button, a new window will be shown displaying the availability of the selected product in the different channels and sorting the results by distance from the store (from nearest to farthest).
The following image shows how the product details page is displayed when clicking on the product row from the inventory list where the user cat get some details from the product and some related products that can be recommended to the customer.
This section shows the list of orders that has been processed by the Sunrise mobile app. In this section the user can confirm the order and process it whenever a customer comes to the store to pick up the items. The user can also cancel an order if needed. This actions can be performed directly on the list by clicking on the Process button or in the order details page which is detailed in the following screenshot:
List of customers related to the store. Provides quick access to common store customers. The user can also access to the customer details page where can see the customer insights, for instance latests items the customer purchased and some recommendations based on the latest orders or preferences.
The following image shows how the customer details page looks like:
