Enhancing Shipment Details Section: Display Product Details in Fynd Commerce

Description

In this document, we will learn how to show product details on the Shipment Details page to provide sellers quick access to relevant product information. Clicking View Product Details, shows the relevant product details in Fynd Commerce. Strategically placed on the Shipment Details page, sellers can quickly access product-related information while reviewing shipment details.

The product details will integrated into the Shipment Details page using the Platform Bindings. A custom URL Bindings connects the View Product Details to the target URL where the product details page is hosted.

Benefits

Sellers can access product information directly from the Shipment Details page without navigating to other sections or pages.
Reduces the effort required to search for product details.
Eliminates the need for sellers to switch between multiple pages to view product details, saving valuable time.

This use case is consists of two sections:

Designing the View Details Page: It focuses on designing the View Details page.
Creation of Bindings: It focuses on how to create Bindings in the Fynd Partners portal and connecting the View Details page and with Bindings.

Prerequisite

Ensure that you have created an extension. Refer to Get Started for more details.
Ensure that you have Fync Commerce account. Refer to Create a Business Account.

Design the View Product Details Page

To create the View Details page in the Orders section of the Fynd Commerce panel, developers need to implement HTML and CSS. The upcoming steps explain how to create the structure and styling necessary to build this page.

Create an index.html file and copy the following code in it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Store</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }
    button:hover {
      background-color: #0056b3;
    }
    #product-details {
      display: none;
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #f9f9f9;
      text-align: left;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
    }
    img {
      max-width: 200px; /* Resized the image */
      border-radius: 10px;
      display: block;
      margin: 0 auto;
    }
    h2 {
      margin: 10px 0;
    }
    p {
      margin: 5px 0;
      color: #555;
    }
  </style>
</head>
<body>
  <button id="view-product-button" onclick="showProductDetails()">View Product Details</button>

  <div id="product-details">
    <img id="product-image" src="" alt="Product Image">
    <h2 id="product-name"></h2>
    <p id="product-price"></p>
    <p id="product-description"></p>
    <p id="product-category"></p>
  </div>

  <script>
    function showProductDetails() {
      // Hide the button
      document.getElementById("view-product-button").style.display = "none";

      // Mock product data
      const product = {
        image: "https://images-cdn.ubuy.co.in/633b12488d2edc65997f4c20-smart-watch-bluetooth-smartwatch-touch.jpg",
        name: "Smart Watch",
        price: "$199.99",
        description: "A stylish and modern smartwatch with various features including fitness tracking, heart rate monitoring, and GPS.",
        category: "Electronics"
      };

      // Update the product details
      document.getElementById("product-image").src = product.image;
      document.getElementById("product-name").textContent = `Product Name: ${product.name}`;
      document.getElementById("product-price").textContent = `Price: ${product.price}`;
      document.getElementById("product-description").textContent = `Description: ${product.description}`;
      document.getElementById("product-category").textContent = `Category: ${product.category}`;

      // Show the product details section
      document.getElementById("product-details").style.display = "block";
    }
  </script>
</body>
</html>

Explanation

The index.html file contains a structure that includes a button labeled View Product Details. When clicked, this button opens a section containing detailed product information such as the product image, name, price, description, and category. The details are organized within a <div> element (#product-details) designed to appear after the button is triggered.

The showProductDetails() function is triggered when the button is clicked. This function populates the product details section with data. Although the current implementation uses static mock data, developers can dynamically modify the script to fetch real product information from Fynd’s database.

note

The index.html file needs to be hosted on a web server. The hosted link will be added to the target URL when Bindings are created in the extension. Here, we have hosted it in Git. Link↗

Creation of Bindings

Following these step-by-step instructions, you can view product details directly from the shipment details page. The Bindings connects the product details option to the target URL, where the product details page is hosted to fetch and display the product information.

Go to the Fynd Partner panel.
In the left pane, click Extensions and open the extension.
Navigate to Extension Setup and ensure the extension URL and permissions are correctly configured.
In the Bindings section, click Manage.
In the upper-right corner of the window, click Add to create new Bindings.
Select Platform Panel from the Interface Area dropdown list.
Select Page Slot from the Binding Type dropdown list.
Enter a name for the bindings. Here, we have entered View Product Details.
Specify the target URL where the Bindings is hosted. Here, we have shown details of a smart watch hosted in this Link↗.
Choose Shipment Details from the Allowed Pages.
Click Add. Fill Details in Bindings

Output

Bindings Created

Local Testing

To verify the integration of the View Product Details and ensure the Bindings work as per the requirements, follow the steps below:

Go to the Fynd Commerce panel.
In the left pane, go to Orders.
Navigate to an order and click on it.
Once the shipment page loads, locate the View Product Details button and click on it to trigger the Bindings and load the product details page. View Product Details Button on Shipment Details Page Product Details Page

Submission & Review

Go through the steps provided in the Submission-process to submit your extension to the Fynd Extension Marketplace. Once you submit it, we will review and approve it or share feedback.

note

Please go through our Review Checklist to understand what we evaluate in your extension.

Connect with Us

For a customized solution that fits your needs, feel free to set up a meeting with us. Schedule a Meeting.

Description​

Benefits​

Prerequisite​

Design the View Product Details Page​

Explanation​

Creation of Bindings​

Local Testing​

Submission & Review​