Skip to content

Commit 9c8080b

Browse files
rahulcsrahulcs
committed
Merge pull request #17 from albingeorge/view_types
Implemented view types
2 parents eab9b18 + fbdc729 commit 9c8080b

File tree

3 files changed

+180
-17
lines changed

3 files changed

+180
-17
lines changed

‎README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,81 @@ Consider a normal search page with basic layout as shown in the figure below and
213213
]
214214
}
215215
```
216+
It can also contain multiple templates to include different view types(grid view/list view) like below:
217+
218+
```
219+
,searchResultSetTemp:
220+
{
221+
"grid":
222+
['{{#products}}<li class="grid_view"><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
223+
,'<div class="result-image-container">'
224+
,'<span class="result-image-horizontal-holder">'
225+
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
226+
,'</span>'
227+
,'</div>'
228+
,'<div class="result-brand">{{{brand}}}</div>'
229+
,'<div class="result-title">{{{title}}}</div>'
230+
,'<div class="result-price">'
231+
,'${{price}}'
232+
,'</div>'
233+
,'</a></li>{{/products}}'].join(''),
234+
"list":
235+
['{{#products}}<li class="list_view"><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
236+
,'<div class="result-image-container">'
237+
,'<span class="result-image-horizontal-holder">'
238+
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
239+
,'</span>'
240+
,'</div>'
241+
,'<div class="result-brand">{{{brand}}}</div>'
242+
,'<div class="result-title">{{{title}}}</div>'
243+
,'<div class="result-price">'
244+
,'${{price}}'
245+
,'</div>'
246+
,'</a></li>{{/products}}'].join('')
247+
}
248+
```
249+
250+
In this case, we need to also mention the different view types under 'viewTypes':
251+
252+
```
253+
,viewTypes: ['grid', 'list']
254+
```
255+
256+
- **viewTypeContainerSelector** : The selector for the container of view types
257+
258+
```
259+
,viewTypeContainerSelector: '.view_type_select'
260+
```
261+
262+
- **viewTypeContainerTemp** : The template which paints the view type to the view type container selector
263+
264+
```
265+
,viewTypeContainerTemp:
266+
'{{#options}}'
267+
+'<li class="nxt-{{#if selected}}current{{/if}}">'
268+
+'<a title="{{value}} View" class="nxt-{{value}}view-button" {{#unless selected}}unbxdviewtype="{{value}}"{{/unless}}>'
269+
+'<span class="icon-{{value}}view">'
270+
+'</span>'
271+
+'</a>'
272+
+'</li>'
273+
+'{{/options}}'
274+
```
275+
276+
JSON used for this template:
277+
278+
```
279+
{
280+
0: {
281+
"selected": true,
282+
"value": "grid"
283+
},
284+
1: {
285+
"selected": false,
286+
"value": "list"
287+
}
288+
}
289+
```
290+
216291
- **searchResultContainer** : The jQuery selector of DOM element to append the HTML generated from **searchResultSetTemp** (*#results_container* in the first image).
217292
- **isClickNScroll** : Set it to **true** if you want users to click an element to fetch the next page.
218293
- **clickNScrollSelector** : The jQuery selector of the DOM element that can be clicked for displaying the next page.(PS. in this case the new results will be appended to the **searchResultContainer**.)

‎demo/index.html‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ <h3 class="result-title-count" id="search_title">
4141
</div>
4242
<div class="result-sort-options">
4343
</div>
44+
<div class="change-view"></div>
4445
<div class="result-pagination">
4546
</div>
4647
<div class="result-selected-facets clearfix" id="selected_facets">
@@ -76,24 +77,39 @@ <h3 class="result-title-count" id="search_title">
7677
,searchQueryDisplayTemp : 'Showing results for {{query}} - {{start}}-{{end}} of {{numberOfProducts}} Results'
7778
,pageSize : 24
7879
,noEncoding: true
79-
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
80-
,'<div class="result-image-container">'
81-
,'<span class="result-image-horizontal-holder">'
82-
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
83-
,'</span>'
84-
,'</div>'
85-
,'<div class="result-brand">{{{brand}}}</div>'
86-
,'<div class="result-title">{{{title}}}</div>'
87-
,'<div class="result-price">'
88-
,'${{price}}'
89-
,'</div>'
90-
,'</a></li>{{/products}}'].join('')
80+
,searchResultSetTemp : {"grid" : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
81+
,'<div class="result-image-container">'
82+
,'<span class="result-image-horizontal-holder">'
83+
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
84+
,'</span>'
85+
,'</div>'
86+
,'<div class="result-brand">{{{brand}}}</div>'
87+
,'<div class="result-title">{{{title}}}</div>'
88+
,'<div class="result-price">'
89+
,'${{price}}'
90+
,'</div>'
91+
,'</a></li>{{/products}}'].join(''),
92+
93+
"list": ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
94+
,'<div class="result-image-container">'
95+
,'<span class="result-image-horizontal-holder">'
96+
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
97+
,'</span>'
98+
,'</div>'
99+
,'<div class="result-brand">{{{brand}}}</div>'
100+
,'<div class="result-title">{{{title}}}</div>'
101+
,'<div class="result-price">'
102+
,'${{price}}'
103+
,'</div>'
104+
,'</a></li>{{/products}}'].join('')}
91105
,searchResultContainer : '#results_container'
92106
,isClickNScroll: false
93107
,clickNScrollSelector : ''
94108
,isAutoScroll : false
95-
,isPagination: true
96-
,paginationContainerSelector: '.result-pagination'
109+
,isPagination: true
110+
,paginationContainerSelector: '.result-pagination'
111+
,viewTypes: ['grid', 'list']
112+
,viewTypeContainerSelector: '.change-view'
97113
,facetTemp : ['<div class="facet-block">'
98114
,'<div class="facet-title">PRICE</div>'
99115
,'<div class="facet-values">'
@@ -220,7 +236,7 @@ <h3 class="result-title-count" id="search_title">
220236
,onPageLoad : function(){
221237
console.log('onPageLoad', arguments, this);
222238
}
223-
,deferInitRender: ['search']
239+
,deferInitRender: []
224240
,bannerSelector: '.banner'
225241
,sortContainerSelector: '.result-sort-options'
226242
,pageSizeContainerSelector: '.result-page-size-options'

‎unbxdSearch.js‎

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -465,7 +465,17 @@ var unbxdSearchInit = function(jQuery, Handlebars){
465465
'{{/if}}',
466466
'{{/options}}',
467467
'</select>'
468-
].join('')
468+
].join(''),
469+
viewTypeContainerTemp:
470+
'{{#options}}'
471+
+'<li class="unbxd-{{#if selected}}current{{/if}}">'
472+
+'<a title="{{value}} View" class="unbxd-{{value}}view-button" {{#unless selected}}unbxdviewtype="{{value}}"{{/unless}}>'
473+
+'<span class="icon-{{value}}view">'
474+
+'{{value}}{{#if selected}}-current{{/if}}'
475+
+'</span>'
476+
+'</a>'
477+
+'</li>'
478+
+'{{/options}}'
469479
};
470480

471481
jQuery.extend(Unbxd.setSearch.prototype,{
@@ -605,6 +615,16 @@ var unbxdSearchInit = function(jQuery, Handlebars){
605615
,setEvents : function(){
606616
var self = this;
607617

618+
var changeViewType = function(e) {
619+
e.preventDefault();
620+
var $t = jQuery(this);
621+
var selected = $t.attr("unbxdviewtype");
622+
self.setViewType(selected);
623+
if(selected && self.options.viewTypes.indexOf(selected) > -1) {
624+
self.callResults(self.paintResultSet, true);
625+
}
626+
};
627+
608628
var changeSort = function(e){
609629
e.preventDefault();
610630
var $t = jQuery(this),
@@ -901,6 +921,10 @@ var unbxdSearchInit = function(jQuery, Handlebars){
901921
}
902922
}, 3000);
903923
}
924+
925+
if (this.options.searchResultSetTemp !== null && typeof this.options.searchResultSetTemp === 'object') {
926+
jQuery(this.options.viewTypeContainerSelector).on("click", '[unbxdviewtype]',changeViewType);
927+
}
904928
}
905929
,addSort : function(field, dir){
906930
this.params.sort[field] = dir || "desc";
@@ -980,6 +1004,15 @@ var unbxdSearchInit = function(jQuery, Handlebars){
9801004
,getPageSize : function(){
9811005
return this.params.extra.rows;
9821006
}
1007+
1008+
,setViewType: function(viewType) {
1009+
this.params.extra.view = viewType;
1010+
return this;
1011+
}
1012+
,getViewType: function() {
1013+
return this.params.extra.view;
1014+
}
1015+
9831016
,addQueryParam : function(key, value, dontOverried){
9841017
if(!(key in this.params.extra) || !dontOverried){
9851018
this.params.extra[key] = value;
@@ -1086,7 +1119,7 @@ var unbxdSearchInit = function(jQuery, Handlebars){
10861119
}
10871120
} else if(key === 'wt' || key === 'format') {
10881121
nonhistoryPath += '&' + key + '=' + encodeURIComponent(value);
1089-
} else if(this.isUsingPagination() && key === 'rows'){
1122+
} else if((this.isUsingPagination() && key === 'rows') || key === "view"){
10901123
url += '&' + key + '=' + encodeURIComponent(value);
10911124
} else if(this.defaultParams.hasOwnProperty('extra') && this.defaultParams.extra.hasOwnProperty(key)){
10921125
nonhistoryPath += '&' + key + '=' + encodeURIComponent(value);
@@ -1182,6 +1215,7 @@ var unbxdSearchInit = function(jQuery, Handlebars){
11821215
format : "json"
11831216
,page : 1
11841217
,rows : 12
1218+
,view : ( this.options.viewTypes !== undefined && this.options.viewTypes.length > 0 ? this.options.viewTypes[0] : "")
11851219
}
11861220
};
11871221

@@ -1275,6 +1309,12 @@ var unbxdSearchInit = function(jQuery, Handlebars){
12751309
if("start" in obj)
12761310
params.extra.page = (parseInt(obj.start) / parseInt(params.extra.rows)) + 1;
12771311

1312+
if(!("view" in obj)) {
1313+
params.extra.view = ( this.options.viewTypes !== undefined && this.options.viewTypes.length > 0 ? this.options.viewTypes[0] : "");
1314+
} else {
1315+
params.extra.view = obj["view"];
1316+
}
1317+
12781318
return params;
12791319
}
12801320
,paintResultSet: function(obj){
@@ -1384,6 +1424,16 @@ var unbxdSearchInit = function(jQuery, Handlebars){
13841424

13851425
if(this.getClass(this.options.searchResultSetTemp) == 'Function'){
13861426
this.options.searchResultSetTemp.call(this,obj);
1427+
} else if (this.options.searchResultSetTemp !== null && typeof this.options.searchResultSetTemp === 'object') {
1428+
this.paintViewTypes(obj);
1429+
var currentViewType = this.getViewType();
1430+
if (!this.compiledResultTemp) {
1431+
this.compiledResultTemp = {};
1432+
this.options.viewTypes.forEach(function(val) {
1433+
this.compiledResultTemp[val] = Handlebars.compile(this.options.searchResultSetTemp[val]);
1434+
}.bind(this));
1435+
}
1436+
jQuery(this.options.searchResultContainer).html(this.compiledResultTemp[currentViewType](obj.response));
13871437
}else{
13881438
if(!this.compiledResultTemp)
13891439
this.compiledResultTemp = Handlebars.compile(this.options.searchResultSetTemp);
@@ -1452,6 +1502,28 @@ var unbxdSearchInit = function(jQuery, Handlebars){
14521502
options: pageSizeOptions
14531503
}));
14541504
}
1505+
1506+
,paintViewTypes: function(obj) {
1507+
if ("error" in obj || this.options.viewTypeContainerSelector.length <= 0) {
1508+
return;
1509+
}
1510+
if (!this.compiledViewTypesContainerTemp) {
1511+
this.compiledViewTypesContainerTemp = Handlebars.compile(this.options.viewTypeContainerTemp);
1512+
}
1513+
var viewTypeOptions = this.options.viewTypes.map(function(opt) {
1514+
1515+
var values = {};
1516+
values["value"] = opt;
1517+
values["selected"] = this.getViewType() == opt ? true : false;
1518+
return values;
1519+
1520+
}.bind(this));
1521+
jQuery(this.options.viewTypeContainerSelector).html(this.compiledViewTypesContainerTemp({
1522+
options: viewTypeOptions
1523+
}));
1524+
return this.getViewType();
1525+
}
1526+
14551527
,paintPagination: function(obj) {
14561528
if("error" in obj)
14571529
return;

0 commit comments

Comments
 (0)