Magento 2

Introduction

Boxalino Winning Interactions Platform provides many Magento 2 features, like:

  1. Search As you Type (Autocomplete Flyout)

  2. Search result page with facets (refinement filters), pagination, and sorting

  3. PDP product recommendations (via subscriber event)

  4. Category Product-listing results (a.k.a. Navigation) with facets (refinement filters), pagination and sorting

  5. CMS element (e.g.: products or blog post) for any Layout Integration (with Boxalino Narrative block)

  6. Dynamic router (ex: for brand pages or landing pages)

to integrate Boxalino Winning Interactions Platform, you will need to use our 3 repositories:

Repository

Description

Usage

Repository

Description

Usage

exporter-magento2
(deprecated)

a standard Magento2 plugin responsible to export Magento data to Boxalino

To be replaced by the Data Integration repository

data-integration-magento2

a Magento2 plugin responsible to export the eshop data following the Boxalino Data Structure

Install and update when Boxalino provides a new version

rtux-magento2

a standard Magento2 plugin responsible to manage all the calls to Boxalino API for your front-end

Install and update when Boxalino provides a new version

rtux-integration-magento2

a sample (tutorial) Magento2 plugin provided to examplify how to integrate Boxalino (you can either build your own from scratch or download (and rename namespace) it to have all default features active directly, but do not copy or clone, as it is your environment and should not be updated from our repo)

Use as inspiration or download (and rename namespace) to bootstrap all features (but do not copy or clone!) and then develop, maintain and extend by yourself

As per the diagram below, all the execution will be done from your integration plugin (which you will build based on the examples provided in rtux-integration-magento2).

Prerequisites:

The intent of integrating the Boxalino API on a Magento 2 environment requires building a new repository/module in the Magento 2 project which will represent the Integration Layer.

There are 2 ways to do that:

  1. Step-by-Step (recommended)

  2. All-at-Once

Step-by-step (recommended):

In this case, you are not integrating the rtux-integration-magento2 repository directly, you are simply using it as a reference and build the functionalities step-by-step by yourself.

Boxalino recommends this way as you have full control on what you do and it ensures that you donโ€™t implement any code that is not needed (you can always add it later).

