Home
User Guide
The information contained in this section applies to WebSphere Commerce Version 8. The documentation also applies to all subsequent releases and modifications until otherwise indicated in a newer section.WebSphere Commerce is a single, unified e-commerce platform that offers the ability to do business directly with consumers (B2C), directly with businesses (B2B), and indirectly through channel partners (indirect business models). WebSphere Commerce is designed to be a customizable, scalable, and high availability solution that is built to leverage open standards. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels.
Samples
Aurora starter store
The Aurora starter store showcases the latest in storefront features, and models best practices in store development, demonstrating a wide scope of retail scenarios. Simplify your responsive B2C or B2B direct web store implementation and reduce your time-to-market by using the Aurora starter store as your development base.
jQuery Aurora starter store
The Aurora starter store in WebSphere Commerce is completely written in jQuery 3.1.0, which is one of the most commonly used JavaScript libraries used in dynamic websites. The jQuery AJAX and events API provides an easy to use framework that meets most AJAX requirements for storefront development.
jQuery Enhancements API
WebSphere Commerce extends the jQuery AJAX and events API, providing an easy to use framework that meets most AJAX requirements for storefront development.
User interface widgets
The user interface widgets in the Aurora starter store extend the functionality of available jQuery widgets to create a versatile, customer-friendly store. They add new functionality, changing the appearance and interaction experience in the store.
wc.widgets.Grid
The Grid widget is used to display product tables in various pages. The Grid widget helps to easily build a responsive table.

User Guide
The information contained in this section applies to WebSphere Commerce Version 8. The documentation also applies to all subsequent releases and modifications until otherwise indicated in a newer section.WebSphere Commerce is a single, unified e-commerce platform that offers the ability to do business directly with consumers (B2C), directly with businesses (B2B), and indirectly through channel partners (indirect business models). WebSphere Commerce is designed to be a customizable, scalable, and high availability solution that is built to leverage open standards. It provides easy-to-use tools for business users to centrally manage a cross-channel strategy. Business users can create and manage precision marketing campaigns, promotions, catalog, and merchandising across all sales channels.
- Planning
  Creating a custom implementation of a WebSphere Commerce store requires a significant amount of planning. From gathering client needs, to deploying the live solution, much work is needed to successfully deploy a custom client store. Use the resources in here to help you plan every phase of store creation.
- Installing
  Review the following sections for information about installing the WebSphere Commerce product, associated maintenance, and WebSphere Commerce enhancements.
- Migrating
  Before you migrate to WebSphere Commerce Version 8.0, review this information to help plan and execute your migration.
- Deploying
  The topics in this section describe how to publish stores to either a test or production environment, and how to deploy customized code.
- Operating
- Integrating
  Topics in the Integrating category highlight the tasks that are commonly performed for using WebSphere Commerce in combination with other products.
- Administering
- Tutorials
  WebSphere Commerce provides many tutorials to help you customize and understand your WebSphere Commerce instance and stores.
