Store OS Bindings

The Store OS Bindings feature allows developers to integrate their extension functions directly into Store OS through an embedded web view. With these customizations, merchants can tailor the UI to meet their specific needs for functions beyond the core capabilities of the Store OS application. Bindings is essential for making extensions accessible within the Store OS UI. It configures how and where an extension will appear.

This document provides step-by-step instructions for creating, Bindings, and testing an extension on the Store OS Application. It is intended to guide developers through setup, customization, event handling, testing, ensuring compatibility and seamless integration within the Store OS ecosystem.

Prerequisites

• Ensure that you have created an extension before you start Store OS Bindings. Refer to Get Started for step-by-step guide.

Types of Bindings

1. Connected App
2. Page Specific

Connected App Bindings

Accessed via a dedicated navigation tab and occupies the entire screen.

Creation of Connected App Bindings

1. Go to the Fynd Partner panel.
2. In the left pane, click Extensions and open the extension.
3. Go to the Extension Setup and ensure the extension URL and permissions are correct.
4. In the Bindings section, click Manage.
5. In the upper-right side of the window, click Add to create new Bindings.
6. Select Store OS in Interface Area dropdown list.
7. Select Connected App from the Binding Type dropdown list.
8. Enter a name for the Bindings and specify the target URL where the Bindings is hosted.
9. Click Add.

Page Specific Bindings

Page Specific Bindings can be accessed from the contextual menus, such as "More Actions" or dropdowns in Store OS.

Creation of Page Specific Bindings

1. Go to the Fynd Partner panel.
2. In the left pane, click Extensions and open the extension.
3. Go to the Extension Setup and ensure the extension URL and permissions are correct.
4. In the Bindings section, click Manage.
5. In the upper-right side of the window, click Add to create new Bindings.
6. Select Store OS in Interface Area dropdown list.
7. Select Page Specific from the Binding Type dropdown list.
8. Enter a name for the Bindings.
9. Specify the target URL where Bindings is hosted.
10. In Allowed Pages dropdown list, select pages where the extension will be displayed as an entry point.
11. In User Interaction dropdown list, specify the format in which the user can interact with the screen.
    The user can interact in two formats:
    • Model: Opens as a side drawer on tablets or a bottom sheet on mobile.
    • Fullpage: Opens as a dedicated full-screen page on both tablets and mobile.
12. Click Add.

Parameters

Store OS supports various data parameters and events, enabling dynamic extension behavior. Fynd platform sends the following information as query parameters in the Install URL, which redirects to the Bindings URL.

Default parameters

Query parameter	Details
company_id	Selected Company ID
application_id	Selected Sales channel ID
store_id	Selected Store ID
platform_user_id	Logged in user ID

Page-specific parameters

query parameter	Details	Page
cart_id	Cart ID	Cart Page
cart_user_id	Cart attached user id (empty when not selected)	Cart Page
cart_address_id	Cart address ID (empty when not selected)	Cart Page
order_id	Order ID	Orders Page → Order Details
shipment_id	Shipment ID	Orders Page → Shipment Details
product_slug	Product Slug	Product Details Page (PDP)
seller_identifier	Seller Identifier	PDP
quantity	Quantity	PDP
location_header	Entered location	PDP

Entry Points

The below list shows the available entry points throughout the app, name in extension bindings UI, the page-specific parameters, page URL slug, example use case, and the UI element available.

1. Entry: Cart Page → More Actions
   Binding Name: "Cart - More Actions"
   Params: cart_id, cart_user_id, cart_address_id
   URL slug: /cart_more_actions
   Use case: Apply coupons
   UI element: FullPage, Modal

2. Entry: Cart Page → Cart Action Card
   Binding Name: "Cart - Primary Action Card"
   Params: cart_id, cart_user_id, cart_address_id
   URL slug: /cart_primary_action_card
   Use case: Add custom attributes to customers or to cart/item-level metadata
   UI element: FullPage, Modal

3. Entry: Product Details Page (PDP) → More Actions
   Binding Name: "Product Details"
   Params: product_slug, seller_identifier, quantity, location_header
   URL slug: /product_details
   Use case: Similar products
   UI element: Modal

