Introduction
One can easily develop the ecommerce application frontend using Angular Js/Node Js and integrate with SAP Hybris ecommerce to expose all OOTB key commerce functionality via a Restful Web service API for the best customer shopping experience.
The one example is One view/Oracle FatWire WCMS. OneView is an angular application will act as the loader and container of application. It contains HTML templates where the widget(s) will be loaded inside its specific container page. The front-end widget which will interact with a back-end proxy web service API, which will act as a proxy between the front-end widget and the back-end systems.
SAP commerce team developed an application with project name – Spartacus, Angular-based JavaScript storefront for SAP Commerce Cloud that communicates exclusively through the Commerce REST API.
Below block diagram depicts the high level End-to-End flow.
Fig: Block Diagram Decoupling Approach
SAP Hybris Commerce provides the OOTB solution OCC (Omni Commerce Connect) modulea set of extensions which exposes the commerce Restful web services.
OCC is the second version of commerce REST interfaces that enables you to expose key commerce functionality using API.OCC offers access to all ecommerce CRUD operation like managing customer profile, creating cart, retrieving product data, checkout process, placing orders and also running a Solr product search and returning the results. To enable OCC you can use “ycommercewebservices” extension.
OCC is useful in cases where the UI/CMS part is not built using hybris WCMS capabilities or cases where commerce services needs to be consumed in other third party systems. The OCC module also provides separate cache, exception handling mechanism, authentication framework or the attribute mapper.
The Commerce Web Services support both XML and JSON data formats, which can easily be parsed on all mobile operating systems as well as desktop clients.
Integration of third party system with OCC
OCC is very secure for communication between the systems. It uses OAuth2.0 to authenticate the consumers or clients. OAuth token is generated through Http Client by passing the token URL and ClientID and secrete. This token will be used in subsequent calls to authorize the client.
Key Features of OCC
— All the ecommerce data is shared around all channels and cockpits.
— A prototype of a shop may be built using HTML, CSS and JavaScript.
— Publishes REST like web services with support for XML and
— Supports OAuth 2(default) and basic authentication over HTTPS.
— The security is based on access roles at the service layer and OAuth 2 configuration
— Supports Addons. To extend the web services, use the extension commercewebservicescommons. The extension acceleratorwebservicesaddonis an example of an addon which extends OCC.
How to Customize/Create new Custom OCC Services?
We can follow the below steps for creation of new OCC services.
Example: GET
https://localhost:9001/sapoursocc/v2/{baseSiteID}/mycontroller/test?Fields=BASIC&access_token=36c0b8f9-58ca-41a9-8721-370e096f33f2
Step 1:OCC supports HTTP request like GET, POST, DELETE, PUT, and PATCH.
Step 2:Host: localhost: 9001
Step 3: The REST services are provided as a web extension. The OOTB web context is “/rest”, but you can change that to whatever you like by setting the property “<extensionname>.webroot” to the desired web context (e.g. “/sapoursocc”) in extensioninfo.xml.
Step 4: OCC is the second version of commerce REST interfaces; therefore all OCC URLs contain “/v2/” in them. Enable V2 version in extension-web-spring.xml.
If you want to create servlet for newer version like v3 change configuration in web.xml and different servlet mapping.
Step 5: {baseSiteID}: Base site Identifier or name of storefront
Step 6: The client requests an access-restricted resource on the server by authenticating with the server using the resource owner’s credentials. An access token is generated and passed with API calls to authorize the client.
Below screenshots shows the inputs given to generate access token.
Step 7: Create a controller that performs mapping to the /mycontroller/test/** path.
The request comes to web services controller and is passed to facades and then to service layer to perform business logic.Once the data object is retrieved from the commerce facades, it is converted to predefined DTOs
Step 8: Create custom DTO bean class in extension-bean.xml
The OOTB default Datamapper is used in Web Services for mapping of the data between data objects and web services DTO.All the configuration are found in dto-mappings-v2-spring.xml file
Step 9: The OOTB fieldMapper is used for mapping one field to another one.
Optimization of response data is achieved by Field Set level mappings and we can request required data by specifying that in URL as fields. We have 3 types of field level mapping
1. BASIC : Returns only basic data like name and id
2. DEFAULT: Returns default set of data mapped.
3. FULL : Returns all the fields mapped
Step 10:DTO are send as response to the call in XML or JSON format with proper HTTP codes.
Below are some of the pros and cons of decoupling the CMS and commerce engine.
Pros
— The calls are stateless so the customer data is no longer preserved between subsequent requests.
— OCC helps to use existing commerce logics instead of implementing the logics themselves.
— As the same services are called, wide Omni-channel integration possibilities are therefore enabled.
— Simplification of the application design
— High scalability and more maintainable
— Internationalization support for ecommerce.
Cons
— Security Risks, because the code will be executed on the client
— Performance Issues because of the rest calls
— Losing the flexibility of managing content life cycle, The CMS system like SAP Commerce /Hybris WCMS with storefront is more suitable for use cases where content plays an important role in the ecommerce landscape.
*Hybris – The Brand Name Hybris is now replaced with SAP Commerce which is a part of C4/Hana Suite offering now