Configure an OSF storefront to display content items

If your storefront is built using the Open Storefront Framework (OSF), the integration with Oracle Content Management provides additional features not available in Storefront Classic.

These features include:

  • The ability to use search queries to tailor content listings and to show the same content types in different combinations.
  • Dynamic metadata for improving SEO results.
  • A product-aware mode for the Content Item widget that enables you to enrich products by including additional content, media, and documentation.

This section describes how to configure your OSF storefront to access these features.

You can find more information about configuring and customizing OSF layouts and widgets in Developing Open Storefront Framework Applications for Oracle Commerce.

Create UI controls for selecting content items

You use the Content Listing widget to display a dropdown menu for shoppers to select individual items to display detailed information about.

Note that you can associate only one content type with an instance of the Content Listing widget. If you want to allow shoppers to select different content types, you will need to create multiple instances of this widget. For example, if you have a blog content type and a recipe content type, you need separate widget instances for listing the items of each type.

To configure a page containing an instance of the Content Listing widget, perform the following steps:

  1. Open the Design page and select your OSF application from the dropdown menu at the top of the page.
  2. Select the layout you want to clone.
  3. Configure the settings for the newly cloned layout, and click Save.
  4. Open grid view and drag the Content Listing widget to the layout.
  5. Open the Content Listing widget’s settings and select the content type from the dropdown list.
  6. Click Save.
  7. Publish the changes in order to see the content pages, containing links to the content details, displayed on the storefront.

Query-driven content listing

You can tailor content listings by specifying one or more queries to apply when populating the list. When you configure your Content Listing widget, after you select the content type, click Add New Parameter. A dialog box displays controls for constructing the query:

  1. In the Content Field dropdown, select the field to use in the query. (The values in the dropdown are taken directly from the item type.)
  2. In the Operator dropdown, select the operator to use. (The operators listed are ones that are appropriate for the type of data in the field.)
  3. In the Value input, enter the value to apply the operator to.
  4. Click Save.

For example, if the content type is Article, you might select the Title field, then select the Contains operator, and enter the value baseball. If this query is applied, the items listed by the widget will be articles whose title contains "baseball."

You can create multiple queries for a single Content Listing widget instance. If you do this, a toggle switch appears for specifying how to combine them. Click All to list only those items that match all of the queries, or Any to list all items that match any of the queries.

Display content items on the storefront

When a shopper selects a content item from a Content Listing dropdown, the item details are displayed on the Content Item page. The page URL for the content item corresponds to the content mapping in Oracle Content Management. If you make updates to the content and then publish the changes, the new mappings are automatically sent to Commerce.

By default, all content items are rendered using the default Content Item page. However, you can create another version of that layout for specific content types by cloning the Content Item page and configuring the cloned layout to associate it with a specific content type. You may need to modify the instance of the Content Item widget in the cloned layout to ensure content items are displayed properly on the page.

SEO configuration

The Content Item page configuration include item-specific settings you can use to improve the ranking of pages with web search engines:

  1. Use the Page Title Field dropdown to specify the content item field whose value will be displayed as the title of the rendered page.
  2. Click Add Meta Tags to construct SEO meta tags that incorporate data from content item fields you specify.

Content Item widget

The Content Item widget is a container with content field widgets that you can arrange on a layout. Each content field widget is named for the type of data it can display:

  • Content Text
  • Content Date
  • Content Image

You can use these content field widgets in any combination. For example, a page might have a Content Image widget to display an image associated with the content item, and several Content Text widgets for displaying different text fields from the item.

The Content Item container has configuration for specifying the source of the data. You select one of these options from the Widget Type dropdown:

  • Layout – The data is derived from the layout. (See below.)
  • Static – The data is a specific item that you select from the Asset Name dropdown that appears if you select this option.
  • Product Aware – Enrich product detail pages with additional content from Oracle Content Management. (See below.)

Content Item layout mode

The Layout setting is intended for use with a Content Item container that is placed on a Content Item page. The Content Item page is accessed in the storefront using the URL slug. You can also create a content-type specific layout by cloning the Content Item layout and selecting a content type.

Product-aware mode

The Product Aware setting is intended for use with a Content Item container that is placed on a Product page. When you select this option from the Widget Type dropdown, controls appear that you use to associate the Commerce product on the page with a corresponding item in Oracle Content Management, enabling the product details to be enhanced with additional content:

  1. Use the Content Type dropdown to specify the type of content item to associate with the Commerce product.
  2. Use the Content Field dropdown to specify the field in the content item that represents the product ID in Oracle Content Management.