Was this article helpful?

Gigya Module for Oracle ATG

Last modified 09:18, 31 Mar 2014

oracle

http://www.oracle.com/us/products/applications/atg/atg-web-commerce-overview-349812.html

Note: we are currently developing an upgrade to our Gigya Oracle ATG module. Please contact your Implementation Manager for more information.

 
The module handles the integration with the core Oracle ATG engine. Visual aspects, including JSP, site navigation, and method of implementation are dependent on customer implementation of the website; however, this document offers a guideline and best practices recommended to deliver the best results.

 

Installing the Gigya-OE Module

  1. Download the Gigya-OE ATG module and place the files in your Gigya-OE folder.

  2. Create an account in Gigya's website.

  3. Configure your site details in the Site settings section of the Gigya website. The Gigya Setup page provides detailed instructions and steps for setting up your site, as well as specific directions for setting up applications in Facebook, Twitter, Yahoo, LinkedIn, Google/Orkut and Microsoft. Administrators can either setup applications on the social networks or have Gigya provide these applications for your site. 

  4. Copy the Gigya API Key and the Secret Key from Gigya's Dashboard page:

    SiteSetup_Keys.png

 

Prerequisites

The following prerequisites must be met to enable a successful integration.

  1. The ATG application must be dependent on the OE.Gigya module. The component is available as an ATG module in the name space OE.Gigya.

  2. The client/customer should register their website by signing on in the Gigya website and obtaining the API key and Secret key for their application.

  3. The keys must be further set in the ATG component /atg/userprofiling/gigya/GigyaService.

  4. Copy OE.Gigya/src/webapp.war/gigyaLoginHandler.jsp into the webapp. In this JSP, modify theloginErrorURL, loginSuccessURL and registerURL to point to your application pages.

  5. Copy OE.Gigya/src/webapp.war/js folder into your webapp where it can be accessed. This JavaScript file has default calls to Gigya plugin - Share, Reactions and the information that is shared through Share and Reactions plugins are also published as feeds that can be seen later through Gigya's Activity Feed plugin.

 

Module Installation and Build Instructions

  1. Download or checkout the oe_atg_gigya_plugin.

  2. Browse to the directory by using the command "cd oe_atg_gigya_plugin" or browse to the workspace directory.

  3. Run the command “ant” in this directory.

  4. ATG Gigya module is ready to use.

 

Social Login Integration

The integration caters to the social login use case as depicted in the Gigya documentation, which can be found here. After a successful executed social login, the response from Gigya is available in a session scoped component /atg/userprofiling/gigya/LoginResponse, that can also be accessed later from other parts of the application.

Steps to Integration

The below points document the steps to be followed to integrate this use case:

  1. Modify/extend your Login Form Handler and Registration Form Handler to use the class com.objectedge.integrations.gigya.impl.GigyaProfileFormHandler.

  2. Make sure the component /atg/userprofiling/gigya/LoginHandler is configured as needed. Please revisit the settings of the properties loginFormHandler, registrationFormHandler, dateOfBirthFormat, populateBillingAddress,populateHomeAddress and populateShippingAddress.

  3. On the login page, include the following at the beginning of the page:

    <dsp:importbean bean="/atg/userprofiling/gigya/GigyaService"/>
    <script type="text/javascript" lang="javascript"
    src="http://cdn.gigya.com/JS/gigya.js?apikey=<dsp:valueof
    bean="GigyaService.apiKey"/>">
    </script>
    <script type="text/javascript">
    var conf = { APIKey: '<dsp:valueof bean="GigyaService.apiKey"/>'};
    </script>
  4. Add the Gigya's login UI plugin in the login section where you accept Login name and password e.g:

    <div><b>Login with your social network</b></div>
    <div id="loginDiv"></div>
    <script type="text/javascript">
    gigya.socialize.showLoginUI(conf, {containerID: "loginDiv",
    cid:'', width:220, height:60,
    redirectURL: "/gigya/en/user/gigyaLoginHandler.jsp",
    pendingRegistration: true,
    showTermsLink:false, hideGigyaLink:true
    });
    </script>
     

    Note: Please note, the redirectURL has to point to gigyaLoginHandler.jsp, which has been copied into webapp, as described in section "Prerequisites".

  5. In your registration page, add a UI section for linking accounts, accepting the user name and password. The Profile form handler's method for linking accounts is handleLinkProfileToGigyaAccount() e.g. the submit button to link accounts would look like:

    <dsp:input bean="ProfileFormHandler.linkProfileToGigyaAccount"
    type="submit" value="Link Accounts"/>

     

