Adding a Landing Page to Magento

If you are not familiar with Magento module management, we recommend you contact your Magento frontend developer to complete these steps for you.

These instructions assume you have already created a Klevu Landing Page using our UI via the Klevu Merchant Centre. The process involves three steps:

  1. Add some assets to your Magento theme.
  2. Create a new layout template in Magento.
  3. Create a new Magento Page to display this new Page template.

The below video gives you an idea how easy the integration process is. Please watch this video but when you integrate for yourself, please follow the steps outlined within this page which will reflect the most recent changes required.

Modifying your Magento Theme

Magento does not allow you to add new files to your theme via the Admin panel, so in order to add the JavaScript, HTML and CSS files required for Klevu Landing Pages to work, we must make changes to the Magento codebase which must then be deployed to your website.

If you are not familiar with this process, please request support from your Magento frontend developer.

Add files to your Magento Theme

You will already have a Page Builder ZIP file which contains the three files that must be added to your Magento theme. The approach and the file locations below are just a guide and you can amend as you see fit.

In this guide we reference an arbitrary module name Klevu\PageBuilderExample, which you can replace with any module you like. We also recommend a convention of lpb-123 to represent “Landing Page Builder” plus the ID of the particular page you are integrating.

  • scripts.js: A JavaScript file, containing the functionality required for the Landing Page.
    • Add this to Klevu/PageBuilderExample/view/frontend/web/js/lpb-123/scripts.js.
  • styles.css: A CSS file, containing some basic CSS for styling your Landing Page.
    • Add this to Klevu/PageBuilderExample/view/frontend/web/css/lpb-123/styles.css.
  • templates.tpl: A Micro-Template file, containing the HTML for rendering your Landing Page.
    • You may add this to Klevu/PageBuilderExample/view/frontend/templates/lpb-123/templates.phtml, however see the note below.

Note that by default, templates.tpl is just for reference. A base64 encoded version of the HTML found in templates.tpl is already included within scripts.js, eg. setTemplate( “f00b4rbase64encoded” , “template-name” , false );. If you want to override any of the HTML micro-templates, please see the section at the bottom of this page.

Next we need to add a wrapper template to tie the above together, Klevu/PageBuilderExample/view/frontend/templates/lpb-123/wrapper.phtml:

<?php /** @var $block \Magento\Framework\View\Element\Template */ ?>

<!-- Klevu PageBuilder Files -->
<script type="text/javascript" src="<?= $block->getViewFileUrl('Klevu_PageBuilderExample::js/lpb-123/scripts.js') ?>"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?= $block->getViewFileUrl('Klevu_PageBuilderExample::css/lpb-123/styles.css'); ?>" />

<!-- Placeholder where the content will be injected -->
<div class="klevuLanding"></div>

<?php echo $block->getChildHtml(); ?>

Power-up Klevu on every page

For performance reasons the analytics calls to Klevu which need to be associated to a product click or an add to cart request do not fire until you reach the target page. For this reason, the Klevu Library must be included on every page it is possible to exit the landing page towards via a click.

Here we will include the Klevu power-up on every page, so no matter what functionality you add to your landing page, any tracking events will still be fired. Create a new Template: Klevu/PageBuilderExample/view/frontend/templates/lpb-settings.phtml

<!-- Klevu JavaScript Library -->
<script src="//js.klevu.com/klevu-js-v2/2.2/klevu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="//js.klevu.com/klevu-js-v2/2.2/klevu.css">

<!--
    Initialisation script.
    If you are already using Klevu JS Library on your website,
    and have a klevu-settings.js file included on every page,
    please merge the below with your existing initialisation.
-->
<script type="text/javascript">
    /**
     * Power-up Klevu library for your store.
     */
    klevu.interactive(function() {
        var options = {
            url : {
                // replace with your own search endpoint
                search: klevu.settings.url.protocol + '//eucs18v2.ksearchnet.com/cs/v2/search',
                protocolFull: klevu.settings.url.protocol + "//"
            },
            localSettings: true,
            search : {
                // replace with your own API Key
                apiKey: "klevu-12345678901234567"
            },
            analytics: {
                // replace with your own API Key
                apiKey: "klevu-12345678901234567"
            }
        };

        klevu(options);
    });

    /**
     * Also power up Analytics to handle clicks
     * which exit away from the Page Builder on
     * to another page, eg. Cart or Product Page.
     */
    klevu.coreEvent.build({
        name: "analyticsPowerUp",
        fire: function () {
            if (
                !klevu.getSetting(klevu.settings, "settings.localSettings", false) ||
                !klevu.analytics.build
            ) {
                return false;
            }
            return true;
        },
        maxCount: 500,
        delay: 30
    });
    klevu.coreEvent.attach("analyticsPowerUp", {
        name: "attachSendRequestEvent",
        fire: function () {
            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.term
            );

            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.click
            );

            klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                klevu.analyticsUtil.base.storage.dictionary,
                klevu.analyticsUtil.base.storage.categoryClick
            );
        }
    });
