Challenge:
Display data from https://monitoringapi.solaredge.com/site/CUSTOMERNUMER/overview.json?api_key=APIKEY
There at least three ways to do that…
Continue reading “PRO & Free, AARA-Plugin: Show data from monitoringapi.solaredge.com…”Supportsite JSON Content Importer
Examples, Sourcecode, HowTos…
Using JCI with other Plugins or Libraries (JS etc.)
Challenge:
Display data from https://monitoringapi.solaredge.com/site/CUSTOMERNUMER/overview.json?api_key=APIKEY
There at least three ways to do that…
Continue reading “PRO & Free, AARA-Plugin: Show data from monitoringapi.solaredge.com…”Together with the Plugin “WordPress Charts” the PRO version of the JSON Content Importer can plot data in many ways. Unfortunately this plugin isn’t availiable in the WP-Repository any more.
Example: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51 gives us the latest 50 numbers of the downloads of the free JCI plugin. The challenge is to display that data like this:
Downloads of the free JSON Content Importer Plugin: Daily statistic of the last 50 daysFor that we have to do this:
Name of template: wordpress-stat-plot
Install: WordPress Charts
Create a new JCI-pro-template with:
URL: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51
twig-template:
<a href="https://wordpress.org/plugins/json-content-importer/" target="_blank">Downloads of the free JSON Content Importer Plugin:</a> <a href="https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51" target="_blank">Daily statistic of the last 50 days</a><br>{%set no = 0 %} {% for dat,nodl in _parent %}{%set no = (_parent | length)-1 %}{% endfor %}
Save that template and use it on a page with the above shortcode
That’s it…
The Plugin “TablePress” and the PRO version of the JSON Content Importer can work together in this way:
Name: tablepress
URL: http://api.json-content-importer.com/extra/json/meetup/1.json
twig-template:
name: {{_context.0.name}}
1a: {{_context.0.name}} | 1b |
---|---|
2a | 2b |
Shortcode:
name: Love Breakfast1a: Love Breakfast | 1b |
---|---|
2a | 2b |
3. Insert {{_context.0.name}} in a table-cell of the Tablepress-Table. Then reload the page and you should see the JSON-data in the Table.
If the number of columns or rows is dynamic: Up to my knowledge TablePress has a fixed number of cols and rows. So this is not that flexible.
Maybe Table Sort is an option then.
JCI and Tablepress in Action:
name: Love Breakfast
1a: Love Breakfast | 1b |
---|---|
2a | 2b |
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).
lightslider
http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
<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!
Insert this Shortcode on a WordPress-Page:
[jsoncontentimporterpro nameoftemplate=lightslider]
In Action:
Challenge: You have to display and search a JSON like http://api.json-content-importer.com/extra/json/hrus.json
Solution:
Create two JCI-Templates and Pages and get that:
http://api.json-content-importer.com/hrus-list-all/?jobsea=digital
PAGE 1: Display-Page:
Shortcode:
[jsoncontentimporterpro nameoftemplate=hrus]
on page /hrus-list-all/ (you can change that, but then you have to change it in the Twig-code of both Templates too!)
JCI-Template 1:
Name: hrus
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: jobsea
Twig-Template:
<form action="/hrfuturebrandsus/"> <input type="text" name="jobsea" value="{{urlparam.jobsea}}"> <input type="submit"> </form> <hr> {% set jobanz = 0 %} {% set jobtxtout = '' %} {% for c in _context %} {% if c.title %} {% set jobtxt = ' <h1>' ~ c.title ~ '</h1> ' %} {% set jobtxt = jobtxt ~ c.summary ~ ' ' %} {% set jobtxt = jobtxt ~ '<i>' ~ c.employment_status ~ '</i>' %} {% set jobtxt = jobtxt ~ ' <a href="/hrus-detail/?slug=' ~ (c.slug | url_encode) ~ '">View Job</a>' %} {% set jobtxt = jobtxt ~ ' <hr> ' %} {% if urlparam.jobsea %} {% if (c.title matches '/'~urlparam.jobsea~'/i') or (c.summary matches '/'~urlparam.jobsea~'/i') %} {% set jobtxtout =jobtxtout ~ jobtxt %} {% set jobanz = jobanz +1 %} {% endif %} {% else %} {% set jobtxtout =jobtxtout ~ jobtxt %} {% set jobanz = jobanz +1 %} {% endif %} {% endif %} {% endfor %} {% if urlparam.jobsea %} {{ jobanz}} Jobs found {% else %} Current {{ jobanz}} Positions Open: {% endif %} {{jobtxtout}}
PAGE 2: Details-Page
Shortcode:
“orderofshortcodeeval=2” tells the plugin to execute the Contact Form first and then insert the JSON-Values
[jsoncontentimporterpro nameoftemplate=hrusdetail orderofshortcodeeval=2]
on page /hrus-detail/ (you can change that, but then you have to change it in the Twig-code of the Display-Page Templates !)
JCI-Template 2:
Name: hrusdetail
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: slug
Twig-Template:
{% set jobtitle = "" %} {% for c in _context %} {% if (c.title and (urlparam.slug==c.slug)) %} <h1>{{c.title}}</h1> {% set jobtitle = (c.title) %} {#{{c.web_content}}#} {% endif %} {% endfor %} <a href="/hrus-list-all//">Back to all Jobs</a><br> insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"<br> [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]
contact-form-7 (option):
If you need to add a Contact-Form for the User the Plugin Contact-Form-7 is an option.
For that install Contact-Form-7 and add a new Form with this Code:
<label> Job [text* job "{{jobtitle}}"] </label> <label> Your name [text* your-name] </label> <label> Your email [email* your-email] </label> <label> Subject [text* your-subject] </label> <label> Your message (optional) [textarea your-message] </label> [submit "Submit"]
Name that, save it and then you get a Shortcode like [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"].
The {{jobtitle}} is transformed with the JSON-Data. For that, check the JCI-Options at “Shortcode Settings”: The Radiobox at “Usage of Shortcodes (JCI or other) in the JCI-twig-Template” must be at the “Or the other way round: Executing Shortcodes in the template first and then evaluate the twig-code”
This plugin shos you how to display JSON-data in a Chart. For that we use the amChart-Plugin.
In Action:
JSON: http://api.json-content-importer.com/extra/json/chart.php
twig-template:
<!-- Styles --> <style> #chartdiv { width: 100%; height: 500px; } </style> <!-- Resources --> <script src="https://www.amcharts.com/lib/4/core.js"><\/script> <script src="https://www.amcharts.com/lib/4/charts.js"><\/script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"><\/script> <!-- Chart code --> <script> am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4charts.XYChart); chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.data = [ {% for c in _parent %} { country: "{{c.country}}", visits: {{c.visits}} } {% if (not loop.last) %},{% endif %} {% endfor %} ]; var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.renderer.grid.template.location = 0; categoryAxis.dataFields.category = "country"; categoryAxis.renderer.minGridDistance = 40; categoryAxis.fontSize = 11; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.min = 0; valueAxis.max = 24000; valueAxis.strictMinMax = true; valueAxis.renderer.minGridDistance = 30; // axis break var axisBreak = valueAxis.axisBreaks.create(); axisBreak.startValue = 2100; axisBreak.endValue = 22900; axisBreak.breakSize = 0.005; // make break expand on hover var hoverState = axisBreak.states.create("hover"); hoverState.properties.breakSize = 1; hoverState.properties.opacity = 0.1; hoverState.transitionDuration = 1500; axisBreak.defaultState.transitionDuration = 1000; /* // this is exactly the same, but with events axisBreak.events.on("over", function() { axisBreak.animate( [{ property: "breakSize", to: 1 }, { property: "opacity", to: 0.1 }], 1500, am4core.ease.sinOut ); }); axisBreak.events.on("out", function() { axisBreak.animate( [{ property: "breakSize", to: 0.005 }, { property: "opacity", to: 1 }], 1000, am4core.ease.quadOut ); });*/ var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.categoryX = "country"; series.dataFields.valueY = "visits"; series.columns.template.tooltipText = "{valueY.value}"; series.columns.template.tooltipY = 0; series.columns.template.strokeOpacity = 0; // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set series.columns.template.adapter.add("fill", function(fill, target) { return chart.colors.getIndex(target.dataItem.index); }); }); // end am4core.ready() <\/script> <!-- HTML --> <div id="chartdiv"></div>
<?xml version="1.0" encoding="windows-1252"?> <rss version="2.0"> <channel> <title>titleexample</title> <description>descriptionexample</description> <link>http://...link</link> <copyright>Copyright 20...</copyright> <docs>http://....docs</docs> <language>en-us</language> <lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate> <managingEditor>info@.....com</managingEditor> <pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate> <webMaster>webmaster@....com</webMaster> <generator>JCI</generator> <image> <url>http://www.....gif</url> <title>titleimage</title> <link>http://www....imagelink.htm</link> <description>descriptionimage</description> <width>480</width> <height>480</height> </image> <item> <title>titleitem</title> <description>descriptionitem</description> <link>http://www.linkitem</link> <comments>commentsitems</comments> <pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate> </item> </channel> </rss>
Notice: RSS is sensitive to speacial chars and chars used for RSS itself. Therefore consider to mask JSON-data in a CDATA-tag:
<![CDATA[ text.... ]]>
Name this JCI-Template e. g. “rss” and add this Shortcode to a page:
[jsoncontentimporterpro nameoftemplate=rss]
Publish this page and add “?show=oc” to the URL: This removes the WordPress-Template and gives pure RSS / XML.
This URL can be used with the SmartSlider 3 RSS-connector.
.
no (sortable) | x | x (sortable) | y (sortable) | randomno (sortable) |
---|---|---|---|---|
1 | 1593550800 | 1593550800 | 4.45520833333 | 2251 |
2 | 1593552600 | 1593552600 | 4.396875 | 2416 |
3 | 1593554400 | 1593554400 | 4.32447916667 | 4544 |
4 | 1593556200 | 1593556200 | 4.24791666667 | 4953 |
5 | 1593558000 | 1593558000 | 4.1171875 | 2614 |
6 | 1593559800 | 1593559800 | 4.00260416667 | 50 |
7 | 1593561600 | 1593561600 | 3.8921875 | 3087 |
8 | 1593563400 | 1593563400 | 3.75677083333 | 1080 |
9 | 1593565200 | 1593565200 | 3.63541666667 | 3718 |
Credits: Thank you Lawrence from South Melbourne, Austr
see more how this is done:
https://doc.json-content-importer.com/json-content-importer/pro-tablesorter/