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

<form action=/send-form-data-to-api/>
<input type=text name=inp  value="{{urlparam.inp | e}}"><br>
<input type=submit value="Send Data">
{% if urlparam.inp %}
{% set sc = "[jsoncontentimporterpro nameoftemplate=senddata url="~urlparam.inp~"]" %}
{% set scExe = (sc | doshortcode) %}
{% 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

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).

  1. Example JSON:
  2. Create a new JCI-Template:
    • Name: lightslider
    • URL:
    • twig-Template:
<link type="text/css" rel="stylesheet" href="">                  
<script src="//"></script>
<script src=""></script>
<ul id="lightSlider">
{% for d in _context %}
<img src="{{d.venue.img}}">
{% endfor %}
<script type="text/javascript">
  $(document).ready(function() {
        speed: 1500,
        auto: true,
        loop: true

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 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/ : eval()'d code:88 Stack trace: #0 /www/htdocs/w0135691/ __TwigTemplate_7b59c5b79ecf095c010fa281378acf2239afbd8fb32b2009ef3e2cdf519ea4e0->doDisplay(Array, Array) #1 /www/htdocs/w0135691/ JCITwig\Template->displayWithErrorHandling(Array, Array) #2 /www/htdocs/w0135691/ JCITwig\Template->display(Array) #3 /www/htdocs/w0135691/ in /www/htdocs/w0135691/ : eval()'d code on line 88