Building Rich, OmniChannel Digital Experiences for Enterprise, Social and Storefront Commerce Data with Digital Data Connector

Transcription

1 Session ID: Session Title: DDX-15 Building Rich, OmniChannel Digital Experiences for Enterprise, Social and Storefront Commerce Data with Digital Data Connector Part 3: Exploring Commerce DDC Components Instructors: Bryan Daniel Senior Technical Specialist, IBM Charles Price Advisory Software Engineer, IBM Matthias Falkenberg DX Development Team Lead, IBM Copyright IBM Corporation All Rights Reserved

2 Introduction IBM Digital Data Connector (DDC) is used to integrate data from external data sources into the user experience. What s unique about the DDC is that the external data is passed through the Web Content Manager templates. As such, by configuring the presentation templates and components, a user has full control on how such data is rendered without needing the understand API/Integration level coding. The IBM Digital Data Connector method has been used to integrate multiple types of solutions. In this lab, you will explore the LATEST released components which demonstrates how the DDC can be used with IBM WebSphere Commerce. The integration effectively allows the IBM Digital Experience to serve as the front-end to a WebSphere Commerce server. The WebSphere Commerce Components for Digital Experience can be downloaded from Author: Bryan Daniel (bryand@us.ibm.com) Estimated Time: 30min

3 Lab 1 Exploring IBM WebSphere Commerce DDC Component 1.1 Setup the WebSphere Commerce DDC Components Before the WebSphere Commerce DDC Components can be used, you must perform some initial configuration. More specifically you must specify the hostname of the commerce server and the store id to be used In a new FireFox browser window, go to Click the login link located in the top right corner and login as fadams/passw0rd. Use the Site Toolbar to navigate to Content à WCM Content Authoring (as shown in the figure below), and then select the Library Explorer view. WebSphere Commerce DDC Components Page 3

4 3. Within the WCM Authoring Portlet, navigate to WebSphere Commerce à Components à Config_SharedValues. NOTE: If the WebSphere Commerce library does not show on the list, it must be added. From the menu located on the left, select Preferences Edit Shared Settings. Add WebSphere Commerce to the list of Selected Libraries and click OK. 4. Check the box next to WSCommerceHostname and click the Edit button. Verify the server hostname value is wc8dev.ibm.com (as shown in the figure below). When done click Save and Close. Page 4 WebSphere Commerce DDC Components

5 The HTTP Outbound Proxy (also referred to as the Ajax Proxy) is used by the WebSphere Commerce DDC components. As such, the hostname you specify here must also be allowed for use by the proxy. This has already been done for you and is defined by resource environment providers within the WAS Admin Console: wp.proxy.config.urlreplacement.digital_data_connector_policy.wscom merce_http = wp.proxy.config.urlreplacement.digital_data_connector_policy.wscom merce_https = 5. Next check the box next to StoreID and click the Edit button. Verify the store id is (as shown in the figure below). When done click Save and Close. WebSphere Commerce DDC Components Page 5

6 A commerce server may have multiple store ids. You can obtain the store id from the Commerce Administrator (or by looking at the URL used to access the store in a web browser). You might have also noticed additional configuration items such as Search Port, Search Preview Port, Store Preview Port, and Shared Domain. These will allow you to configure settings around search and sharing of session information between the servers. For the purposes of this lab, we can ignore these items. 1.2 Creating a Product Browsing Page In the previous section, you configured the WebSphere Commerce DDC Components. In this section you will use the components to build a simple shopping page. More specifically you will allow users to search for products and browse by a list of categories. Further refinement via faceted search will also be made available. Lastly, you will learn how to create links between pages (i.e. clicking on a product will take the user to a product details page where another commerce component will be used to display the details). 1. Use the Site Manager to navigate to DDX-15 and then select the Commerce page. 2. Use the toggle switch in the upper left corner of the switch to switch Edit Mode to ON. Page 6 WebSphere Commerce DDC Components

7 3. From the Site Manager, select + (Add Icon) à Page Components à WebSphere Commerce. Observe there are many types of commerce items available out-of-box (i.e. category listing, product listing, store locator, shopping cart content information, order information, etc). The DDC components leverage the WebSphere Commerce REST APIs. 4. Drag-n-Drop the Categories item to the left column of the page (as shown below): 5. You may notice that the categories do not necessarily appear with the correct style. As part of installing the WebSphere Commerce DDC package, a sample style is provide and is made available via the theme profile named Commerce. Complete the following steps to configure the page to use the commerce profile (and hence the sample style sheet for the theme): WebSphere Commerce DDC Components Page 7

