PRO: Faceted Search with JSON and JCI

Challenge:

You have a JSON-API which gives realtime-data. The user should be able to search this data with a faceted search to set options for selecting items.

In action:

see api.json-content-importer.com/pro-faceted-search-in-action/

Example-Data:

http://api.json-content-importer.com/extra/json/travel.json has data on hotels at different locations, different prices etc.

Step 1: Create a page with the search-results

Create a JCI-template with these settings: URL:
http://api.json-content-importer.com/extra/json/travel.json

urlparam4twig (parameters for the search)):
cres#vmax#vmin#ch#sort#page

Template-Text / twig-code: 
{% set nof = 0 %}
{% set sort = 'desc' %}{% if urlparam.sort=="sortup" %}{% set sort = '' %}{% endif %}


{% if nof >0 %}


{% set itemsperpage = 5 %}
{% set noofpages = ((nof /itemsperpage) | round(0, 'ceil') )%}
{% if noofpages>1 %}
{{nof }} Found, Pagination: 

{% endif %}


{% else %}


Nothing found, change selection please


{% endif %}
Leave the other settings like cache, twig3 etc. as they are (default settings).
Saving this JCI-template gives you a number for this template. Use this on a page like that: 
[jsoncontentimporterpro id=NUMBER_OF_TEMPLATE_STEP1]
Preview of this page should give you something like this: http://api.json-content-importer.com/get-faceted-results/. Name this page "get-faceted-results" and publish it. The URL then should be DOMAIN/get-faceted-results/

Step 2: Check jQuery-Libs

The faceted search uses the jQuery-JavaScript-Libraries. Depending on the used WordPress-Template those libraries are already available. If not you can load them via ther JCI-options, Tab "Extra". Check what your template is offering here (like a css-grid or JS-libs). In case of need load
  • jQuery: Basic jquery-Lib
  • jQuery-UI, jQuery-UI CSS: Libs for using a slider etc.
  • jQuery-UI Touch Punch: for using sliders on mobile devices
  • jQuery mobile JS, jQuery mobile CSS: for using on mobile devices
  • foundation-float.min.css: CSS-grids

Step 3: Create a page with the facet-search-form and the results

Create a JCI-template with these settings: URL:
http://api.json-content-importer.com/extra/json/travel.json

Template-Text / twig-code: 
{% set loop = Offers %}
{% set resortList = [] %}
{% set anz = 0 %}
{% set maxprice = -1 %}
{% set minprice = -1 %}
{% for r in loop %} 
{% set resortList = resortList | merge(  {(r.Resortname) : 1 }) %}
{% if r.Sellprice > maxprice  %}{% set maxprice  = r.Sellprice %}{% endif %}
{% if r.Sellprice < minprice or  minprice <0 %}{% set minprice = r.Sellprice %}{% endif %}
{% endfor %}







Price-Sort:

    

Price:





Location:

{% set resortList = (resortList | sortbyarray("ksort")) %}
{% for k,v in resortList %}
 {{k}}

{% endfor %}







select settings on the left side
Leave the other settings like cache, twig3 etc. as they are (default settings).
Saving this JCI-template gives you a number for this template. Use this on a page like that: 
[jsoncontentimporterpro id=NUMBER_OF_TEMPLATE_STEP2]
Preview of this page should give you something like this: http://api.json-content-importer.com/pro-faceted-search-in-action/.

Step 4: Create a page with the details of an item

Create a JCI-template with these settings: URL:
http://api.json-content-importer.com/extra/json/travel.json

urlparam4twig (parameters for the search)):
refnum

Template-Text / twig-code: 
{% for r in Offers %} 
{% if r.Refnum==urlparam.refnum %}

Hotel: {{r.Hotelname}}

{{r.Arraptname}}

{{r.Outbounddep}}-{{r.Inboundarr}}


{{r.Sellprice}} Euro

{% endif %}
{% endfor %}
back
Leave the other settings like cache, twig3 etc. as they are (default settings).
Saving this JCI-template gives you a number for this template. Use this on a page like that: 
[jsoncontentimporterpro id=NUMBER_OF_TEMPLATE_STEP4]
Name this page "trip-details" and publish it. A click on "more" in the facet-result-list should take you to this page.
Well - that's it. For other JSON you have to alter the twig-code to sum up the facet-options.