Displaying WP Plugins in React from REST API

  • mavalon

    (@mavalon)


    7 years ago

    I’m no expert at either WP or React, but I suppose I’m trying to accomplish something pretty advanced — since I can’t find any answers online.

    I have a React frontend and I’m trying to display the rendered content from /wp-json/wp/v2/pages/{page}. And what it’s trying to render is the WP Visited Countries plugin (which requires js files and executes a function to load it).

    But, the render method is executed after the page is loaded, so the JS and CSS files will never be loaded or executed.

    I’m rendering the content from:

    {
"page": {
"rendered": "<p>My homepage</p>\n<p>&nbsp;</p>\n\n\t\t    <link rel=\"stylesheet\" href=\"http://cms.midlifetour.localhost/wp-content/plugins/wp-visited-countries-reloaded/ammap/ammap.css\" type=\"text/css\" media=\"all\" />\n\t\t    <script type=\"text/javascript\" src=\"http://cms.midlifetour.localhost/wp-content/plugins/wp-visited-countries-reloaded/ammap/ammap.js\"></script>\n\t\t    <script type=\"text/javascript\" src=\"http://cms.midlifetour.localhost/wp-content/plugins/wp-visited-countries-reloaded/ammap/maps/js/worldLow.js\"></script>\n\t\t    \n\t\t    <div id=\"wpvc-jscontent\" style=\"width: 600px; height: 300px; background-color:#E0E0E0\"></div>\n\t\t    <script type=\"text/javascript\">\n                AmCharts.makeChart( \"wpvc-jscontent\", {\n                \n                    \"type\": \"map\",\n                    \"fontFamily\":\"Tahoma\",\n                    \n                    \"dataProvider\": {\n                        \"map\": \"worldLow\",   \n                        \"getAreasFromMap\": true,\n                        \"areas\": [{\"id\":\"AL\",\"color\":\"#CC0000\",\"rollOverColor\":\"#FF0A0A\",\"selectedColor\":\"#FF0A0A\",\"balloonText\":\"<b><a href="https://codex.wordpress.org/title">title</a><\\/b><br>\"},{\"id\":\"AR\",\"color\":\"#CC0000\",\"rollOverColor\":\"#FF0A0A\",\"selectedColor\":\"#FF0A0A\",\"balloonText\":\"<b><a href="https://codex.wordpress.org/title">title</a><\\/b><br>\"}]\n                    },\n\n                    \"areasSettings\": {\n                        \"autoZoom\": true,\n                        \"rollOverOutlineAlpha\": 0,\n                        \"balloonText\": \"\",\n                        \"color\": \"#B8B8B8\",\n                        \"rollOverColor\": \"#FF0A0A\",\n                        \"selectedColor\": \"#FF0A0A\",\n                    },\n\n                    \"smallMap\": {\n                        \"enabled\":true,\n                        \"backgroundColor\": \"#444444\",\n                        \"mapColor\": \"#AFEA48\",\n                        \"borderColor\": \"#FFFFFF\",\n                        \"rectangleColor\": \"#FFFFFF\"\n                    },\n                    \n                    \"zoomControl\": {\n                        \"zoomControlEnabled\": true,\n                        \"buttonFillColor\": \"#FFCC00\",\n                        \"buttonRollOverColor\": \"#FF6600\"\n                    },\n                    \n                    \"balloon\": {\n                        \"fontSize\":\"12\",\n                        \"color\":\"000000\",\n                        \"fillColor\":\"#FFFFFF\"\n                    }\n                    \n                } );\n            </script>\n        <div class=\"wpvc-description\">I’ve visited 2 out of 217 countries. That is 0.92%.</div>\n",
"protected": false
}
}

    Thanks.

    • This topic was modified 7 years ago by mavalon.
Viewing 1 replies (of 1 total)
  • Joy

    (@joyously)

    7 years ago

    The REST API just gives you the content, as you have discovered.
    If you want the whole page, you’d need to visit the page URL, which you can do in an iframe, unless your code is the theme. The theme is responsible for generating the entire page.

Viewing 1 replies (of 1 total)

The topic ‘Displaying WP Plugins in React from REST API’ is closed to new replies.