Skip to content

Commit eab9b18

Browse files
rahulcsrahulcs
committed
Merge pull request #14 from unbxd/update_readme
Update readme
2 parents 6137d5e + d32d34f commit eab9b18

File tree

2 files changed

+179
-24
lines changed

2 files changed

+179
-24
lines changed

‎README.md‎

Lines changed: 177 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,6 @@ Consider a normal search page with basic layout as shown in the figure below and
1717
![Basic search layout](https://raw.githubusercontent.com/unbxd/js-sdk/master/images/search_layout.png "Basic search layout")
1818

1919
```javascript
20-
Handlebars.registerHelper('getIndex', function(index){
21-
var total = $('#results_container li').length;
22-
return total + index + 1;
23-
});
24-
2520
window.searchobj = new Unbxd.setSearch({
2621
siteName : 'demo-u1393483043451'
2722
,APIKey : 'ae30782589df23780a9d98502388555f'
@@ -32,9 +27,9 @@ Consider a normal search page with basic layout as shown in the figure below and
3227
,spellCheck : '#did_you_mean'
3328
,spellCheckTemp : 'Did you mean : {{suggestion}} ?'
3429
,searchQueryDisplay : '#search_title'
35-
,searchQueryDisplayTemp : 'Search results for {{query}} - {{numberOfProducts}}'
30+
,searchQueryDisplayTemp : 'Showing results for {{query}} - {{start}}-{{end}} of {{numberOfProducts}} Results'
3631
,pageSize : 12
37-
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{getIndex @index}}" unbxdAttr="product">'
32+
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
3833
,'<div class="result-image-container">'
3934
,'<span class="result-image-horizontal-holder">'
4035
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
@@ -161,13 +156,15 @@ Consider a normal search page with basic layout as shown in the figure below and
161156
```javascript
162157
...
163158
,searchQueryDisplay : '#search_title'
164-
,searchQueryDisplayTemp : 'Search results for {{query}} - {{numberOfProducts}}'
159+
,searchQueryDisplayTemp : 'Search results for {{query}} - Showing {{start}}-{{end}} of {{numberOfProducts}} Results'
165160
...
166161

167162
//JSON used for this template
168163
{
169164
query : "something"
170165
,numberOfProducts : 1234
166+
,start: 1
167+
,end: 24
171168
}
172169
```
173170
- **pageSize** : The total number of results to be displayed in a single call. The value should be greater than ZERO. *It is suggested that the value to be multiple of number of columns (ex. if 3 columns then 15 or 18 or 21).*
@@ -183,7 +180,7 @@ Consider a normal search page with basic layout as shown in the figure below and
183180

184181
//configuration
185182
...
186-
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{getIndex @index}}" unbxdAttr="product">'
183+
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
187184
,'<div class="result-image-container">'
188185
,'<span class="result-image-horizontal-holder">'
189186
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
@@ -454,25 +451,187 @@ Consider a normal search page with basic layout as shown in the figure below and
454451
}
455452
```
456453
- **setDefaultFilters** : This option is a function which can be used to set default filters and/or sorts. An example implementation is below.
457-
```javascript
454+
```javascript
458455
...
459456
,setDefaultFilters : function(){
460457
//to make the results by default sorted by quantity
461458
this.addQueryParam('sort',"quantity desc");
462459
}
463460
...
464461
```
462+
465463
- **onIntialResultLoad** : This option takes a function which will be executed after rendering of first result page with the search response as its first argument.
466464
- **onPageLoad** : This option takes a function which will be executed after rendering of new result page from second page with the search response as its first argument.
467465
- **onNoResult** : This option takes a function which will be executed if there are no results available.
468466
- **bannerSelector** : The jQuery selector for the container where the banner needs to be displayed.
469-
- **bannerTemp**: The template to be used when rendering the banner.
470-
- **fields** : This is an array of all required fields for generating result template. This is helpful to load the results faster. An example implementation is below.
471-
```javascript
472-
...
473-
,fields : ['image_url','title','brand','price','uniqueId']
474-
...
475-
```
467+
- **bannerTemp** : The template to be used when rendering the banner.
468+
- **isPagination** : Set to _true_ when using pagination, also set **isAutoScroll** to _false_ when this is set to _true_
469+
- **paginationContainerSelector** : The jQuery selector for the container where pagination needs to be displayed.
470+
- **paginationTemp** : The template to be used when rendering pagination
471+
```javascript
472+
//configuration
473+
,paginationTemp: ['{{#if hasFirst}}',
474+
'<span class="unbxd_first" unbxdaction="first"> &laquo; </span>',
475+
'{{/if}}',
476+
'{{#if hasPrev}}',
477+
'<span class="unbxd_prev" unbxdaction="prev"> &lt; </span>',
478+
'{{/if}}',
479+
'{{#pages}}',
480+
'{{#if current}}',
481+
'<span class="unbxd_page highlight"> {{page}} </span>',
482+
'{{else}}',
483+
'<span class="unbxd_page" unbxdaction="{{page}}"> {{page}} </span>',
484+
'{{/if}}',
485+
'{{/pages}}',
486+
'<span class="unbxd_pageof"> of </span>',
487+
'<span class="unbxd_totalPages" unbxdaction="{{totalPages}}">{{totalPages}}</span>',
488+
'{{#if hasNext}}',
489+
'<span class="unbxd_next" unbxdaction="next"> &gt; </span>',
490+
'{{/if}}',
491+
'{{#if hasLast}}',
492+
'<span class="unbxd_last" unbxdaction="last">&raquo;</span>',
493+
'{{/if}}'
494+
].join('')
495+
496+
//JSON used for the above template
497+
{
498+
hasFirst: false,
499+
hasPrev: false,
500+
pages: [{
501+
page: 1,
502+
current: false
503+
},{
504+
page: 2,
505+
current: false
506+
},{
507+
page: 3,
508+
current: true
509+
},{
510+
page: 4,
511+
current: false
512+
},{
513+
page: 5,
514+
current: false
515+
}]
516+
totalPages: 42,
517+
hasNext: true,
518+
hasLast: true
519+
}
520+
```
521+
522+
- **sortContainerSelector** : The jQuery selector for the container where sort template needs to be displayed
523+
- **sortOptions** : An array of objects containing the name, fieldname and order. These options will be used to display the sort options available
524+
- **sortContainerType** : Specifies the type of sort container. The value can be either 'select' or 'click'
525+
- **sortContainerTemp** : The template to be used when rendering the sort options
526+
```javascript
527+
//configuration
528+
...
529+
,sortOptions: [{
530+
name: 'Relevancy'
531+
},{
532+
name: 'Price: H-L',
533+
field: 'price',
534+
order: 'desc'
535+
},{
536+
name: 'Price: L-H',
537+
field: 'price',
538+
order: 'asc'
539+
}]
540+
,sortContainerType: 'select'
541+
,sortContainerTemp: [
542+
'<select>',
543+
'{{#options}}',
544+
'{{#if selected}}',
545+
'<option value="{{field}}-{{order}}" unbxdsortField="{{field}}" unbxdsortValue="{{order}}" selected>{{name}}</option>',
546+
'{{else}}',
547+
'<option value="{{field}}-{{order}}" unbxdsortField="{{field}}" unbxdsortValue="{{order}}">{{name}}</option>',
548+
'{{/if}}',
549+
'{{/options}}',
550+
'</select>'
551+
].join('')
552+
...
553+
554+
//sample JSON for sort
555+
{
556+
options: [{
557+
name: 'Relevancy',
558+
selected: true
559+
},{
560+
name: 'Price: H-L',
561+
field: 'price',
562+
order: 'desc',
563+
selected: false
564+
},{
565+
name: 'Price: L-H',
566+
field: 'price',
567+
order: 'asc',
568+
selected: false
569+
}]
570+
}
571+
```
572+
573+
- **pageSizeContainerSelector** : The jQuery selector for the container where page size template needs to be displayed
574+
- **pageSizeOptions** : An array of objects containing the name and value. These options will be used to display the page size options available
575+
- **pageSizeContainerType** : Specifies the type of page size container. The value can be either 'select' or 'click'
576+
- **pageSizeContainerTemp** : The template to be used when rendering the page size options
577+
```javascript
578+
//configuration
579+
...
580+
,pageSizeOptions: [{
581+
name: '12',
582+
value: '12'
583+
},{
584+
name: '24',
585+
value: '24'
586+
},{
587+
name: '36',
588+
value: '36'
589+
}]
590+
,pageSizeContainerType: 'select'
591+
,pageSizeContainerTemp: [
592+
'<select>',
593+
'{{#options}}',
594+
'{{#if selected}}',
595+
'<option value="{{value}}" selected unbxdpageSize="{{value}}">{{name}}</option>',
596+
'{{else}}',
597+
'<option value="{{value}}" unbxdpageSize="{{value}}">{{name}}</option>',
598+
'{{/if}}',
599+
'{{/options}}',
600+
'</select>'
601+
].join('')
602+
...
603+
604+
//sample JSON for page size
605+
{
606+
options: [{
607+
name: '12',
608+
value: '12',
609+
selected: true
610+
},{
611+
name: '24',
612+
value: '24',
613+
selected: false
614+
},{
615+
name: '36',
616+
value: '36',
617+
selected: false
618+
}]
619+
}
620+
```
621+
- **fields** : This is an array of all required fields for generating result template. This is helpful to load the results faster. An example implementation is below
622+
```javascript
623+
...
624+
,fields : ['image_url','title','brand','price','uniqueId']
625+
...
626+
```
627+
- **deferInitRender** : This is an array of library features that need to be disabled on initial load.
628+
```javascript
629+
...
630+
,deferInitRender: ['search']
631+
...
632+
// The above config means the search results wont be rendered by the SDK on the first page.
633+
// The other pages though, will be rendered by the SDK.
634+
```
476635

477636
Note: The HTML served by the server to client should have the minimum requred structure. *Check the below image.*
478637

@@ -530,4 +689,4 @@ Note: The HTML served by the server to client should have the minimum requred st
530689
</script>
531690
</body>
532691
</html>
533-
```
692+
```

‎demo/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,6 @@ <h3 class="result-title-count" id="search_title">
5959
<script type="text/javascript">
6060

6161
//search configuration here
62-
Handlebars.registerHelper('getIndex', function(index){
63-
var total = $('#results_container li').length;
64-
return total + index + 1;
65-
});
66-
6762
window.searchobj = new Unbxd.setSearch({
6863
// siteName: 'allianceonline_co_uk-u1423569528226',
6964
// APIKey: 'f2ada89f21e1345bc660786663fb1a09'
@@ -81,7 +76,7 @@ <h3 class="result-title-count" id="search_title">
8176
,searchQueryDisplayTemp : 'Showing results for {{query}} - {{start}}-{{end}} of {{numberOfProducts}} Results'
8277
,pageSize : 24
8378
,noEncoding: true
84-
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{getIndex @index}}" unbxdAttr="product">'
79+
,searchResultSetTemp : ['{{#products}}<li><a href="product.html?pid={{uniqueId}}" id="pdt-{{uniqueId}}" class="result-item" unbxdParam_sku="{{uniqueId}}" unbxdParam_pRank="{{unbxdprank}}" unbxdAttr="product">'
8580
,'<div class="result-image-container">'
8681
,'<span class="result-image-horizontal-holder">'
8782
,'<img src="{{{image_url}}}" alt="{{{title}}}">'
@@ -225,6 +220,7 @@ <h3 class="result-title-count" id="search_title">
225220
,onPageLoad : function(){
226221
console.log('onPageLoad', arguments, this);
227222
}
223+
,deferInitRender: ['search']
228224
,bannerSelector: '.banner'
229225
,sortContainerSelector: '.result-sort-options'
230226
,pageSizeContainerSelector: '.result-page-size-options'

0 commit comments

Comments
 (0)