JS in a page

By Jobou on 12 Nov 2015 at 20:22 UTC

Hello,

I do a lot of search, but it's very confusing. I'm trying to integrate a Script into a specific page.

There is the html page I got from the compagny:

<!DOCTYPE html>
<html>
<head>
    <title>Online estimate appointment booking tool | ProgiSync</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../css/demo.css"/>

    <!-- PROGISYNC BOOKING WIDGET - Step 1: Two required javascript files.
         Place in <head>. jQuery must be loaded first, then booking_widget.js -->
    <script src="https://progisync.progi.com/public/lib_booking_widget/js/jquery-1.9.1.min.js"></script>
    <script src="https://progisync.progi.com/public/lib_booking_widget/js/booking_widget.js"></script>
	<!-- Step 1 END -->
</head>
<body>
<header>
    <div class="container">
        <h1><img src="http://www.progi.com/pub/media/progisync_larger.png" alt="ProgiSync" /><br>
			Integration of the Estimate Appointment Booking Widget</h1>
    </div>
</header>

<div id="main" class="container">
	<p id="intro">&#9733; View the HTML code of this page for the material required to integrate the widget to your website. &#9733;</p>
	
    <!-- PROGISYNC BOOKING WIDGET - Step 2: DIV that will hold the application. -->
    <div id="pswidgetContainer"></div>
    <!-- Step 2 END -->

</div>

<!-- PROGISYNC BOOKING WIDGET - Step 3: Initialisation of the widget.
Place script near the end of the page, for better performance. Replace the variables below. -->
<script>
    /*
       Labels are optional.
       Labels allow you to customize label names.
       If you do not want to overwrite a label, remove it from the list or set it to null
       hereafter are the keywords to use:
    */

//    var labels = {
//        lbl_client_name: null,
//        lbl_client_vehicle: null,
//        lbl_client_email: null,
//        lbl_client_phone: null,
//        lbl_client_sms: null,
//        lbl_client_sms_info: null,          /* null by default. if defined, the message appears when the checkbox is selected */
//        lbl_client_insurer: null,
//        lbl_client_policy_nb: null,
//        lbl_client_claim_nb: null,
//        lbl_client_notes: null
//    };

    /*
        The extraRequiredFields parameter is optional.
        By defining it, you can make other fields required. (Other than the ones already required by the widget)
        You will find below the list of possible extra fields you can mark as required:
        (If you don't want some of those fields to be marked as required, simply remove them from the list)
     */

//    var extraRequiredFields = [
//        'client_insurer',
//        'client_policy_nb',
//        'client_claim_nb',
//        'client_notes'
//    ];

    progi.bookingWidget.init({
        webKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',  /* Step 3.1: WebKey provided within ProgiSync's interface to the supplier. */
        containerElementId: 'pswidgetContainer',  /* Step 3.2: DIV ID where the widget will load, e.g. 'pswidgetContainer' in this case. */
		lang: 'en',                               /* Step 3.3: Define the display language. en = English, fr = French */
        myLabels: null,                           /* Optional: Overwrite labels. To use it, replace null by labels and uncomment Labels declaration above */
        extraRequiredFields: null                 /* Optional: List of extra fields to be marked as required. To use it, replace the null value
                                                     with extraRequiredFields and uncomment the extraRequiredFields declaration above. */
    });
</script>
<!-- Step 3 END. Integration done. Time to test this thing. Good luck! -->
<!-- PROGISYNC BOOKING WIDGET is part of ProgiSync and developped by Progi.com -->

<footer>
    <div class="container">
        <p>ProgiSync is developed by Progi - All rights reserved. - Contact Progi at 1-855-310-6343.</p>
    </div>
</footer>
</body>
</html>

Thanks a lot :)

Comments

If I was going to integrate

nevets commented 12 November 2015 at 20:53

If I was going to integrate this I would make a module that can produce either a page and/or a block.

I would provide a settings page for the optional labels and which fields are required.

In addition I would create a custom js file that invokes progi.bookingWidget.init() (the script would use the settings)

When displaying the block/page, I would use the settings to create settings under Drupal.settings and load the custom js file.

js injector

yelvington commented 12 November 2015 at 23:31

See https://www.drupal.org/project/js_injector

Using js injector

Jobou commented 20 November 2015 at 23:43

I put my script with the JS Injector on the footer and header of the page I want.

Trying to call the script in the page with the DIV, but nothing happen, only the code...

<div id="pswidgetContainer"></div>

If you dont need to reuse the

joachim desarmenien commented 13 November 2015 at 14:16

If you dont need to reuse the page throughout the site

you could do that with a template
node/yourpage
node--NID.tpl.php
with something like

<script type="text/javascript">
$(document).ready(function() {
 ///your script here
}
</script>

or if you need it on every page
create js file that you call in the .info file of your theme
scripts[] = js/youjs.js

Just for 1 page

Jobou commented 20 November 2015 at 23:34

Hello,

I create a new document on my serveur, folder of my template named: rdv.tpl.php

Inside I put my script:

<script src="https://progisync.progi.com/public/lib_booking_widget/js/jquery-1.9.1.min.js"></script>
<script src="https://progisync.progi.com/public/lib_booking_widget/js/booking_widget.js"></script>

    <script>

//    var labels = {
//        lbl_client_name: null,
//        lbl_client_vehicle: null,
//        lbl_client_email: null,
//        lbl_client_phone: null,
//        lbl_client_sms: null,
//        lbl_client_sms_info: null,
//        lbl_client_insurer: null,
//        lbl_client_policy_nb: null,
//        lbl_client_claim_nb: null,
//        lbl_client_notes: null
//    };

//    var extraRequiredFields = [
//        'client_insurer',
//        'client_policy_nb',
//        'client_claim_nb',
//        'client_notes'
//    ];

    progi.bookingWidget.init({
        webKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        containerElementId: 'pswidgetContainer',
        lang: 'en',
        myLabels: null,
        extraRequiredFields: null
    });
</script>

I don't know what to do after? How can I link the rdv.tlp.php to a new pages on my Drupal site?

=-=

VM commented 13 November 2015 at 17:28

https://www.drupal.org/node/756722

Your subject is JS in a page, but then you present an entire page of static content. Are you asking how to include just some javascript or are you trying to use drupal to look like that page? Because Drupal constructs pages parts at a time from different modules.