- Samples
  - Aurora starter store
    The Aurora starter store showcases the latest in storefront features, and models best practices in store development, demonstrating a wide scope of retail scenarios. Simplify your responsive B2C or B2B direct web store implementation and reduce your time-to-market by using the Aurora starter store as your development base.
    - Site level features
      Using site level features, you can customize the look and feel of your storefront. Site level features are visible from every page in your store.
    - Category level features
      Category level pages in the Aurora starter store are designed to assist customers in narrowing the product selection to find the preferred item.
    - Product level features
      Product level features in the Aurora starter store are designed to provide details about a specific product in your store.
    - Aurora as a B2B direct starter store
      You can publish the Aurora starter store as a B2B direct store and take advantage of features that are offered by the Aurora starter store plus extra B2B capabilities. Get your B2B e-commerce site up and running faster at a lower cost by using the Aurora starter store as your starting point. With B2B-optimized features built right into the storefront, you can minimize the amount of customization that is required to provide an optimal shopping experience to your business customers.
    - Publishing the Aurora starter store
      The Aurora starter store can be used only as a storefront asset store in the Extended Sites business model. It is not possible to deploy Aurora as a stand-alone B2B or B2C store. The Aurora.sar archive contains the organization structure, predefined user roles, and access control policies necessary to create either a B2C storefront asset store or a B2B storefront asset store.
    - jQuery Aurora starter store
      The Aurora starter store in WebSphere Commerce is completely written in jQuery 3.1.0, which is one of the most commonly used JavaScript libraries used in dynamic websites. The jQuery AJAX and events API provides an easy to use framework that meets most AJAX requirements for storefront development.
      - Publishing the jQuery Aurora starter store
        The jQuery Aurora starter store can be used only as a storefront asset store in the Extended Sites business model. It is not possible to deploy it as a stand-alone B2B or B2C store. The AuroraJQuery.sar archive contains the organization structure, predefined user roles, and access control policies necessary to create either a B2C storefront asset store or a B2B storefront asset store.
      - Rebuilding store code
        You can rebuild your store code, such as JavaScript and CSS files, by using Grunt plugins.
      - Debugging tools
        You can debug jQuery in the Aurora starter store to help determine the locations of potential problems to resolve.
      - jQuery Enhancements API
        WebSphere Commerce extends the jQuery AJAX and events API, providing an easy to use framework that meets most AJAX requirements for storefront development.
        WebSphere Commerce AJAX framework
        The WebSphere Commerce AJAX framework is an extension of the jQuery AJAX framework. It provides an easy to use framework that meets most AJAX requirements for storefront development, and hides some of the complexity and repetitive code that a storefront developer often encounters.
        AJAX framework
        The AJAX framework helps determine the refresh areas of pages, and the content that populates them. The framework helps track the status of store pages, and the content that is generated when customers interact with the store.
        User interface widgets
        The user interface widgets in the Aurora starter store extend the functionality of available jQuery widgets to create a versatile, customer-friendly store. They add new functionality, changing the appearance and interaction experience in the store.
        wc.widgets.Carousel
        The Carousel widget wraps around a third-party plug-in, Owl Carousel. The Carousel widget is used in Content Carousel and Recommendation widgets to display multiple contents that transition from one image to the next. By default, the pagination control that is inherited from Owl Carousel is disabled. WebSphere Commerce generates pagination control with specified pagination buttons.
        wc.widgets.Grid
        The Grid widget is used to display product tables in various pages. The Grid widget helps to easily build a responsive table.
        wc.widget.RefreshArea
        The RefreshArea widget is used to wrap a Document Object Model (DOM) node that is refreshed by replacing the innerHTML property with new content loaded from the server. That is, a refresh area is a section of a page, which is dynamically updated with new content. A refresh area widget is associated with a registered refresh controller that handles listening for events that require this widget to be refreshed.
        wc.widgets.Select
        The Select widget is an extension of the JQuery UI API selectmenu. The Select widget inherits all the functionality from JQuery widget selectmenu and displays a select box to match the overall style of the Aurora starter store.
        wc.widgets.ValidationTextbox
        The ValidationTextbox widget is used as input box with validation function in forms. With ValidationTextbox widget and JQuery datepicker widget, you can input a date by either typing or selecting from a calendar. ValidationTextbox requires wcTooltip widget to display invalid messages.
        wc.widgets.wcTooltip
        The wcTooltip widget is used to display error messages or information when a shopper hovers over an anchored element. wcTooltip is usually anchored on a Document Object Model (DOM) element.
        wc.widgets.WCDialog
        The WCDialog widget is an extension of JQuery UI API dialog and is used to display a pop up window, such as the mini shopping cart on the header, Language/Currency selection box, or quick info pop up box.
      - Example: Optimizing the performance of the jQuery Aurora starter store home page
        Follow this example to optimize the performance of the jQuery Aurora starter store home page by using lightweight resources and then rebuilding the store code with the grunt script.
    - Aurora starter store functions
      For the Aurora starter store, you can select certain functions to include in your store and disable the ones that you do not need. Use the Store Management tool in Management Center to control which functions are enabled for your store.
    - Accessibility
      The Aurora starter store follows the IBM accessibility guidelines to implement accessibility features. Accessibility features help users who have a physical disability, such as a visual impairment, hearing impairment, or limited mobility, successfully use the store.
    - Search features
      WebSphere Commerce comes with a powerful and fully integrated search function. The search functions in WebSphere Commerce provide an enriched customer experience, with features such as automatic search term suggestions and spelling correction. Since it is built on open standards, WebSphere Commerce Search is highly flexible and extensible. Starter stores can use the search engine's most sophisticated features without requiring extra customization. A key feature of Search is that sales personnel can create and manage search term associations, and search-based merchandising rules, from within the Management Center and Store view.
    - Responsive Web Design (RWD)
      Responsive Web Design (RWD) is a web design approach that is aimed at crafting pages that are optimized for a wide range of devices. It advocates the use of primarily fluid layouts and media queries to optimize a site for different devices, instead of designing a separate site for each device.
    - Aurora starter store companion assets
      The IBM Starter Store Companion Assets are a customizable set of resources that are designed to reduce the overall cost of implementation. You can use the assets to understand, customize, test, and develop your store that is based on the starter store.
    - Replacing an existing store with Aurora
      Usually, new features that are introduced in feature pack releases require storefront changes. These changes can be in the form of data model changes, or modifications to the storefront JSP files to use new or updated APIs. For this reason, moving to the latest starter store is the easiest way to have newer components work on your existing store. Depending on the age and design of your site, this retrofitting can be done through several different approaches. If your site is relatively up-to-date, and you are interested in a particular feature, then you can find the migration steps for that solution or component and apply them to your store. Alternatively, you can attempt to replace the entire store with the Aurora starter store by following this set of high-level instructions.
    - Upgrading your store assets
      For existing WebSphere Commerce customers who are looking to upgrade to the next release, there are a number of approaches that you can take to upgrade your store. Review your requirements, and chose the proper path to upgrade your store assets to take advantage of the supplied features in the Aurora starter store.
    - WebSphere Commerce Dojo Enhancements API
      WebSphere Commerce extends the Dojo AJAX and events API, providing an easy to use framework that meets most AJAX requirements for storefront development.
    - Developing Aurora starter store pages
      Developing and maintaining store pages can become an efficient and consistent process by following the general practices that are used in existing Aurora starter store pages.
    - Site flows and interactions
      The site flows provide a screen capture and a detailed description for each store page. Store developers can use the site flows as a high-level guideline for each page to identify starting points when store pages are changed.
    - Checkout flows
      Checkout flows describe pages that your customers use to complete the checkout process.
    - Site flows
      The site flows provide a screen capture and description for each store page that includes Apple Pay on the Web functions.
    - My Account flows
      The My Account flows describe pages your customers use to register with the online store and maintain their account with the store. The My Account pages include the account summary, personal information, address book, personal wish lists, coupons, orders, order details, and browsing history. Certain pages are optional and are available to customers only if your store chooses those functions.
    - IBM Customer Service for WebSphere Commerce
      IBM Customer Service for WebSphere Commerce provides customer service enhancements that enable a customer service representative (CSR) to resolve common issues and capture orders. These capabilities are built into the WebSphere Commerce Aurora storefront and enable a CSR to complete key tasks on behalf of a guest and registered customers for both B2B and B2C stores. Customer Service for WebSphere Commerce is offered for both Professional and Enterprise editions.
    - Additional flows
      The Additional flows describe the supplementary pages that are required to maintain your online store.
    - Organization and buyer administration flows (B2B)
      In the B2B direct business model, each company that purchases from your store must have one or more registered users who are assigned the Buyer Administrator role. Buyer Administrators administer the company's organizations, and they manage the company's buyers, including assigning roles and approving new buyers who register. The Aurora starter store provides a series of self-serve pages for Buyer Administrators to do their work directly in the storefront, rather than using the Organization Administration Console.
    - Order approval flows
      During organization setup, order approvals and contracts can be configured to set the criteria that determines which orders require approval. When order approvals are enabled, a Buyer Approver or Buyer Administrator must approve orders that exceed the order total limit that is specified in the contract before orders are submitted for processing. The Aurora starter store contains pages in which Buyer Approvers and Buyer Administrators can view and manage order approvals.
    - Buy-on-behalf-of flows
      The buy-on-behalf-of feature allows a Buyer Administrator to shop on behalf of a buyer in the same organization. After signing in to buy on behalf of a specific buyer, the Buyer Administrator sees the store exactly the way that buyer would see the store. The Buyer Administrator can then lock an order and proceed to create, modify, or view the buyer's information such as saved orders, order history, and requisition lists. When an order is locked, a symbol appears beside the order number.
    - Enabling punch-out payment
      You can enable punch-out payment in starter stores. Punch-out payment is a payment model where a third-party payment service provider processes payments for orders.
    - Facebook integration
      Use the power of the world's biggest social media community to spread the word on products or your store with embedded Facebook Like or Send/Share buttons.
    - Apple Pay on the Web integration
      Apple Pay on the Web integration with WebSphere Commerce provides you with an easy and secure way to accept and process payments. Apple Pay on the Web enables customers to purchase products in the Aurora starter store with a single touch in Safari on Mac, iPhone, and iPad.
    - Testing the WebSphere Commerce and Sterling Configurator integration
      After you install and configure the software components for the WebSphere Commerce and Sterling Configurator integration, test the integration with sample data and sample procedures.
    - Testing your store
      WebSphere Commerce provides a test assets package that contains documentation and tools to help introduce, plan, and run Functional Verification Testing (FVT) for your store.
  - Extended sites starter store
    Use an extended sites starter store to get started on setting up an extended sites solution that will allow your selling organization to provide unique storefronts for different enterprise customers or showcase a number of branded storefronts.
  - Sample stores
    A sample store is for learning purposes and some tutorials can use a sample store. Do not use a sample store as the base for building your site. Sample stores might not be accessible or translated.
