Using Client Context Data in a component

[Former Community Member]

Hi there

1) I was following the AEM6 clinet_context_in_detail documentation and was able to create - http://docs.adobe.com/docs/en/aem/6-0/develop/personalization/client-context.html  and was able to develop the example geoloc component "Example: Creating a Custom Context Store Component" in the aforesaid link

2)  I could edit the client context and place the Location Store as explained in the example

Now, what I want to achieve is to read the data in the client context for the aforesaid store that was created. For that, I was putting following JS code in my component JSP

<script type="text/javascript">

alert('City ; ' + getName());

function getName(){

    var store = CQ_Analytics.ClientContextMgr.getRegisteredStore("locstore");

    if(store){

        return store.getProperty("city", false);

    } else {

        return null;

    }

}

</script>

<!-- once I get the city value, then will put the divs to construct the rendering of the component -->

With this code, I get the store object as null (printed in console.log). However, this works for the OOB store "surferinfo" as I am able to get output for the property as OS or browser etc..

Any clue why the custom store does not work...

Appreciate the help.

[smacdonald2008]

In the reference docs -- it states (see below)

Are you passing a valid session store as an argument to this method?   It looks like there is an issue with locstore. 

getRegisteredStore(name)

Returns a session store of a specified name. See also Accessing a Session Store.

Parameters

• name: String. The name of the session store.

[Former Community Member]

Thanks Scott.

I tried the link you mentioned for accessing a session store. However could not be successful. Let me give some more details :

1. I want to track users' location and based on it render my custom component. The user is an anonymous site visitor.
2. I focused on OOB stores such as profile, surferinfo and geolocation (geolocation was of improtance to me to certain extent) and realized that if these contextstore components are dragged on client context of a page (geometrixx/en.html), the resultant data is stored in browser's "localstorage". Thus for my usecase of geo tracking, I could extract the localstorage object in JSON and parse it further to extract "geolocation" store. These stores (geolocation, surferinfo, profile) are saved against a key "ContextHubPersistence" in browser's localstorage object.

Problem:

1. As my customers might use older browsers as well i.e. IE8/7, AEM's out-of-box "geolocation" store wont work for me as I understand it essentially uses HTML5 geolocation APIs.
2. Thus what I want do is to create a custom store of JSONP type which would use a third party service (such as WIPMANIA or similar 3rd party geo IP) in client context
3. Having said that, I have observed, that although in authoring mode, Client Context interface populates and shows the correct value in Client Context pop up (once I edit Client Context and drag / drop the customstore in it for the geometrixx/en.html), I dont see this custom store shown in either "Cookie, Localstorage, Session Storage or even geometrixx/en,html's HTTP header

I have tried the link you mentioned to access session store data in my custom AEM component's JSP. I have also tried following code (by going through CQ Widget API doc):

var store = CQ_Analytics.StoreRegistry.getStore("locstore");

    if (!store) {
            store=CQ_Analytics.JSONPStore.registerNewInstance("locstore", "http://api.wipmania.com/jsonp?callback=${callback}", {});
    }

console.log("Property - " + store.getProperty("latitude"));

I dont get any print of the property as if there is nothing exist. I also put checks on store.isInitiated() and if not then call store.init() but it always go into the if block for store.isInitialized() because of store creation check mentioned above (if(!store....)

If you can let me know what I am missing. It would be of great help.

Also, is there way I could let client context data written in HTTP header then I can use server side code to read it (instead of JS libs).

Thanks again.

Anand

[smacdonald2008 · Accepted solution]

Here is a good article and sample code on GitHub:

http://blogs.adobe.com/aemtutorials/2013/07/24/customize-the-client-context/

the link to the sample code on Git is at end of the article. I think going through this code will help you.