Q: What are the steps to be followed to test drive the customize client context tutorial correctly after downloading the git source code?

[vganesh43016]

Hello, 

I am new to AEM and I am testing the tutorial http://blogs.adobe.com/aemtutorials/2013/07/24/customize-the-client-context/ on my laptop. 

I have downloaded the code from 'https://github.com/Breiz41/customstore.git' and did 'mvn install' and created a zip file in the target directory. Then I uploaded the zip file 'customstore-1.0-SNAPSHOT.zip ' from the URL http://localhost:4502/crx/packmgr/index.jsp into the jcr at location /apps/customstore.

Are these the correct steps to be followed to test drive this tutorial? 

Now I am testing the geometrixx-outdoors application at the URL http://localhost:4502/cf#/content/geometrixx-outdoors/en/men/coats/edmonton-winter.html and I have opened the Client context dialog from the sidekick toolbar icon. I can verify ctrl + alt + c, also opens the client context window. 

I have set a break point using Chrome on the client side customstore.js file and in json.jsp on the server side, using eclipse IDE. 

I can verify the local variable url has a value of "/apps/customstore/components/loader.json?authorizableId=aparker%40geometrixx.info" just before the customstore.js line 12 , code shown below is executed on the client side.

 var object = CQ.shared.HTTP.eval(url);
 
When the above line of client code is executed, I can verify on the server side json.jsp: line 34 is getting executed and the profile local variable is a valid object, as shown below.
 
 profile    CqProfile  (id=12612)    
     authorizable    CQUserImpl  (id=12893)    
         adaptersCache    null    
         authorizable    UserImpl  (id=12907)    
         homePath    null    
         id    "aparker@geometrixx.info" (id=12909)    
 ...
 
 After the json object 'w' is written back to the response on the server side, on the client side, the value of the object is null, as shown below.
 
 authorizableId: "aparker@geometrixx.info"
 object: null
 this: CQ_Analytics.JSONStore
 
 As per this article, I guess the 'object' local variable on the client side must have the data set by json.jsp on the server side. That did not happen. 

From Chrome in the resources tab, Local storage 'http://localhost:4502' has this key and value. 

key: ClientSidePersistence

value:ClientContext/CLIENTCONTEXT:=visitorId%3Daparker%40geometrixx.info|ClientContext/PROFILEDATA:=avatar%3D%2Fhome%2Fusers%2Fgeometrixx%2Faparker%40geometrixx.info%2Fprofile%2Fphotos%2Fprimary%2Fimage.prof.thumbnail.80.png%2CauthorizableId%3Daparker%40geometrixx.info%2Cpath%3D%2Fhome%2Fusers%2Fgeometrixx%2Faparker%40geometrixx.info%2Fprofile%2CformattedName%3DAlison%20Parker%2Cgender%3Dfemale%2CpostalCode%3D95125%2CgivenName%3DAlison%2Cemail%3Daparker%40geometrixx.info%2CaboutMe%3Daparker%20is%20an%20example%20surfer%20account%20having%20an%20email%20address%20as%20userid%2CstreetAddress%3D4501%20El%20Rio%20Drive%2Cfriends%3Djdoe%40geometrixx.info%2CfamilyName%3DParker%2Cfollowers%3Dcharles.s.johnson%40trashymail.com%2Ccity%3DSan%20Jose%2Cregion%3DCA%2CmemberSince%3D8%20Sep%202010%209%3A13%20AM%2Cbirthday%3D26%20Feb%201992%2Cage%3D20|ClientContext/CAMPAIGN:=name%3DArticle%20Campaign%2Cpath%3D%2Fcontent%2Fcampaigns%2Fgeometrixx-outdoors%2Farticle%2Cid%3Dcontent-campaigns-geometrixx-outdoors-article%2Crecipe%2Fname%3DSummer%20Female%20Under%2030%2Crecipe%2Fpath%3D%2Fcontent%2Fcampaigns%2Fgeometrixx-outdoors%2Farticle%2Fsummer-female-under30%2Crecipe%2Fid%3Dcontent-campaigns-geometrixx-outdoors-article-summer-female-under30|ClientContext/GEOLOCATION:=longitude%3D-82.9980989%2Clatitude%3D39.9745978%2Caddress%2Fregion%3DOH%2Caddress%2FcountryCode%3DUS%2Caddress%2Fcountry%3DUnited%20States|UndoHistory/path:=path%5B%2Fcontent%2Fmybiz%2Fen%2Fdemo%3A%257B%2522a%2522%253A-1%252C%2522s%2522%253A0%252C%2522pv%2522%253A1385267825895%252C%2522pe%2522%253Afalse%252C%2522bp%2522%253A%255B%255D%257D%5Dpath%5B%2Fcontent%2Fgeometrixx-outdoors%2Fen%2Fmen%2Fcoats%2Fedmonton-winter%3A%257B%2522a%2522%253A-1%252C%2522s%2522%253A0%252C%2522pv%2522%253A1385306203835%252C%2522pe%2522%253Afalse%252C%2522bp%2522%253A%255B%255D%257D%5D|ClientContext/VIEWEDPRODUCTS:=%2Fcontent%2Fgeometrixx-outdoors%2Fen%2Fmen%2Fcoats%2Fedmonton-winter.html%238376%2CEdmonton%20Winter%2C%2Fcontent%2Fgeometrixx-outdoors%2Fen%2Fmen%2Fcoats%2Fedmonton-winter%2F_jcr_content%2Fpar%2Fproduct%2Fimage%2C%24160.00

Any ideas what I need to do to get it working and the information is correctly transferred from server to client? What are the steps to be followed after downloading the code from the git URL? I am new to AEM and I might have missed out on the correct steps to be followed to get this example working. 

fyi: Step 4 in this tutorial is not working correctly in my instance and I don't know why. 

Thanks and regards, 
Ganesh 

[Samuel_Blin · Accepted solution]

Hi Ganesh,

What you did is correct. The only thing you forgot is to add the Context Store Component in the Client Context. Open the Client Context in the Geomatrixx site as you did before and click on the edit button to edit the Client Context:

[img]CC.jpg[/img]

Add the component "customcontextstore" and refresh you Geometrixx page. The data are now loaded.

[img]cc2.jpg[/img]

Then follow the last step of the tutorial to create a segment based on the value of the context store.

Samuel

[Sham_HC]

I have requested author of blog to respond. Also you can request additional information in that same blog post. 

Meantime do you see any error in the console?

[vganesh43016]

Thanks Sham for forwarding it. I am not able to add comments on that blog post. I did not see any errors in the console.