- Developing
  The topics in the Developing section describe tasks performed by an application developer.
- Compliance
  The following section describes how you can leverage WebSphere Commerce features and functionality to help your site be compliant with different privacy and security standards.
- Securing
  These topics describe the security features of WebSphere Commerce and how to configure these features.
- Performance
- Troubleshooting

wc.widgets.Grid

The Grid widget is used to display product tables in various pages. The Grid widget helps to easily build a responsive table.

Sample Output

Carousel sample output

Example

<div data-widget-type="wc.Grid" data-widget-options=“{‘columnCountByWidth’: {‘0’:1,’301’:2}}”></div>

Options

columnCount: (Integer) The number of columns in the grid. The default value is 1. You do not have to specify columnCount if rowCount or columnCountByWidth is specified.
rowCount: (Integer) The number of rows in the grid. You do not have to specify rowCount if columnCount or columnCountByWidth is specified.
columnCountByWidth: Determines the column count based on the screen width for building a responsive table. For example, if screen width is 1000 px and columnCountByWidth is {"300": 2, "500": 3: "800": 4}, the column count is set to 4 since the screen width is greater than 800.
elementSelector: (String) The elements in the grid. The default value is "div.grid-element".
useColumnWrapper: (Boolean) Determines whether wrappers are used.
columnWrapperClass: (String) Determines the CSS class to add to the column wrapper div elements. The default value is "grid-column-wrapper".