1. Developing Open Storefront Framework Applications for Oracle Commerce
  2. Design Storefront Pages
  3. Understand Default Open Storefront Framework Widgets

Understand Default Open Storefront Framework Widgets

The Open Storefront Framework (OSF) includes a number of default layouts and widgets that you can customize as you build your store.

This release of OSF includes a template that acts as a core reference store with a library of reference components and core shopping flows, leveraging best practice UX, to help accelerate new deployments and maintain a best practice implementation. The application is optimized for mobile storefronts.

Layouts represent different page types, such as product details, checkout, and order confirmation. The default layouts act as templates, and you use them to design, adjust, and preview your pages before publishing live. Each layout has access to a group of layout-specific widgets that are individual pieces of code that perform specific tasks.

Note: OSF includes layouts and widgets for the storefront only. The Agent interface continues to be managed with the classic framework.

This section describes each of the default layouts in OSF, including the default widgets available for each layout. Detailed information about each widget's code, including actions, selectors, fetchers, and endpoints, is available in the JS API documentation that you can download from Oracle Customer Connect.

The reference application includes the following shopper flows:

  • Registered & Anonymous Shoppers Visits
  • Browse/Search
  • Add to Cart
  • Shopping Cart
  • Checkout
  • Split Shipping
  • Login
  • Register
  • Managing Shopper Profile

Home page widgets

The reference template includes the following widgets for the store's home page.

  • Progress Bar
  • Cart Link
  • Country Store/Language/Currency Picker - Mobile
  • Image Widget (similar to a promotion banner)
  • Footer Container, including Footer Link, Copyright WebContent, and Social Links
  • Header Container Widget - Mobile
  • Profile Registration, Login, Forgot Password Update Password, Update Expired Password

Product Listing and Search widgets

The reference template includes the following widgets for the store's product listing pages, including search containers.

  • Back to Top Link
  • Faceted Navigation - Mobile
  • Product Listing Container, including the listing-summary and load-more-button - Mobile
  • Typeahead Search - Mobile
  • Dynamic Breadcrumbs
  • Result List Table - Mobile

Product Details page widgets

The reference template includes the following widgets for a product's details page. These widgets are all included in the Product Details Container widget.

  • Product Add To Cart Button
  • Product Inventory Status
  • Product Details Container
  • Product Variant Options
  • Product Long Description
  • Widget Product Summary (Short Description)
  • Product Image Viewer
  • Product Name
  • Product Price
  • Product Quantity
  • Shipping Surcharge
  • Social Sharing Widget

Shopper Profile widgets

The reference template includes the following widgets for the registered shopper profile.

  • Profile Order Actions
  • Profile Email Marketing Preferences Summary, Profile Email Marketing Preferences
  • Profile Recent Orders
  • Profile Welcome
  • Navigation Breadcrumbs
  • Profile Return Details
  • Profile Account Details and Update Password
  • Profile Order Information, Profile Order Details Container
  • Profile Order History
  • Profile Submit Order Cancellation
  • Profile Address Book Widget (summary, address book list, create and edit address)
  • Profile Return Items Request Container

Shopping Cart widgets

The reference template includes the following widgets for the cart.

  • PromotionsDisplay
  • PromotionCodeEntry and Promotion Container
  • CartOrderSummary, ProfileOrderSummary
  • Add Gift With Purchase Support to CartItemDetails
  • CheckoutButton with Validate Cart
  • CartItemDetails Widget

Checkout widgets

The reference template includes the following widgets for the cart.

  • PromotionsDisplay
  • PromotionCodeEntry and Promotion Container
  • CartOrderSummary, ProfileOrderSummary
  • Add Gift With Purchase Support for CartItemDetails
  • CheckoutButton with Cart Validation
  • CartItemDetails Widget

Payment widgets

The reference template includes the following widgets that handle order payments. For details about configuring payments in an OSF storefront, see Supported payment methods and transaction types.

  • Checkout Payment Methods Container
  • Profile Saved Cards Widget
  • Profile Saved Cards - Add Credit Card
  • Profile Saved Card Summary
  • Checkout Gift Card Status Widget - Show Gift Card Applied status
  • Checkout Gift Card Entry Widget - Apply Gift Card