JavaScript

Drupal 8 as a Static Site: Drupal 8 Contact Form Thank You Page

nigel — Sat, 04 May 2019 13:50:36 +0000

Drupal 8 as a Static Site: Drupal 8 Contact Form Thank You Page nigel Sat, 04/05/2019 - 14:50

Architecture

Our previous two tutorials on the Drupal 8 as a static site covered the Contact Form and the journey through the action to AWS Lambda to process the form and send an email. Now the final part of the contact form journey - returning back to the static site and showing a Thank You page.

In fact in this tutorial the Thank You path will actually be the same path with the contact form on it - so we return to the starting point, but we want to show a message back to the user to thank them for filling out the form. The notification back to the user will have to be JavaScript obviously since we have no backend language functionality.

If you remember the redirect back to the static site from AWS uses a HTTP code of 307. This code matches in the incoming HTTP request with the redirect. So since in our case the form was POSTed, then the redirect will also be POSTed back to the static site. This is both a blessing and a curse as we'll see.

Common wisdom says that JavaScript can neither detect whether an incoming request is POSTed or GETed, nor retrieve any of the POSTed data. That is theoretically true, but there are always workarounds of course :) :)

Adding the JavaScript

This is very similar to our earlier tutorial on how to add the Elasticsearch JavaScript client. So I won't dwell too much on this. Firstly we need to extend our template_preprocess_page function to add our thank-you JS library. This is the second section of code below, underneath the elasticsearch part

{themename}.theme - in my case the custom theme is called beezee8.

function beezee8_preprocess_page(&$variables) {

    // If we are on the search page, load the JS search client api
    // and our implementation to Elasticsearch
    if (\Drupal::routeMatch()->getRouteName() == 'search.view_node_search') {
        $variables['#attached']['library'][] = 'beezee8/elastic-library';
    }

    // If we are on the contact form page, load the JS to show thank you message
    if (\Drupal::request()->getRequestUri() == '/about') {
        $variables['#attached']['library'][] = 'beezee8/thank-you-library';
   }
}
?>

In the code above I get the current path alias and should that equal the '/about' page then I inject my JS library which is defined below.

Libraries file

The libraries file now needs a further entry for our thank you JS. Again we already created an entry for elasticsearch so I am not going to go over this in too much detail.

{themename}.libraries.yml

global-styling:
  css:
    theme:
      css/style.css: {}
elastic-library:
  js:
    js/elasticsearch-js/elasticsearch.min.js: {}
    js/beezee/beezee_elastic.js: {}
thank-you-library:
  js:
    js/beezee/beezee_thankyou.js: {}

JavaScript Thank You

Now here's the JavaScript. I did say that there is no way of knowing whether the HTTP request is GET or POST - well true, but we can deduce it. If we interrogate the referrer and it equals the current URL then we can make the assumption that the form has been POSTed, completed its round trip to AWS Lambda and back with a 307 code, and therefore we should show the thank you message. If you have a look at my code below you will see the conditional, and you will see the markup I inject into the page - it's classic Drupal 8 Bootstrap since that's how my theme is built. Your mileage here will obviously vary dependent upon your own theme.

{themename}_thankyou.js

(function ($, Drupal) {
 
    var thank_once;
 
    function BeezeeThankyou() {
        if (!thank_once) {
            thank_once = true;
 
            // If we are arriving here from lambda which passes on the referrer from here
            // then the form has been POSTed so show the thank you page
            if (document.referrer == document.URL) {
 
                // Markup to add the thankyou message
                var thanks = [
                    '',
                    '',
                    'Status message
',
                    'Thank you for contacting me. I will be in touch.',
                    '
'
                ];
 
                // Inject the markup
                $('.region-highlighted').append(thanks.join(''));
            }
        }
    }
 
    Drupal.behaviors.beezee_thankyou = {
        attach: function (context, settings) {
            BeezeeThankyou();
        }
    };
})(jQuery, Drupal);

nginx Server Configuration

