Category: Build Application with JCI
Build Application with JCI
PRO: Send Form-Data to API
This is done in this way:
1. Create a 1st JCI-Template:
Name of Template: senddata2form
URL: dummyrequest
(we don’t need a API when just displaying the Form)
urlparam4twig: inp
twig-template:
<form action=/send-form-data-to-api/> <input type=text name=inp value="{{urlparam.inp | e}}"><br> <input type=submit value="Send Data"> </form> {% if urlparam.inp %} {% set sc = "[jsoncontentimporterpro nameoftemplate=senddata url=http://api.json-content-importer.com/extra/json/storeanswer.php?insert="~urlparam.inp~"]" %} {% set scExe = (sc | doshortcode) %} {{scExe}} {% endif %}
Then use the following Shortcode on a page with URL /send-form-data-to-api/
[jsoncontentimporterpro nameoftemplate="senddata2form" orderofshortcodeeval=10]
2. In the above twig-template we call a JCI-Template named senddata. Let’S create this:
Name of Template: senddata
URL: empty (we send the URL in the Shortcode)
urlparam4twig: inp
twig-template:
hello senddata: {{nojsonvalue}}
PRO: JSON & Slider – How to do it with the jQuery Lightslider-Lib
Your challenge:
You have some URLs to Images in your JSON-Feed. Those images should be displayed in a image-slider.
There are many ways to do that:
One way is to use a PRO-slider like Smartslider and feed him with RSS, build out of JSON.
Another way is to use the jQuery lightSlider Library (see also here).
- Example JSON: http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
- Create a new JCI-Template:
- Name:
lightslider
- URL:
http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
- twig-Template:
- Name:
<link type="text/css" rel="stylesheet" href="http://sachinchoolur.github.io/lightslider/src/css/lightslider.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script> <ul id="lightSlider"> {% for d in _context %} <li> <img src="{{d.venue.img}}"> </li> {% endfor %} </ul> <script type="text/javascript"> $(document).ready(function() { $("#lightSliderDemo").lightSlider({ speed: 1500, auto: true, loop: true }) }); </script>
ATTENTION: In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!
- “jquery.min.js” you can add via the JCI-options, Tab “Extra”
- “lightslider.css” / “lightslider.js” you find at http://sachinchoolur.github.io/lightslider/ at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.
Insert this Shortcode on a WordPress-Page:
[jsoncontentimporterpro nameoftemplate=lightslider]
In Action:
Search JCI-Websites
Fatal error: Uncaught Error: Call to undefined function twig_call_macro() in /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Environment.php(359) : eval()'d code:88 Stack trace: #0 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(394): __TwigTemplate_7b59c5b79ecf095c010fa281378acf2239afbd8fb32b2009ef3e2cdf519ea4e0->doDisplay(Array, Array) #1 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(367): JCITwig\Template->displayWithErrorHandling(Array, Array) #2 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(379): JCITwig\Template->display(Array) #3 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig3 in /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Environment.php(359) : eval()'d code on line 88