4. Entry: Orders Page → Order Details → Order Level - (⋮) / (…)
   Binding Name: "Order Details"
   Params: order_id
   URL slug: /order_details
   Use case: Add metadata at the order level
   UI element: Modal

5. Entry: Orders Page → Shipment Details → (⋮) / (…)
   Binding Name: "Shipment Details"
   Params: shipment_id
   URL slug: /shipment_details
   Use case: Unlock a shipment extension in Swadesh
   UI element: Modal

6. Entry: Analytics Page → Left Report panel
   Binding Name: "Analytics"
   Params: N/A
   URL slug: /analytics
   Use case: Additional reports
   UI element: FullPage (In-Built)

7. Entry: Support Page → More
   Binding Name: "User Support"
   Params: N/A
   URL slug: /user_support
   Use case: Raise support tickets for anything other than software, which will be sent directly to the brand's support module
   UI element: FullPage, Modal

8. Entry: Account Page → Action list
   Binding Name: "User Account"
   Params: N/A
   URL slug: /user_account
   Use case: Incentives
   UI element: FullPage, Modal

Native Interaction

Extensions can perform certain activities in the Store OS app using specific commands. Extension Developers can use the following events to communicate with the Store OS native application. The below list shows events that can be triggered from the Extension frontend on the Android native app:

1. Close
   Closes the extension's web view and returns the user to the previously selected screen in the Store OS application.
   Event Key: N/A
   window.__fyndStoreOSKit(“close”)

The rest of the events follow the standard structure:

window.nativeParentWindow(<event_key>, <optional_payload>)

note

Please note that "10. Refresh Order Details" event can only be triggered from Order Detail Page and Shipment Detail Page.

2. Refresh Cart
   Event Key: "refresh-cart"
   Example: window.nativeParentWindow(refresh-cart”)

3. Open Product Listing Page
   Event Key: "show-plp"
   Example: window.nativeParentWindow(“show-plp”)

4. Open Product Details Page
   Event Key: "show-pdp"
   Payload: product-slug (String)
   Example: window.nativeParentWindow(“show-pdp”, "ginesys-test-7554433")

5. Open Order Detail
   Event Key: "show-order-details"
   Payload: order-id (String)
   Example: window.nativeParentWindow(“show-order-details”, “FY650169700E054DA248”)

6. Open Shipment Detail
   Event Key: "show-shipment-details"
   Payload: shipment-id (String)
   Example: window.nativeParentWindow(“show-shipment-details”, “12345677886544”)

7. Open Collection
   Event Key: "show-collection"
   Payload: collection-slug (String)
   Example: window.nativeParentWindow(“show-collection”, “winter-collection”)

8. Success Message
   Displays a toast message with green background.
   Event Key: "show-success-message"
   Payload: message (String)
   Example: window.nativeParentWindow(“show-success-message”, “Completed successfully”)

9. Error Message
   Displays a toast message with red background.
   Event Key: "show-error-message"
   Payload: message (String)
   Example: window.nativeParentWindow("show-error-message", "COUPON ERROR MESSAGE");

10. Refresh Order Details
    This can be used to update order and shipment details.
    Event Key: "refresh-order-details"
    Example: window.nativeParentWindow(“refresh-order-details”)
    Pages to trigger event: Order Detail Page/Shipment Detail Page

11. Set Webhook Url
    This can be used to update order and shipment details.
    Event Key: "set-webhook-url"
    Example: window.nativeParentWindow(“set-webhook-url”, JSON.stringify({ "ext_id": "123", "method": "POST", "url": "www.grr.la" }))

Testing

To verify the functionality of the extension, use the Store OS App to open the development company where the extension is installed.

1. Download the Store OS App from Google PlayStore .
2. Login to the app.
3. Select the development company where the extension is installed.
4. Go to the page on which you created the Bindings.
5. Select the Bindings that you want to test. That should launch your App in the Store OS app within the container.

Design Guidelines

It is necessary to adhere to design guidelines to ensure UI Store OS is consistent across extensions.

• UI Standard: Refer to the Store OS UI Kit↗ for UI elements, icons, and layout standards.
• Responsiveness:
  • Extensions should adapt seamlessly between modal and full-page formats.
  • Ensure elements are adjusted for tablet and mobile displays.