List lens to display products list

[krisgumm]

Hi ,

 I'm trying to customize cq/search/lenses/list component to display products list instead of dam assets.  . Following the same approach as implemented for geometrixx  assetviewer. I'm using list lens along with the querybuilder component . So i have configured querybuilder component to look up at etc/commerce/products and the component correctly returns json representing the product structure . From firebug console , I'm pasting the Url which gets executed by the querybuildercomponent  .

http://localhost:4502/bin/querybuilder.json?_charset_=utf-8&_dc=1383630601722&jcr%3Atitle=&p.limit=2...

 Now i'm trying to customize  list.jsp from  /apps/cq/search/components/lenses/list . It uses xtype 'dataViewLens' which extends from 'lens' . So i assumed that in  "items" i can iterate through the json records and print them . Since the superType 'lens' class has default json renderer declared  and which  do not mention all the fields that i would like to print,   i overridded the renderer to declare all my required fields . However it seems the iteration is happening incorrectly and am not able to access the fields returned from json . I'm very beginner with extjs .  (Nested image object inside is considered as separate object and new row is getting created )   . Can  i get any pointers on how to customize this list lens component to print out product details  ? 

My version of  list.jsp

--------------------------------------------

List Lens component --%><%@ page import="java.util.Calendar" %> <% %><%@include file="/libs/foundation/global.jsp"%><% Long time = Calendar.getInstance().getTimeInMillis(); String name = properties.get("name", "List"); String dateFormat = properties.get("dateFormat", "d-M-Y H:i"); String textCreated = properties.get("textCreated", "Created:"); String textModified = properties.get("textModified", "Modified:"); %> <div id="lens-list-button-wrapper-<%= time %>" class="lens-button-wrapper"></div><!-- --><script type="text/javascript"> CQ.Ext.onLoad(function() { var config = { "xtype": "dataviewlens", "text": "<%= xssAPI.encodeForJSString(name) %>", "renderButtonTo": "lens-list-button-wrapper-<%= time %>", "overflow": "visible", "items": { "cls": "lens-dataview list", "tpl": '<table><tbody>' + '<tr><td class="padding-cell top"><div /></td></tr>' + '<tpl for=".">' + '<tr><td class="padding-cell"></td><td colspan="4" class="line"></td><td class="padding-cell"></td></tr>' + '<tr class="item" ' + ' ondblclick="CQ.search.Util.resultDblClick(event, \'{[CQ.shared.XSS.getXSSValue(values.id)]}\',\'{[CQ.shared.XSS.getXSSValue(values.path)]}\');"' + ' qtip="{[CQ.shared.XSS.getXSSValue(values.shortPath)]}<br/>' + '{[CQ.shared.XSS.getXSSValue(values.name)]}"' + '>' + '<td class="padding-cell"><div /></td>' + '<td class="thumbnail-cell"><div style="background-image:url(\'{[CQ.HTTP.externalize(values.path,true)]}.thumb.48.48{[values.ck ? "." + values.ck : ""]}.png\');" /></td>' + '<td class="title-cell"><div><span class="title">{[CQ.shared.XSS.getXSSValue(values.price)]}</span>{[CQ.shared.XSS.getXSSValue(values.identifier)]}</div></td>' + '<td class="title-cell"><div><span class="title">{[CQ.shared.XSS.getXSSValue(values.id)]}</span>{[CQ.shared.XSS.getXSSValue(values.title != values.name ? values.title : "")]}</div></td>' + '<td class="format-cell"><div></div></td>' + '<td class="last"><div>' + '{[values.imageDimensions ? values.imageDimensions : ""]}' + '<br/>' + // if available show mod date, otherwise creation date '{[values.modificationDate ? ' + '"<%= xssAPI.encodeForJSString(xssAPI.encodeForHTML(textModified)) %> " + values.modificationDate.format("<%= xssAPI.encodeForJSString(dateFormat) %>") + "<br/>"' + ':' + 'values.creationDate ? ' + '"<%= xssAPI.encodeForJSString(xssAPI.encodeForHTML(textCreated)) %> " + values.creationDate.format("<%= xssAPI.encodeForJSString(dateFormat) %>") + "<br/>"' + ':' + '""]}' + '</div></td>' + '<td class="padding-cell"><div /></td>' + '</tr>' + '</tpl>' + '<tr><td class="padding-cell bottom"><div /></td></tr>' + '</tbody></table>', "itemSelector": ".item" }, "reader": new CQ.Ext.data.JsonReader({ "totalProperty": "results", "root": "hits", "fields": [ "price", "path","title", "identifier" ], "id": "path" }), "baseParams": { }, "listeners": { "afterlayout": function() { var el = this.body || this.el; if(el){ el.setOverflow("visible"); } } } }; var lens = CQ.Util.build(config); CQ.search.Util.addLens(lens, "list"); }); </script>

Thanks in advance

.

[smacdonald2008 · Accepted solution]

If you are not comfortable with extjs -- you can use other JS frameworks and plugins with CQ. That is one of the nice aspects of CQ -- it's flexible. 

For example -- see this community article that talks about using QueryBuilder API and then writing the results to a JQuery Grid:

http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-aem-applications-that-use.html

However -- instead of using a Grid -- you can use a JQuerry List plugin:

http://jqueryui.com/sortable/

[krisgumm]

Hi ,

   We have a use case which is very closely related in terms of functionality to ''Geometric asset viewer' . The only difference I saw was to display products instead of dam assets . So I was going in the approach to use the existing ones and change only the display logic minorly to render the products (also to improve my knowledge on extjs).  Thanks for your pointers on changing the script framework . .Switching to jquery probably may take more modifications but  have some handy knowledge on it . 

 However  with using  extjs the point where I'm struck is that , I'm not able to retrieve all the attributes from my json response . I'm able to fetch attributes  'id' and 'path' but not 'resourceType','Identifier','jcr:description' which are present in my json response .I also tried to override ' preparedata ' method  but still not able to retrieve all attributes . I'm definitely missing something  here but couldn't figure it out  yet . Anything that that you guys might see  missing ? 

Thanks in advance