Next-generation platform

Implementing product details

Edit online

A store associate can view details about a product by clicking its image or description. This section describes the APIs, services, and other components that are used to implement product details.

The Product details panel that is displayed differ based on whether you are in the Customer service view or in the Order fulfillment or Inventory management menus within Sterling Store Engagement.

Product details panel from Customer service menu

You can view the product details by using the following methods:
  • Customer service > Product search. You can search for a product by selecting Customer service > Product search. If there are multiple search results, click the product image or description from the product search results page to view more details. If the search returns only one result, the Product details page is displayed directly.
  • Order search results and customer profile pages. You can view product details from the order search results and customer profile pages, by clicking a product image or description.
Note the following point about the implementation of the Product details panel from Customer service menu:
  • The getCompleteItemList API is called to retrieve the details when the Product details panel is displayed.
  • The Product details panel displays product SKU, price details, and the availability per delivery methods, and four accordion panes displaying Product variants, Product description, Related products, and In-store inventory details. You can also click the product image to view more images, if available.
  • If you have the Find product (ISF000044) resource permissions assigned, a View details button is displayed. Click View details to open the Product details page. You can add products to the cart and place order from this page.
  • The behavior is the same when you use the global search option to search for products, orders, or customers.

Product details panel from Order fulfillment, Inventory management, and Configuration menus

You can click the product image or description from any of the pages in the Order fulfillment, Inventory management, and Configuration menus to open the Product details panel.
  • The getCompleteItemList API is called to retrieve the details when the Product details panel is displayed.
  • The Product details panel displays product SKU, price details, availability per delivery methods, and two accordion panes displaying the product description and in-store inventory details. You can click the product image to view more images, if available.

Solution

  • The Product details panel is implemented as product-details-modal.component.html and is a part of the app-common module.
  • The Product details panel is added to various components by using showProductDetails directive and item Id and uom must be passed as input to this directive. You can pass these values in this format:[isfShowProductDetails]="{itemID: itemID, uom: UnitOfMeasure}".

    By default, this implements the Product details panel that corresponds to the Order fulfillment, Inventory management, and Configuration menus.

    To implement the Product details panel for the Customer service view, you must pass viewType='customer' to the directive.

  • The pane on the Product details panel, which displays the primary product details is loaded by using the configuration in customer-view-details.config.ts or fulfillment-view-details.config.ts file based on the view, from the primaryDetail object.
  • The accordion panes of the Product details panel is a part of the main page component. The items in the accordion panes are loaded by using the configuration object having an array of accordionItems.
    Each item in the object must contain the following properties:
    • id. Unique id for the item, which can be used to expand that accordion pane based on the condition or to handle data emitter logic in parent container by using switch case.
    • tid. The tidto use for testing.
    • component. Optional. This is dynamically loaded. You do not have to pass the component property if you do not want to display this item.
    • displayBundleKey. The title for the accordion pane.
    • lazyLoad. Optional. Indicates whether to load the accordion component initially or upon expanding the component. Default value is undefined.
  • To add a dynamic accordion title, add a value property to the configuration object and it must be used as a translation parameter.

Evaluation of carry order line availability

Sterling Store Engagement and Store Inventory Management support the pickup, ship, and carry line fulfillment options. The getItemAvailabilityForStore API checks the availability of the products in stores. The availability of products with carry order lines is computed differently by the getItemAvailabilityForStore API depending on whether Sterling Store Engagement is integrated with IBM® Sterling Global Inventory Visibility or IBM Sterling Intelligent Promising Inventory Visibility.

When integrated with IBM Sterling Global Inventory Visibility
Carry lines are treated as pickup for the store in which the user is currently logged in. The delivery method is passed as PICK when the availability of a product is checked.
When integrated with IBM Sterling Intelligent Promising Inventory Visibility integration
Sterling Intelligent Promising Inventory Visibility only supports pick and ship delivery methods for checking availability. Hence, checking the availability of carry lines in Sterling Intelligent Promising Inventory Visibility fails. To avoid checking the availability of the carry lines with Sterling Intelligent Promising Inventory Visibility, you must set the yfs.isf.ycd.suppressCarryAvailabilityCheckToIV property to Y.