In this case, just create a new Magento 2 module from scratch, known as your project`s Integration Layer (ex: namespace BoxalinoClientProject\BoxalinoIntegration) as an empty module (you will need it in the next step to have a place to activate the tracker).

Follow the official Magento 2 guidelines for how to create a new module (ex: https://devdocs.magento.com/guides/v2.4/architecture/archi_perspectives/components/modules/mod_intro.html)

All-at-once:

In this case, you download (BUT DO NOT COPY/REQUIRE OR CLONE!) the rtux-integration-magento2 as a basis for your plugin (and then rename namespace) . This will automatically activate all the standard features of Boxalino (search, navigation, product recommendations, โ€ฆ).

Boxalino does not recommend this way unless you know you want to use all the standard features and want to accelerate the process to get one (or many) shop(s) up and running quickly.

1. Declare the data integration (DI) services and run a full export

Follow the steps described in the section: Setup for the Data Integration Layer.

Follow the steps described in the section: Setup for the Data Exporter Layer.

In these steps, after adding and activating the data-integration-magento2 module, you will configure its parameters, declare the required services and run a full export.

2. Activate tracker

Follow the steps described in the section: Setup for the Framework Layer.

In these steps you will add and activate the rtux-magento2 module, then you will configure its parameters and integrate the tracker.

3. Make API calls for any feature (search, recos, โ€ฆ) and render the response in your front-end with narrative templates

This section will greatly depends on whether you chose the Approach Step-By-Step or All-At-Once as described above.

Step-By-Step

Follow the steps described in the section: Building up the Integration Layer - Step-By-Step.

The process will vary depending on which feature you want to integrate (Search, Product Recommendations, โ€ฆ). However, they will always follow the same steps:

  1. Configure in Boxalino Admin

    1. the required Widget(s) in the first main view (you can save them with an empty strategy, it will simply mean that the products you will retrieve are not filtered or sorted in any special way).

    2. the required Layout Blocks for each template which is involved in the rendering of the feature

    3. the required Narratives for each required Widget(s) with the layout adapted to the

    4. then press the test button to test with parameter test=true (or publish to test with parameter test=false)

    5. and wait at least 5 minutes for the cache to refresh

  2. Integrate the code to make the call to the Narrative API

  3. Integrate the templates required to render the layout returned by the Narrative API

All-at-once

Follow the steps described in the section: Building up the Integration Layer - All-at-once.

The process here is primarily to configure all the required Widgets, Layout Blocks, and Narratives in one shot as all the features will be activated at once. The steps for this in the Boxalino Admin are the same as described in the Step-By-Step approach.

Important comments

In order to make sure that your integration goes smoothly, please take good notice of the following points:

  1. Make sure that if you export your data in dev (vs prod), that you access the API with dev=true (vs false)

  2. Make sure that you download (and rename namespace) but do not copy or clone the rtux-integration-magento2 repository, even if you chose the approach โ€œAll-at-onceโ€. The integration layer needs to be your environment that you extend / modify and maintain.

  3. Make sure that you do not call the API before you have configured the following aspects in the Boxalino Admin and have pressed test or publish:

    1. Widgets (in the main view, even if you leave the configuration of the widget strategy empty), otherwise, the system will throw an error because you are calling a non-existing widget

    2. Layout Blocks (that all the template you need have been configured in the Layout blocks, otherwise, you cannot create your Narratives (point c))

    3. Narratives connected to Widgets of point a, as without narratives configured for the widget, your API response will be empty

    4. Click Test (or Save&Test) and wait at least 5 minutes before using the API with the parameter test=true

    5. Publish and wait at least 5 minutes before using the API with the parameter test=false

Setup for the Data Integration Layer https://github.com/boxalino/data-integration-magento2

  1. Add the plugin to your project via composerย 

    1. composer require boxalino/data-integration-magento2

  2. Activate the plugin (Magento 2 default)

    1. ย php bin/magento module:enable Boxalino_DataIntegrationย 

  3. Log in your Magento admin and configure the module with the configurations provided for your setup

    1. Magento 2 Admin >> Stores >> Configuration >> Boxalino Data Integration

  4. Set configuration per Website and disable the module where it is not in use.

    1. each language (Store View) will be exported individually and is unique per data index (Boxalino account)

    2. Configuration options description is available under each field or in the wiki Configurations

  5. Add the generic services to your Integration Layer`s di.xml

    1. https://github.com/boxalino/rtux-integration-magento2/blob/3.2.0/etc/di_config/di-full.xml copy this content in your project`s di.xml

      1. Make sure to declare the brand property here

      2. Make sure to configure the images export here

      3. Make sure to configure the media images export here

    2. full available description of the full sync available on wiki https://github.com/boxalino/data-integration-magento2/wiki/Integration:-Full

  6. Trigger a full data index

    1. php bin/magento boxalino:di:full:product <account_name>

    2. More options for the full data index : https://github.com/boxalino/data-integration-magento2/wiki/Integration

Proceed with the Setup of the Framework Layer

(legacy) Setup for the Data Exporter Layer https://github.com/boxalino/exporter-magento2

  1. Add the plugin to your project via composerย 

    1. composer require boxalino/exporter-magento2

  2. Activate the plugin (Magento 2 default)

    1. ย php bin/magento module:enable Boxalino_Exporterย 

  3. Log in your Magento admin and configure the module with the configurations provided for your setup

    1. Magento 2 Admin >> Stores >> Configuration >> Boxalino Exporter

  4. Set configuration per Website and disable the plugin where it is not in use.

    1. each language (Store View) will be exported individually and is unique per data index (Boxalino account)

    2. Configuration options description is available under each field or in the wiki https://github.com/boxalino/exporter-magento2/wiki/Configurations

    3. More information on the available data indexes available in the wiki https://github.com/boxalino/exporter-magento2/wiki/SOLR-data-indexes

  5. Trigger a full data index

    1. php bin/magento indexer:reindex boxalino_exporter

    2. More options for the full data index : https://github.com/boxalino/exporter-magento2/wiki/Full-data-sync

