🎉 Welcome to the Mobify DevCenter, our new home for v2.0 documentation and developer resources! (For now, the site is desktop-only.) Switch to old site
close
Mobify DevCenter
DocumentationAPI & SDK ReferenceHow-To Guides
search_icon_focus

Setting Up the SAP Hybris Connector

Note: SAP Hybris Commerce Cloud projects should use the HybrisConnector.

Before you begin

To ensure your SAP Hybris Connector setup goes smoothly, make sure you have:

  • Administrator-level access to SAP Hybris Backoffice
  • A running instance of SAP Hybris Commerce Suite with version 6.4 or higher
  • Access to the SAP Hybris OCC docs. (You will need an account to access the docs.)

SAP Hybris fundamentals

Before diving in, you should brush up on the SAP Hybris OCC APIs. If you know nothing about the OCC APIs, you should at least know this:

Basic URLs look like this:

https://$DOMAIN/rest/v2/$SITE/$ENDPOINT
https://www.example.com/rest/v2/apparel-uk/catalogs/

OAuth requests look like this:

curl https://hybris.merlinspotions.com/authorizationserver/oauth/token -X POST -d 'client_id=mobile_android&client_secret=secret&grant_type=client_credentials'

Once you have the access token, you can send it.

This is just the start. To learn more, we recommend reviewing the OCC docs. (You will need to login to your SAP account to access the docs.)

Installing the Mobify extensions

To simplify integration, we provide a set of Mobify extensions for SAP Hybris Commerce Suite. Setup for the extensions will differ depending on whether your PWA is tag-loaded or server-side rendered:

For tag-loaded PWAs, you will use the full set of extensions:

  1. Mobify tag extension installs the Mobify tag and service worker to your SAP Hybris Storefront. This extension includes the following SAP Hybris addons:
    • mobifystorefrontaddon
    • mobifyconfigbackoffice
    • mobifyconfig
  2. Mobify Webservice extension modifies the SAP Hybris Webservice to provide additional functionality for your PWA. It enables your PWA’s guest users to change their email address, and also supports storing additional information from users, such as phone numbers. This extension includes the mobifywebservices addon.

Installing the extensions

  1. Download and unzip the Mobify extension to your SAP Hybris file system: /hybris/bin/custom/PROJECT_NAME

  2. In /hybris/bin/custom/PROJECT_NAME, you will find four Mobify extension folders:

    • mobifystorefrontaddon
    • mobifyconfigbackoffice
    • mobifyconfig
    • mobifywebservices
  3. Add the following lines to localextensions.xml:

<!--Mobify Extensions-->
<extension name='mobifystorefrontaddon'/>
<extension name='mobifyconfig'/>
<extension name='mobifyconfigbackoffice'/>
<extension name="oauth2" />
<extension name="addonsupport" />
<extension name="yoccaddon" />
<extension name="mobifywebservices" />
  1. If your project have does not have custom modifications in the master.tag file, use your command line interface to execute the following command from your Hybris platform folder (/hybris/bin/platform):
ant mobifyConfigTarget
This command will copy the contents of the `master.tag` file from `mobifystorefrontaddon` and input them into the `master.tag` file in `/hybris/bin/ext-template/yacceleratorstorefront/web/webroot/WEB-INF/tags/responsive/template/master.tag`
If your project **has custom modifications** in the `master.tag` file, then you will need to remove some xml code and install the Mobify Tag manually, so that you do not overwrite your project's customizations. To do this, remove the following code from the `buildcallbacks.xml` file in your `mobifystorefrontaddon` extension:
<copy file="${ext.mobifystorefrontaddon.path}/acceleratoraddon/web/webroot/WEB-INF/tags/responsive/template/master.tag" todir="${ext.custom-storefront-name.path}/web/webroot/WEB-INF/tags/responsive/template" overwrite="true"/>
After removing the xml code, run `ant all` from your command line interface.
Removing the xml code shown above will prevent your customized `master.tag` from being overwritten. Instead, you will need to manually add the Mobify tag to your `master.tag`, by adding the following code after the `<head>` tag in your custom `master.tag` file:
<%-- mobifyConfig Tag Value from Database starts --%> ${mobifyTagValue} <%-- mobifyConfig Tag Value
from Database Ends --%>
The `master.tag` should look like this:
<!DOCTYPE html>
<html lang="$currentLanguage.isocode}"
<head>
<%-- mobifyConfig Tag Value from Database starts --%> ${mobifyTagValue} <%-- mobifyConfig Tag
Value from Database Ends --%>
<title>
${not empty pageTitle ? pageTitle : not empty cmsPage.title ? cmsPage.title : 'Accelerator
Title'}
</title>
</head>
</html>
  1. Next, run ant clean all in your command line tool.
  2. Start the server for your Hybris instance. For example, we start the server for our Hybris instance by executing the following commands:
    • Unix: ./hybrisserver.sh
    • Windows: hybrisserver.bat
  3. After starting the server, open a browser and navigate to your Hybris Administration Console, then login. (Note that the Hybris Administration Console is a different site than your SAP Backoffice.)
  4. Once you’re logged in, click on Platform on the top menu, and then Update in the dropdown items. On the Update page, select the following options under the General settings heading:
    • Update running system
    • Clear the hMC configuration from the database
    • Localize types

At the bottom of the page, click on update. This will apply the changes to Hybris Backoffice.

Configuring the extensions

  1. After successfully installing the Mobify extensions, within Hybris Backoffice you will be able to see Mobify under the various tools on the left side bar. This is where you can access your new extensions.

  2. Within Backoffice under Mobify on the left side bar, you will see two options:

  • MobifyTagConfiguration: this is used to add or modify the Mobify tag script, which will be visible on all pages.
  • ServiceWorkerConfig: this is used to add or modify the Mobify service worker loader javascript.
  1. To install the Mobify tag, click on MobifyTagConfiguration in the left side panel under Mobify. Next, select the + button to add a new property and enter your Mobify tag.

  2. To configure your service worker, click on ServiceWorkerConfig in the left side panel under Mobify. Next, click on MobifyServiceWorker, which will show additional fields. Under the Essential heading, format the values in the field called Mobify Service Worker Value. Save the changes. This is how it will appear in Backoffice:

Modifying the service worker

  1. After saving the changes, verify the service worker is in place by going to https://domain-name/service-worker-loader.js.

Making your API available to the connector

  1. Login to your SAP Hybris Backoffice.
  2. On the left side navigation panel, choose System, then select OAuth, and choose OAuth Clients.
  3. Click the + button.
  4. In the pop-up box, enter the OAuth client ID and Client Secret.
  5. Click Next, and you’ll skip to the Basic page.
  6. On the Basic page, find Authorities and click the + button.
  7. In the text field that appears, enter ROLE_CLIENT, then Add.
  8. Find Client Grant Types and click the + button.
  9. In the text field that appears, enter three separate entries: client_credentials, refresh_token, and password. Click Add for each.
  10. Click Next, which will skip you to the Scopes page.
  11. On the Scopes page, enter the scope of your oauth client. For example, we would enter “merlinspotions” for our demo.
  12. Click Done.

Configuring your SAP Hybris instance

When your project gets generated, you get a starting point SAP Hybris connector, which you will be replacing.

To configure and instantiate your instance of the SAP Hybris connector:

  1. Go to the file packages/connector/index.js and import the SAP Hybris Connector.
  2. Extend the connector class and make any customizations you’d like. For a list of all the utility functions we’ve already built, read our HybrisConnector Reference docs.
  3. Modify the getConnector method to return a new instance of your extended connector.