Integration Steps for Magento2

Integration Steps

To integrate Klevu Recommendations with your Magento store, first you need to include a small extension which will add the prerequisite resources to your website, then you need to make some minor modifications to your website's frontend to include the recommendation banners where you would like them to appear.

1. Install the Recommendations Extension

First, you need to include one small extension, Klevu Recommendations, which will add the prerequisite script inclusions to your store, and populate a JavaScript variable on applicable pages to give our recommendation engine the context it needs in terms of the product or category being viewed by your customer.

We recommend installation via composer:

composer require klevu/module-recommendations
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

Alternatively, you can also download and install manually. If you do so, please pay close attention to the module requirements, as there is at least one more package you will need, eg. Klevu Registry. Due to dependencies like this, we recommend using composer installation which handles such things for you automatically.

Once you have installed the extension, you should see a new section within Magento Admin > Stores > Configuration > Klevu > Search Configuration, called Smart Recommendations. You will also see a section called Metadata Settings. There is a flag in each of these sections to enable or disable the functionality, please set both of these to Yes.

The prerequisites are now complete, but you will not see any recommendation banners on the website just yet, as you have not placed any in your store.

2. Creating and Placing Recommendation Banners

You will need to repeat the following steps for each new banner you create within the Klevu Merchant Centre (KMC), in order to configure and place them into your store. For more information on creating banners, please refer to the following guide.

Once you have created your banner(s), the next step is to place them in your store. You can do this by directly modifying your theme code, but in this guide we will utilise the native Magento CMS and Magento Widgets for a development-free approach.

CMS Content Fields

Any content managed field which allows HTML to be entered and output on the frontend can be used to embed a recommendations banner. This includes

• CMS page content
• CMS static blocks
• Product descriptions
• Category descriptions

Simply enter the HTML snippet (eg `

`) from the KMC into the content area in Magento where you would like the banner to be displayed. The Klevu Recommendations extension will take care of the rest, and convert this `div` into a recommendation banner.  

Widgets

To output widgets on multiple pages, or in areas which are not content managed, you can use Magento’s Widget functionality. (For more information about Magento widgets, please refer to the official documentation)

To add a banner via a widget, first we will need to create a CMS static block containing the HTML embed code from the KMC. Log into the Magento backend and navigate to Content > Elements > Blocks. Click Add New Block then Show / Hide Editor to switch to code/HTML view. Enter the `div` from KMC into the content area and finally save the block.

Next we need create the widget to display this CMS block on the website. Navigate to Content > Elements > Widgets and click Add Widget.

• Set the widget Type to "CMS Static Block".
• Set the Design Theme to the theme your store is using.
• Click on Continue
• Under Storefront Properties, add layout update(s) to determine the page(s) and location in which the widget will be output.
• Under Widget Options, select the CMS block you created containing the Recommendations HTML snippet.

Finally, save the widget and clear the application cache, and you should see a Klevu Recommendation banner appearing in the location you specified.  

3. Images, Add to Cart and Magento specifics

Finally there are some extra steps which need to be actioned which are specific to your Magento installation. Please visit the following URL to review these steps and whether they are applicable to your store: Klevu Recommendations customisations.

4. Customisations

Our Magento extension adds the prerequisite JavaScript resources and default initialisation scripts using the Magento layout using Blocks and templates, usually referenced in `default_head_blocks.xml`.

If you need to modify something already being output, you can create a template, layout or plugin within a custom extension of your own in order to modify the appropriate output. Please refer to both `Klevu\FrontendJs` and `Klevu\Recommendations`. If you need to add a JS Library template customisation or override, you can do this by including a new template in addition to our defaults, within a custom extension of your own, and load this template in the same manner we do in `Klevu\Recommendations`, via `default_head_blocks.xml`.

The actual modifications required will vary depending on what you are trying to achieve, so if you run into any problems please reach out to us on the Community Forum.