</script>

Then add a layout to include this script to the top of every page of your website, for example the below would add it to the <head/>, PageBuilderExample/view/frontend/layout/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="klevu_lpb_settings" template="Klevu_PageBuilderExample::lpb-settings.phtml" before="-" />
        </referenceContainer>
    </body>
</page>

Note it is important that this lpb-settings.phtml be rendered before your wrapper.phtml, so the Klevu Core Library JavaScript is available when the wrapper code is executed. Otherwise you may see a ‘klevu is not defined’ error in the console.

Create a Magento layout

Next we need to create a Magento layout template that we can use as the design for a CMS Page. We recommend the following naming convention: Klevu/PageBuilderExample/view/frontend/page_layout/klevu-lpb-123.xml

<?xml version="1.0" ?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="klevu_lpb_123_wrapper" template="Klevu_PageBuilderExample::lpb-123/wrapper.phtml" after="cms_page">

            <!-- Note: Omit this next block if your scripts.js
                 already has base64 encoded versions of the templates -->
            <block class="Magento\Framework\View\Element\Template" name="klevu_lpb_123_templates" template="Klevu_PageBuilderExample::lpb-123/templates.phtml" after="-" />

        </block>
    </referenceContainer>
</layout>

Next create a layouts.xml file to inform Magento that this template is available, in Klevu/PageBuilderExample/view/frontend/layouts.xml:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="klevu-lpb-123">
        <label>Klevu LPB 123</label>
    </layout>
</page_layouts>

Create a Magento Page

Once the above changes have been uploaded to your website, create a new Magento CMS Page and select Klevu LPB 123 as the template for that page. The URL you assign to this Page is the URL that your Klevu Landing Page can be accessed from by your customers.

Once you save this Page, your Landing Page will be live on the URL you specified.

Overriding Styles, Templates and JavaScript Logic (optional)

Should you wish to modify the CSS of the landing page, you should override using standard CSS approach rather than modifying the CSS included in the ZIP file. This will make future updates to your page easier.

Similarly for HTML or JavaScript modifications, you can override using the method below. The following is an example of an override to modify the ‘Quick View’ button and change how the ‘Add to Cart’ functionality works.

Using the same process as described above, add a new Magento asset to your theme called Klevu/PageBuilderExample/view/frontend/web/js/lpb-123/overrides.js with the following contents:

// attach to the event which fires for this Landing Page
klevu.coreEvent.attach( "setRemoteConfigLandingPage123", {
  name : "page-specific-overrides-123",
   fire : function () {
        // update the template that renders the 'quick view' button
        // to pull from an element with ID 'idOfContainerWithNewHtml'
        klevu.search.landingPage123.getScope().template.setTemplate( klevu.dom.helpers.getHTML("#idOfContainerWithNewHtml") , "product-quick-view-landing" , true );
     
     // add to cart overide (add an alert when add to cart clicked)
     if(!klevu.isUndefined(klevu.search.modules.addToCart)){
       klevu.search.modules.addToCart.base.sendAddToCartRequest = function(variantId, quantity){
         // replace the alert() logic with any JavaScript functionality you would like to occur when a customer clicks on the add to cart button.
         alert("Add to cart called! See klevu-lpb-123-overrides.js to add logic...");
       };
     }
   }
});

Finally include this override in your Page Template, immediately after the original scripts.js file inclusion:

...

<!-- Klevu PageBuilder Files -->
<script type="text/javascript" src="<?= $block->getViewFileUrl('Klevu_PageBuilderExample::js/lpb-123/scripts.js') ?>"></script>
<script type="text/javascript" src="<?= $block->getViewFileUrl('Klevu_PageBuilderExample::js/lpb-123/overrides.js') ?>"></script>

...

Once your Page Template is saved, your overrides will be active on your Page Builder Page.