Proceed with the Setup of the Framework Layer

Setup for the Framework Layer https://github.com/boxalino/rtux-magento2/wiki

  1. Add the plugin to your project via composerย 

    1. composer require boxalino/rtux-magento2

  2. Activate the module (Magento 2 default):ย 

    1. php bin/magento module:enable Boxalino_RealTimeUserExperience

    2. the module contains JS files as well (build the theme)

  3. Log in your Magento 2 admin and configure the module with the configurations provided for your setup

    1. Magento 2 Admin >> Stores >> Configurations >> Boxalino API

    2. Check the information on each configuration option in your admin view or in the wiki https://github.com/boxalino/rtux-magento2/wiki/Configurations

  4. Make sure to use the proper configuration for the โ€œUse Development Data Indexโ€ property

    1. if true , the Data Integration Layer must be linked to the Data Index : Development

    2. if false, the Data Integration Layer must be linked to the Data Index : Production

  5. In order to kick off your account, a full export is required (step #5 from โ€œSetup for the Data Integration Layerโ€œ)

  6. Continue with the โ€œIntegration of the Framework Layerโ€ steps

  7. Continue with the โ€œIntegration of the API JS Trackerโ€ step

Integration of the Framework Layer

Sorting

The API request schema has a list of properties. One of the properties is the sort property.

  1. Review the sorting options desired for the project

    1. in the default guidelines, the generic Magento2 sorting options are used (price, title, relevance) https://github.com/boxalino/rtux-integration-magento2/blob/master/etc/di.xml#L15

    2. more information about the sorting : https://github.com/boxalino/rtux-integration-magento2/wiki/Sorting

  2. It is possible to declare new sorting options by adding new definitions in the collection

    1. the label property must exist in your translation files

Response Registry

As the name suggests, this data element is used to store the API response and access it within your integration scopes (ex: a single request for search, and data used for more layout blocks โ€“ facets & listing)

  1. Declare the desired data objects for the interfaces

    1. https://github.com/boxalino/rtux-integration-magento2/blob/master/etc/di.xml#L10

Facet delimiters

The facetValueDelimeter is a configured property used for the facet options join (in the URL)

  1. Declare the desired character to be used as facet delimiter

    1. https://github.com/boxalino/rtux-integration-magento2/blob/master/etc/di.xml#L52

    2. it is used in the base ApiFacet Model which is recommended for the model property of the facet_navigation_api Layout Block

      1. ย 

Integration of the API JS Tracker

The Boxalino API JS tracker must be activated ahead of any front-end integration. Together with the Data Exporter & Framework Layer, it will constitute the minimum requirements for a non-API go-live which will allow Boxalino to create relevant statistics for enabling other features (recommendations, textual suggestions, etc)

  1. Check the HTML Template Requirements

  2. Follow the tracker integration guidelines

    1. the rtux-magento2 provides the base events track JS

    2. the rtux-magento2 provides the observers for order & login track

    3. base elements from rtux-magento2 are only used when integrated in the Integration Layer module

  3. Test the tracker integration with the help of the Tracker Check List JS Tracker Check-List

ย 

Building up the Integration Layer - Step-By-Step

In this section, we described the building process of the integration layer with the approach described above as โ€œStep-by-Stepโ€.

  1. Create & enable your project`s Integration Layer Magento 2 module

  2. Follow the Setup for Framework Layer Magento 2 | Setup for the Framework Layer https://github.com/boxalino/rtux magento2/wiki

3. Follow the Setup for Data Integration Layer

The Boxalino API integration can start by following the recommended order :

  1. Data Integration / Exporter (daily full export; delta per project requirements)

  2. Home slider (ex:ย CMS contextย )

  3. PDP recommendations / Cross-selling (as seenย PDP sampleย )

  4. Autocomplete (the recommendedย Javascript approach)

  5. Navigation

  6. Search

  7. Dynamic pages (ex:ย brand pages)

Every integration feature consists of:

  1. Integration Description / About : an insight into the approach.

  2. Steps

  3. Layout Blocks JSON : default JSON element to be loaded in Intelligence Admin

  4. Narratives Layout JSON : default JSON elements to be loaded in Intelligence Admin

Building up the Integration Layer - All-At-Once

In this section, we present the building process of the integration layer with the approach described above as โ€œAll-At-Onceโ€.

  1. From a project level, require & enable the Data Integration Layer and the Framework Layer

    1. composer require boxalino/rtux-magento2

    2. composer require boxalino/data-integration-magento2

    3. php bin/magento module:enable Boxalino_RealTimeUserExperience Boxalino_DataIntegration

  2. Download the Boxalino Guidelines for the Integration Layer

    1. we recommend to download the latest available tag/version or the one recommended for your Magento 2 version

  3. From the downloaded archive, copy the content in your project`s Integration Layer module

  4. Change the namespace by:

    1. replacing ย BoxalinoClientProject\BoxalinoIntegration with your own project`s Integration Layer namespace

    2. replacing theย BoxalinoClientProject_BoxalinoIntegrationย with your own project namespace

    3. update/replace theย registration.phpย based on what is defined in your Integration Layer composer.json

    4. update your project`s Integration Layer composer.json:

      1. dependencies (as seen on rtux-integration-magento2/composer.json at master ยท boxalino/rtux-integration-magento2 )

      2. psr-4 (to match the registration.php declaration )

    5. copy the content of the di-full.xml in your project`s di.xml (to activate the command for full data syncs for products, users & transactions)

  5. Activate your project`s Integration Layer module (Magento 2 php bin/magento module:enable command)

  6. Generic Magento2 deployment events (flush cache / run setup:upgrade / setup:di:compile / setup:static-content:deploy depending on your project practices)

  7. Configure the Data Integration Layer and Framework Layer

    1. check out the Framework Layer Configurations wiki https://github.com/boxalino/rtux-magento2/wiki/Configurations

    2. check out the Data Integration Layer Configurations wiki Configurations

      1. set the data integration configuration per Website and disable the plugin where it is not in use

      2. the language (Store View) must be unique in the Website, otherwise, multiple Boxalino-accounts are needed

  8. Run the data exporter command in order to initialize your account`s data index

    1. php bin/magento boxalino:di:full:product <account_name>

    2. read more on the available data indexes on the SOLR data indexes wiki page Data Indexes

    3. you can review the status of your data sync request with the use of our service Sync Status Review

  9. Load the Boxalino Intelligence Admin configurations for a narrative API setup

    1. ask Boxalino on the setup channel to assist

      1. provide your project`s Integration Layer namespace

    2. do it yourself

      1. check out the JSON Guidelines page https://github.com/boxalino/rtux-integration-magento2/wiki/JSON-Guidelines-(Complete)

      2. copy each JSON content in the required path from Boxalino Intelligence Admin

        1. Menu: Advanced >> Template Resources

          1. copy and load as they are

        2. Menu: Merchandising >> Facets

          1. copy and load as they are

        3. Menu: Marketing >> Layout Block

          1. copy the JSON structure

          2. replace theย BoxalinoClientProject_BoxalinoIntegrationย namespace with your project`s Integration Layer namespace

          3. load in Boxalino Intelligence Admin

        4. Menu: Marketing >> Narratives

          1. copy and load as they are

  10. The tracking, navigation, search, autocomplete, pdp recommendations will be replaced immediately

    1. if there are other modules rewriting/extending Magento 2 behaviors - check for conflicts

11. Review every integrated feature