Docs

[AlternativeAdventures]

Hello,

I have been looking similar topics (insert javascript on a page), but decided to open a new one for the exact thing as I believe it’s popular.

I want to insert a sky scanner widget.
The instructions I follow here: http://business.skyscanner.net/portal/en-GB/Documentation/WidgetsStart

but without success.

Can you help?

Page URL where I want to insert it is https://www.ontherock.es/one-stop-useful-info
All is up to date.
Thanks

[Jade]

Hi there,

You can add the following scripts in your head section by pasting the following code in your child theme’s functions.php file:

add_action('wp_head', 'custom_scripts');

function custom_scripts() {
    if(is_single('2697')) {
?>
        <script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]&ssl=true"></script>

<?php }
}

Then add this code in a Raw Content element:

<script type="text/javascript">
    skyscanner.load("snippets", "2"); 
    function main() {
        [WIDGET-SET-UP]
    };
    skyscanner.setOnLoadCallback(main);
</script>

Please replace [WIDGET-SET-UP] with the specific settings for your widget.

Let us know how this goes!

[AlternativeAdventures]

Hi,

I still can’t make it work.

This is how my functions.php looks like: see the attached file.

And the code in the raw content is:

<script type=”text/javascript” src=”//api.skyscanner.net/api.ashx?key=asaskyscannerwidget”></script>
<script type=”text/javascript”>
skyscanner.load(“snippets”,”2″);
function main(){
var snippet = new skyscanner.snippets.SearchPanelControl();
snippet.setShape(“box400x400”);
snippet.setCulture(“en-GB”);
snippet.setCurrency(“EUR”);
snippet.setMarket(“UK”);
snippet.setDestination(“TENE”, false);
snippet.setColourScheme(“springgreenlight”);
snippet.setProduct(“flights”,”1″);

snippet.draw(document.getElementById(“snippet_searchpanel”));
}
skyscanner.setOnLoadCallback(main);
</script>

Thank you so much for the help even it doesn’t look is in the scope of your support.

[AlternativeAdventures]

Functions.php file

<?php

// =============================================================================
// FUNCTIONS.PHP
// —————————————————————————–
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// —————————————————————————–
// 01. Enqueue Parent Stylesheet
// 02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

// Additional Functions
// =============================================================================

//remove all_in_one_seo_pack urls removed
remove_filter( ‘wp_footer’, ‘onAddScriptsHtmls’);
add_action(‘wp_head’, ‘custom_scripts’);

function custom_scripts() {
if(is_single(‘2697’)) {
?>
<script type=”text/javascript” src=”//api.skyscanner.net/api.ashx?key=asaskyscannerwidget&ssl=true”></script>

<?php }
}

[Lely]

Hello There,

Please update the code from your child theme’s functions.php file from this:

add_action('wp_head', 'custom_scripts');

function custom_scripts() {
    if(is_single('2697')) {
?>
        <script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]&ssl=true"></script>

<?php }
}

To this:

add_action('wp_head', 'custom_scripts');

function custom_scripts() {
    if(is_single('2697')) {
?>
        <script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]&ssl=true"></script>
<script type="text/javascript">
skyscanner.load("snippets","2");
function main(){
var snippet = new skyscanner.snippets.SearchPanelControl();
snippet.setShape("box400x400");
snippet.setCulture("en-GB");
snippet.setCurrency("EUR");
snippet.setMarket("UK");
snippet.setDestination("TENE", false);
snippet.setColourScheme("springgreenlight");
snippet.setProduct("flights","1");

snippet.draw(document.getElementById("snippet_searchpanel"));
}
skyscanner.setOnLoadCallback(main);
</script>
<?php }
}

Then on the RAW CONTENT element, just add this:
<div id="snippet_searchpanel" style="width: auto; height:auto;"></div>

Remember to replace [WIDGET-KEY] with your actual widget key.

Hope this helps.

[Author]

Posts