add developped Widget in pos

  • Hi,

    I want to embed a Wildix Demo Widget in one of the WP posts. On their site, they produce a model that I downloaded, which has the following structure:

      root

    • images/ : contains multiple images used only by this widget
    • js/ : contains some js scripts (like JQuery)
    • index.html : html of the widget, using <script> tags in <head> to load /js/.. files, their script from their site and define a function

    For the moment to integrate it to my site I :

    1. Deleted included JQuery file to use WP version
    2. Downloaded their script in js/ and include them in index.html
    3. Created a root/assets/template-part/WildixWidget folder in our custom theme containing the full structure of the widget (images, js, and index.html)
    4. I created a Post Template in root/ (wildixWidget.php), but I can not “load” the HTML code from /assets/template-part/WildixWidget/index.html

    Do anyone have an idea about how can I do ?

    Thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)

  • Normally you would rework the HTML so it is not a complete page (just the widget) and then your template can use include( file ). Or rewrite it as a WP Widget which is not that hard, but you have to then make it available to be added to your post, so using a post template is not too bad.

    Coincidentally, I heard of this article just recently
    https://www.filamentgroup.com/lab/html-includes/

    Thread Starter mchalavon

    (@mchalavon)

    Thanks to your answer

    I already tried with <iframe>
    After some research, I found what is my real problem and why my widget does not work

    My Post Template wildixWidget.php contains the following code:

    <iframe src="{PathTo}/usersList.html" allow="..." frameborder="0" scrolling="no">
  error
</iframe>

    usersList.html contains the widget html without <script> tag and it requires :
    – JQuery
    – ./js/jquery.kiteContact.js
    – ./js/wwScript.js

    To load them I use function.php :

    define('SCRIPTVERSION', 1.5);

function load_custom_assets() {
    // add new JQuery Library
    wp_register_script('newjquery', content_url().'/lib/jquery-3.1.1.min.js', false, '3.1.1');

    // JS
    wp_register_script('wildixScript', '{usersListHtmlFolder}/js/wwScript.js', array('newjquery'), SCRIPTVERSION, true);
    wp_enqueue_script('wildixScript');
    // same for jquery.kiteContact.js
}

    add_action(‘wp_enqueue_scripts’, ‘load_custom_assets’);

    <iframe> generates an HTML “subpage” in the WP “main-page” :

    <!-- WP... -->
<html>
	<head>...</head>
	<body>
		<!-- my widget iframe looks like -->
		<iframe src="{PathTo}/usersList.html" allow="microphone; camera" scrolling="no" frameborder="0">
			#document
			<html><!-- usersList.html content is in <body> --></html>
		</iframe>
	</body>
</html>

    I think the problem is that WP loads all the required scripts in the header/footer of the “main” page.
    When my widget wants to use one of the scripts, it looks for them in the sub-page generated by the <iframe> so it can not find them and it does not have “access” to the main-page <script> tags.
    I can add the <script> tags in the Post Template or in the usersList.html but I do not prefer it. Do you have an idea of how can I do it?

    P.S : as you can see in function.php, yes I know it’s not a good idea but my WP uses 2 versions of Jquery

    If your index.html file has the scripts it needs listed in its <head> section, then you don’t need to enqueue those scripts in your template. In fact, as you discovered, they would be loaded into the wrong document for them to work.

    Your PHP template should generate the iframe, but don’t expect it to be able to get any data from WP or to inject any data there either.
    Or, if you trim the index.html file down so that it’s not an entire page, your PHP can enqueue the scripts and use include for the trimmed down HTML. This method allows your PHP to provide data to the widget, since it’s in the same document. (I don’t really know if you need to)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘add developped Widget in pos’ is closed to new replies.