Check WordPress and Javascript code

Ive posted a couple of times about is and haven’t found a solution – so I thought I would post my latest progress as I feel I’m close…

I’m having trouble with Javascript and I would like to confirm my syntax is correct before I look elsewhere for problems…

I have a javascript function that should check a basket and if it has items do something and if it’s null then do something else.

I’ve been given a .js library to work with – https://tickets.leicesterymca.co.uk/Iframe/esrojsapi.js – But I’m not sure everything is linked up correctly.

To start with my WordPress functions file that brings in my .js files, is as follows:

 function theme_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'esro', 'https://tickets.leicesterymca.co.uk/Iframe/esrojsapi.js', '', null, true );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );


}
add_action( 'wp_enqueue_scripts', 'theme_js' );

My own .js file, called theme.js contains the following code to check the basket:

function basketHandler(basket)
{
                if (basket != null)
{
                                if(basket.Tickets.length > 0)
                                {
                                                console.log("Basket is not null and has tickets");
                                }
                                else
                                { 
                                                console.log("Basket is not null but has no tickets");
                                }
                }
                else
                {
                                console.log("Basket is null");
                }
}


$esro.attachEventHandler("basketChanged", basketHandler);

When visiting my site: https://www.leicesterymca.co.uk/ I can type into the console: basketHandler(); and it returns the main else message: “Basket is null” however, when I add an item to the basket from here for example: https://www.leicesterymca.co.uk/show/?showid=54585854-54f7-e611-80d7-00505601004c (it then displays the buying process in an iframe when you click on BUY NOW), and then run the function again – I still just get the message: “Basket is null” instead of the message: “Basket is not null and has tickets” as I expect.

I’m pretty new to Javascript worried these are not talking to each other, which would mean I could mess round with the code all I like but if the fundamentals aren’t there then it will never work.

When I try and run a function inside the .js library I was given, It doest seem to work, so I’m not even sure I’m the console test is a good way to check the function is available?

So I guess I’m asking…

  • Is my code correct?
  • Are my .js files in the correct order and being brought in correctly?
  • Is the code seeing/checking the basket correctly?
  • Can the code see the basket inside the iframe?
  • Am I even testing and running the function correctly?

As you can see I’m in a bit of a mess and my knowledge of Javascript isn’t great – I would greatly appreciate if someone could help. Thanks.

Read more here: Check WordPress and Javascript code

Leave a Reply

Your email address will not be published. Required fields are marked *