8 a. From the Site Manager page listing, slect Commerce à Open Page Settings (as shown in the figure below). b. From the Page Settings view, select Edit Page Properties (as shown below). Page 8 WebSphere Commerce DDC Components

9 c. From the page properties window, go to the Advanced Tab. Change the Profile to Commerce and click Save. d. Observe that the styling of the category list has changed: WebSphere Commerce DDC Components Page 9

10 6. To display products in the selected category, another WebSphere Commerce page component can be used. a. From the Site Manager, navigate back to the Page Components à WebSphere Commerce view. b. Drag-n-drop the Products item to the right column of the page (as shown below). Click on a product category to verify that it displays products. Page 10 WebSphere Commerce DDC Components

11 7. To allow the user to further refine the list of products, drag-n-drop the Search Facets item to the left column, below the Categories listing. When viewing a list of products, a list of available search facets should be displayed. The Search Facets component requires a WebSphere Commerce Server that has at least FEP8 applied. This is because the REST APIs used the by search facet feature was introduced in FEP8. Thus far, you ve placed multiple WebSphere Commerce DDC components on a single page. In the next set of steps, you will create a product details page which is used when a person clicks on a product. WebSphere Commerce DDC Components Page 11

12 8. Complete the following steps to create a products details page: a. From the Site Manager page listing, slect Commerce à Create Child Page (as shown in the figure below). b. Enter Poduct Details as the page title, select the Basic (Portal 8.5 theme) template, and click Create Page to create the page. Page 12 WebSphere Commerce DDC Components

13 c. Once the page is created, use the Site Manager to go to the Page Properties. d. From the Advanced Tab, specify a custom unique name of shop-product-details and click Save. e. Drag-n-drop the Product Details component to the page (as shown below): WebSphere Commerce DDC Components Page 13

14 9. Complete the following steps to associate the product listing and product details components: a. b. Navigate back to the Commerce page. You should still be in the page Edit Mode. Look at the upper-right corner of the Products component and click on the second/right icon to view the component menu. Select Edit Shared Settings. (BE CAREFUL NOT TO SELECT CONFIGURE.) c. Under the Advanced Options section, change the Broadcast links to option to The following Portal Page and enter the value of shop-product-details. d. Scroll down and click OK to save your change. Page 14 WebSphere Commerce DDC Components

15 10. Exit out of Edit Mode and the Site Manager. 11. Click on a product. Observe that the user is taken to the product details page where the selected product is displayed. For the purposes of this lab, a very simple example of navigating to a second page was used. However, the product details could have also been displayed on a popup dialog window or a hidden page which has additional components on it. WebSphere Commerce DDC Components Page 15

16 It s important to note that the display will be customized to match your environment s look-n-feel. As such, the out-of-box components produce just a basic style. In the next set of steps you will briefly explore how you can customize how the commerce data is rendered Navigate back to the Commerce page and turn on Edit Mode. Look at the upper-right corner of the Categories component and click on the first/left icon to view the component menu. Select Open Edit Form. 14. Observe that the WCM Template allows you to specify components which define the source of the data and components which define the presentation of the data: Page 16 WebSphere Commerce DDC Components

17 15. Under List Appearance, click the Select Component option. Browse and select WebSphere Commerce à List Appearances à Categories. 16. Also observe that additional properties can be specified, such as the base category to be displayed. If desired you may select a base category (although its not needed to complete this lab). 17. Click Save and Close to save and close the Categories item. WebSphere Commerce DDC Components Page 17

18 18. Exit out of edit mode. Observe that the categories list has changed to just a simple list. You can define any number of list components which users may use (i.e. simple list, carousel, slider, etc) to display the information in different ways. 19. (Optional) If time allows, navigate back to the WCM Content Authoring portlet and open the WebSphere Commerce à Components à List Appearances à Categories component. Observe that the rendering is done via WCM templating and tags. You have full control in how the commerce data is rendered. 20. Click the logout link and close the browser window. Page 18 WebSphere Commerce DDC Components

19 IBM Software In this lab you briefly explored the new IBM WebSphere Commerce DDC Components. You began by configuring the components to point to a commerce server and store. You then used some of the existing components to build a shopping page that allows users to search for products by category and faceted search. Lastly, you learned how to setup interaction of the DDC components between pages. It s important to remember that the components are provided as a sample and the expectation is that users would customize the styling to match the look-n-feel of their Digital Experience site. The templating capabilities provided by the Digital Experience framework allows users to work with presentation templates to control the rendering. Additional value is obtained as the components are surrounded with relevant applications and content. For example, the following product details page shows how the Product Details DDC component can be restyled and surrounded with addition Web Content, Social Information, and Marketing/Cross-Sell opportunities. You have successfully completed this lab! WebSphere Commerce DDC Components Page 19