If we try our form now (or at least if I do since I'm using nginx) - we will get an nginx 405 Not Allowed error. Remember I said the POST could be a blessing and a curse? The error is because by default nginx will not allow a POST to a static page. Thankfully there is a workaround. Locate the server configuration for your particular virtual host, and edit it by adding the following line into the server section.

{VM name}.conf

server {
.
.
.
      error_page  405     =200 $uri;
.
.

Form submission

Ok we should now be good to go. Submit the form and it should do the round trip from static site to AWS Lambda back to static site and an email arriving in your inbox!

An even better solution?

If you look carefully above you will see a placeholder in the thank you message. So am I saying it is possible to retrieve the POSTed data and insert the name into the placeholder? Sort of. There is a JS library called jQuery-PostCapture which can achieve this. It works by capturing the POSTed data when the form is initially submitted. This copy of the data is stored either as a cookie or in the browser's local storage. Once the trip to AWS Lambda is completed, this data can be fetched from the cookie or local storage - so the data isn't fetched from the actual POST itself.

The problem I've got with this is neither a cookie nor local storage is secure. However if you feel that the gains (being able to customise a message on the thank you page) is worth the security risk, then give it a shot!

blog terms

Static Site Drupal 8 Drupal PHP Development JavaScript

Drupal 8 as a Static Site: JavaScript Search Client

nigel — Sat, 15 Dec 2018 10:19:04 +0000

Drupal 8 as a Static Site: JavaScript Search Client nigel Sat, 15/12/2018 - 10:19

We now need to plug the Elasticsearch query that was built in the previous blog into a JavaScript client that has been loaded on the search page as described in another earlier blog. So a few lines of JavaScript will be required here, and it will need to work on my three environments:

Sandbox Drupal site connecting to local Elasticsearch server.
Sandbox static site connecting to local Elasticsearch server.
Production static site connecting to production Elasticsearch server.

The JavaScript will use the elasticsearch.js API library which can be downloaded from here. We need to make our theme aware of our JavaScript files and we only wanted them loading on the node search page route. Our JavaScript file will be called beezee_elastic.js, which is the name of my theme (beezee8) and elastic obviously.

Add the JavaScript to the Beezee theme

Firstly we need an entry in our theme's info.yml file under the Libraries heading.
beezee8.info.yml

libraries:
  - 'beezee8/elastic-library'

Next we need to append to the libraries yml file the location of our JavaScript files - the Elastic API library and our own personal script.
beezee8.libraries.yml

elastic-library:
  js:
    js/elasticsearch-js/elasticsearch.min.js: {}
    js/beezee/beezee_elastic.js: {}

Obviously we then have to copy our JS files into the filesystem at those locations - for now I will have a placeholder empty file for beezee_elastic.js which we will flesh out later.

Load the JavaScript files on the search page only

There are a few ways of doing this, but my favourite is to use a preprocessor function in the {themename}.theme file. We can use hook_preprocess_page for this.
beezee8.theme

/**
 * @param $variables
 */
function beezee8_preprocess_page(&$variables) {

    // If we are on the search page, load the JS search client api
    // and our implementation to Elasticsearch
    if (\Drupal::routeMatch()->getRouteName() == 'search.view_node_search') {
        $variables['#attached']['library'][] = 'beezee8/elastic-library';
    }
}
?>

The JavaScript search client

Ok so finally we are ready to build out our front end search client. Here we go!
beezee_elastic.js

(function ($, Drupal) {
 
    var elastic_once;
 
    function BeezeeElastic() {
        if (!elastic_once) {
            elastic_once = true;
 
            // Get the params from the url
            var pageURL = window.location.search.substring(1);
            var URLVariables = pageURL.split('&');
            var keys;
            i = 0;
            while (i < URLVariables.length) {
                var ParameterName = URLVariables[i].split('=');
                if (ParameterName[0] == 'keys') {
                    keys = ParameterName[1];
                }
                i++;
            }
 
            // Did we get anything from the URL? If not bail, otherwise do the search.
            // We shouldn't get to here so don't show a message to user.
            if (!keys) {
                console.log('Invalid keys');
                return;
            }
 
            // Add the search key to the h1 selector
            $("h1").append(Drupal.t(" for ") + keys);
 
            // Endpoint defined during instantiation of API Client
            var client = new elasticsearch.Client({
                host: 'http://meedjum.test:9200/' /*,*/
                /* log: 'trace' */
            });
 
            client.search({
                index: 'elasticsearch_index_badzilla_meedjum_staticcontent',
                body: {
                    query: {
                        function_score: {
                            query: {
                                query_string: {
                                    query: keys,
                                    fields: [
                                        "title",
                                        "*body",
                                        "term"
                                    ],
                                    default_operator: "OR"
                                }
                            },
                            functions: [
                                {
                                    linear: {
                                        "created": {
                                            origin: "now",
                                            offset: "365d",
                                            scale: "1460d",
                                            decay: 0.5
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    highlight: {
                        number_of_fragments: 1,
                        pre_tags: [""],
                        post_tags: [""],
                        fragment_size: 400,
                        no_match_size: 400,
                        phrase_limit: 1,
                        fields: {
                            "*body": {},
                            "title": {},
                            "term": {}
                        }
                    },
                    size: 10
                }
            }, response);
 
            /*
             Process the response from Elastic
             */
            function response(err, resp, status) {
 
                // Are we logged in? If so our jQuery calls will be slightly different due to additional DOM stuff
                // for non anonymous
                // These are our targets for injecting the content on the page. Markup is Bootstrap 3
                var h1_find;
                var h2_find;
                if ($(".user-logged-in").length) {
                    h1_find = "h1 + nav:last-child";
                    h2_find = "h1 + nav + h2:last-child";
                } else {
                    h1_find = "h1";
                    h2_find = "h1 + h2:last-child";
                }
 
                var hits = resp.hits.hits;
 
                if (resp.hits.total == 0) {
                    $(h1_find).after("" + Drupal.t("Your search yielded no results.") + "
");
                }
                else {
                    $(h1_find).after("" + Drupal.t("Search results") + "
");
 
                    var inject = "";
                    $.each(hits, function (key, value) {
 
                        // Url, title and Body
                        var prefix = "";
                        var suffix = "
";
                        var title = "\"" + value._source.url[0] + "\">" + value.highlight.title[0] + "";
 
                        // do we have a book body or a paragraph body?
                        var body;
                        if (typeof value.highlight.blog_body != 'undefined') {
                            body = value.highlight.blog_body[0];
                        } else {
                            body = value.highlight.body;
                        }
                        body = "" + body + "
";
 
                        inject += prefix + title + body + suffix;
 
                        // Add the tag
                        if (typeof value.highlight.term != 'undefined') {
                            inject += "" + Drupal.t("Tag:") + " " + value.highlight.term + "
";
                        }
 
                        // Author and date
                        var gb_obj = new Date(value._source.created[0] * 1000);
                        var gb_date = ('0' + gb_obj.getDate()).slice(-2) +
                            "/" + ('0' + (gb_obj.getMonth() + 1)).slice(-2) +
                            "/" + gb_obj.getFullYear() +
                            " " + "-" + " " +
                            gb_obj.getHours() + ":" +
                            gb_obj.getMinutes();
 
                        inject += "" + value._source.author[0] + " " + "-" + " " + gb_date;
 
                    });
                    inject += "
";
                    $(h2_find).after(inject);
                }
            }
        }
    }
 
 
    Drupal.behaviors.beezee_elastic = {
        attach: function (context, settings) {
            BeezeeElastic();
        }
    };
})(jQuery, Drupal);

Code commentary

I'd like to think the code is self-explanatory, but here are a few words for additional clarification.

The first block of code is processing the URL params. We are expecting the ?keys={search_phrase}. The search phrase needs to be injected into the Elasticsearch query later.

The client object is returned from me instantiating the Elasticsearch API. I needed a parameter of the Elasticsearch endpoint which is currently hardcoded. It will work for my two sandbox environments (Drupal and static) but not for production. I will have to come up with a solution to rewrite the endpoint during the deployment process!

The client.search call is our query created earlier, and I have added the search term from the URL. The Elasticsearch API provides two mechanisms for this call - it can return a promise or invoke a callback. I opted for the latter.

The response function is the callback and it handles the Elastic response. My first task is to set the selectors where I will inject the results - note that the DOM is different whether I am logged into my sandbox Drupal or not - so my injection anchor points are different dependent upon this circumstance.

I add the title, body text, tag, author and published date to my output, concatenating them together, and then inject them into the content area of the screen around ordered list tags.

The next result is very similar visually to the default Drupal core search with the addition of my blog tags, although of course it can be styled differently if wanted.

The results

The script works well on both the Drupal and static sites in sandbox. The screenshot above shows a search on the word nginx. At the moment I haven't built in a paginator, but that could come along later.

blog terms

Static Site Drupal Drupal 8 JavaScript

JavaScript

Drupal 8 as a Static Site: Drupal 8 Contact Form Thank You Page

Status message

Drupal 8 as a Static Site: JavaScript Search Client

" + Drupal.t("Your search yielded no results.") + "

" + Drupal.t("Search results") + "

"; var suffix = "