NXTBN Product Details API

The NXTBN Product Details API is a highly robust system designed to handle complex business requirements efficiently. Below, you’ll find a detailed explanation of the available endpoints for fetching product details and their use cases.

---

1. Product Details API

Endpoint:

GET http://localhost:8000/product/storefront/api/products/<slug:slug>/

Purpose:

This endpoint provides the complete details of a product, including all associated variants.

Response Includes:

• Product name, description, and images.

• All associated variants (e.g., size, color).

• Pricing details (e.g., minimum price, maximum price).

• Stock availability information.

Use Case:

This is the primary endpoint for fetching detailed product information. It is best used when you want to display a full overview of the product on its details page.

---

2. Product Details with Related Products API

Endpoint:

GET http://localhost:8000/product/storefront/api/products/<slug:slug>/with-related/ (for thumbnial only) GET http://localhost:8000/product/storefront/api/products/<slug:slug>/with-related/image-list/ (for for image list)

Purpose:

In addition to the product details, this endpoint also provides information about related products.

Response Includes:

• Full product details (as described above).

• Related product links for navigation.

Example Use Case:

Consider a scenario where you have a black t-shirt with size variants.

• This API will respond with all the size variants for the selected black t-shirt.

• Additionally, it will include links to related products, such as a similar t-shirt in a different color like green t-shirt.

Frontend Implementation:

You can use this API to enhance user experience:

1. Display the product details.

2. Provide navigation links to related products, allowing users to discover similar items easily.

---

3. Product Details with Recommended Products API

Endpoint:

GET http://localhost:8000/product/storefront/api/products/<slug:slug>/with-recommended/ (for thumbnail only) GET http://localhost:8000/product/storefront/api/products/<slug:slug>/with-recommended/image-list/ (for image list)

Purpose:

This endpoint extends the product details with up to 20 recommended products that are most similar to the selected product.

Response Includes:

• Full product details.

• A list of up to 20 recommended products.

Suggested Usage:

While this endpoint is available, we recommend a different approach for better performance:

• Use the dedicated recommended list API:
  GET http://localhost:8000/product/storefront/api/products/<slug:slug>/recommended-list/ (for thumbnail) GET http://localhost:8000/product/storefront/api/products/<slug:slug>/recommended-list/image-list/ (for image list)

Why Use the Recommended List API?

• When a user visits the product details page, fetch the main product details first.

• Load the recommended list API only when the user scrolls down, reducing unnecessary data fetching.

• For desktop versions where recommended products are shown in a sidebar, you can use the with-recommended API to preload the data.

---

Best Practices for Implementation

1. First Load:

   • Use the http://localhost:8000/product/storefront/api/products/<slug:slug>/ endpoint to display product details.

2. Lazy Loading Recommendations:

   • When the user scrolls down to view recommendations, call the recommended-list API to fetch similar products.

3. Desktop Sidebar:

   • For desktop layouts, use with-recommended to preload recommended products and display them in the sidebar.

4. User Navigation:

   • Use the with-related API to provide links to related products, enabling seamless user navigation.

---

Example Flow

1. Initial Page Load:

   • Fetch product details using the primary API.

2. Scroll Down:

   • Call the recommended list API to fetch 20 similar products.

3. Related Products:

   • Use the with-related API to guide users to similar designs or styles.

This approach optimizes performance and ensures a seamless user experience.