The starting point for a B2B web catalog is with the web product details. Below are the steps needed to configure a web product so that it can eventually be displayed on the web as part of a collection.

How to access Web Product Details

Web Product Details are associated with a web item that belongs to a specific Item Master in SAP Business One.

To access the Web Product Details screen follow either of the options listed below:

  • Access Web Product Details for an Item Master from the Item Master Data screen. Go to: Inventory > Item Master Data > Web Product Info as seen in the screenshot below

  • Access Web Product Details from the Web Product Catalog screen in SAP Business One. Go to: zedSuite Manager > Customer Portal B2B > Manage Products. Press the golden arrow For a walkthrough of how to load items into the Web Product Catalog, see Product Catalog Management.

    From the Item Master Data window, press the Web Product Info button (highlighted) to open the Web Product Details screen.
    From the Item Master Data window, press the Web Product Info button (highlighted) to open the Web Product Details screen.

Add/Edit Web Product Details

Manage product details as outlined below.
Manage product details as outlined below.
Edit Web Product Details Fields
Field Type Description
Web Product Code (1) Read-only text

*Unique Web Product identifier.*

Language (2) Drop-down

If multiple languages are enabled, select the desired language. Each language requires its own configuration.

Web Name (3) Text

The Web Name is displayed on the web to customers.

Web Description (4) Text with optional HTML Editor drill-down Use the golden arrow to open the HTML Editor, or edit the field directly. This will be displayed on the web as HTML-formatted content.
Primary Image (5) Text with optional media manager drill-down This is the main image displayed on the product details page. You may use the golden-arrow drill-down to open the media manager and select an image. Alternatively, you may type in the known path relative to the web root (for example, /assets/B2B/A0001/a0001-main.jpg).
Thumbnail Image (6) Text Field with optional media manager drill-down This is a thumbnail image which is displayed on collections pages. You may optionally use the golden-arrow drill-down to open the media manager and select an image. Alternatively, you may type in the known path relative to the web root (for example, /assets/B2B/A0001/a0001-thumbnail.jpg).
Add. Media Folder (7) Text Field with optional media manager drill-down This Additional Media Folder is displayed on web product details. You may optionally use the golden-arrow drill-down to open the media manager and select the folder. Alternatively, you may type in the known path relative to the web root (for example, /assets/B2B/A0001/).
Tags (8) Table Tags are used by smart filters to build collections. Applying tags to a web product will allow it to appear automatically in any configured collection that uses that tag.
Additional Properties (9) Table

Additional Properties may be assigned to items to display additional information on the product details page.

Any Additional Property that is left blank will not be displayed in the out-of-the-box product details template. If a property doesn’t apply to this item, leave it blank and it will not be displayed on the web.

Additional Properties are based on User Defined Fields (UDFs) assigned to the Web Product Details User Defined Object (UDO), which is named “Web Item Details CP B2B”. These UDFs are managed using standard SAP Business One UDF management (found in SAP Business One under the menu option Tools > Customization Tools > User-Defined Fields - Management… ). A walkthrough of this setup is provided in the section Add Additional Properties to the Web Product Details screen below.

Details Template (10) Drop-down

The selected template is used to display this item on the web product details page.

By default, only one template is provided (product-details.liquid), however additional templates may be created using liquid templates.

B1 Item Code (11) Read-only text

For reference only.

This field identifies the B1 Item Code of the Item Master Data record. This item’s pricing details will be displayed on the web.

B1 Item Name (12) Read-only text

For reference only.

This field identifies the B1 Item Code of the Item Master Data record. This item’s pricing details will be displayed on the web.

Active (13) Check-box

If checked, the item will be displayed on the web and will be searchable.

If un-checked, the item will not be displayed on the web.

Enable Additional Properties

Additional Properties are configured for display within a Store Front. The Liquid template’s settings (to display or hide additional properties) can be set for each Store Front in that Store Front’s “Product Template” tab. This offers a way to change the layout for a given collection without customization.

To configure Additional Info for display within a Store Front:

  • In SAP Business One, go to: zedSuite Manager > Customer Portal B2B > Manage Store Fronts.

  • Press the golden-arrow button preceding the desired Store Front. If more than one Store Front is used, each store front may be configured differently.

  • Open the Product Templates tab.

  • Select the product details template to be configured. By default, this is product-details.liquid. Note that if you have additional product details templates, each template may have its own setting.

  • Set the “Show Additonal Info” property. True will display all Additional Property details on any product that has the property filled in. False will hid all Additional Property details.

Set the Show Additional Info property (marked) for each product details template (one is installed out of the box).
Set the Show Additional Info property (marked) for each product details template (one is installed out of the box).

Add Additional Properties to the Web Product Details screen

Before an Additional Property can be configured, it must be added to the list of configurable properties.

Additional Properties are based on User Defined Fields (UDFs) assigned to the Web Product Details User Defined Object (UDO), which is named “Web Item Details CP B2B”. These UDFs are managed using standard SAP Business One UDF management.

To add other properties that may be configured on Web Product Details:

  • In SAP Business One, go to: Tools > Customization Tools > User-Defined Fields - Management….

  • Set field details.

    Set Field Details for the Additional Property.
    Set Field Details for the Additional Property.
    UDF Setup
    Field Type Description
    Title (1) Text

    This is the UDF column name.

    For example, “Sample” results in a UDF databse column “U_Sample”.

    Description (1a) Text

    A user-friendly name for the UDF.

    Type (2) Drop-down

    The data type of the UDF. Set this value to Alphanumeric for UDFs in B2B Marketplace Web Items.

    Length (2a) Drop-down

    The length will be set on text fields, and must be sufficient to house the data that needs to be displayed on the web. Ensure this field is large enough to accommodate all desired Additional Property details.

    Structure (3), Validation (4), Set Default Value for Field (5), Mandatory Field (6) Miscellaneous

    These fields depend on the Type selected. Configure these options as appropriate for your desired UDF.

    If you plan to import batch data into this field using DTW, make sure the settings match the source UDF.

    Add (7) Button

    Press the Add button to add the UDF with the configured options.

  • Press Add to add the UDF to the Additional Properties list for all Web Products.

  • Additional Properties may now be configured on Web Product Details.