Share Integration

The integration steps explain the steps to integrate share. The use case details can be found here.

gigya-oe_share.gif

 

Steps to Integration

The below points document the steps to be followed to integrate this use case:

  1. Include the following at the beginning of the page:

    <dsp:importbean bean="/atg/userprofiling/gigya/GigyaService"/>
    <script type="text/javascript" lang="javascript"
    src="http://cdn.gigya.com/JS/gigya.js?apikey=<dsp:valueofbean="GigyaService.apiKey"/>">
    </script>
    <script type="text/javascript">
    var conf = { APIKey: '<dsp:valueof bean="GigyaService.apiKey"/>'};
    </script>
    <script type="text/javascript" src="/js/gigya.js"></script>
  2. Compute the information to share, for example, if a product information is to be shared, then the code snippet to call the Gigya's share plugin with the default UI settings would look like:

    <input type="button" id="btnShare" value="Share with your friends..."
    onclick="javascript:showShareUI(
    '<dsp:valueof param="Product.displayName"/>',
    '<dsp:valueof param="Product.longDescription"/>',
    '<dsp:valueof bean="/OriginatingRequest.requestURIWithQueryString"/>',
    '<dsp:valueof param="Product.smallImage.url"/>');" />

    Note: The onclick value has to be in one single line.

      

Reactions Integration

The integration steps explain the steps to integrate reactions plugin. The use case details can be found here.
The following is a screen shot illustration of the reaction plugin with retail domain in context:

gigya-oe_reactions.gif

 

Steps to Integration

The below points document the steps to be followed to integrate this use case:

  1. Include the following at the beginning of the page:

    <dsp:importbean bean="/atg/userprofiling/gigya/GigyaService"/>
    <script type="text/javascript" lang="javascript"
    src="http://cdn.gigya.com/JS/gigya.js?apikey=<dsp:valueof
    bean="GigyaService.apiKey"/>">
    </script>
    <script type="text/javascript">
    var conf = { APIKey: '<dsp:valueof bean="GigyaService.apiKey"/>'};
    </script>
    <script type="text/javascript" src="/js/gigya.js"></script>
  2. Compute the information to share, for example, if a product information is to be shared, then the code snippet to call the Gigya's Reactions plugin with the default UI settings would look like:

    <div id="textReactionsDiv"></div>
    <script type="text/javascript">
    var defaultUserAction={
    userMessage: '',
    linkBack:'<dsp:valueof bean="/OriginatingRequest.requestURIWithQueryString"/>',
    title:'This is about <dsp:valueof param="Product.displayName"/>'
    };
    showReactionsBarUI(defaultUserAction);
    </script>

     

Activity Feed Integration

The integration steps explain the key steps to integrate the activity feed plugin. The use case details can be found here.

gigya-oe_activityfeed.gif

 

Steps to Integration

The below points document the steps to be followed to integrate this use case:

  1. Include the following at the beginning of the page:

    <dsp:importbean bean="/atg/userprofiling/gigya/GigyaService"/>
    <script type="text/javascript" lang="javascript"
    src="http://cdn.gigya.com/JS/gigya.js?apikey=<dsp:valueof
    bean="GigyaService.apiKey"/>">
    </script>
    <script type="text/javascript">
    var conf = { APIKey: '<dsp:valueof bean="GigyaService.apiKey"/>'};
    </script>
  2. Add the following code snippet to show the Activity feed:

    <div id="ActivityFeed"></div>
     <script type="text/javascript">
     gigya.socialize.showFeedUI(conf, {containerID: 'ActivityFeed'});
     </script>
Was this article helpful?
Page statistics
4911 view(s) and 10 edit(s)
Social share
Share this page?

Tags

This page has no custom tags set.

Comments

You must to post a comment.

Attachments