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 %}Leave the other settings like cache, twig3 etc. as they are (default settings).{% if nof >0 %}{% endif %} {% else %}{% set itemsperpage = 5 %} {% set noofpages = ((nof /itemsperpage) | round(0, 'ceil') )%} {% if noofpages>1 %} {{nof }} Found, Pagination:{% endif %}Nothing found, change selection please
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 %}Leave the other settings like cache, twig3 etc. as they are (default settings).select settings on the left side
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 %}Leave the other settings like cache, twig3 etc. as they are (default settings).Hotel: {{r.Hotelname}}
{{r.Arraptname}}
{{r.Outbounddep}}-{{r.Inboundarr}}
{{r.Sellprice}} Euro
{% endif %} {% endfor %} back
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.