Magento2 Facets

Per Magento2 LayeredNavigation default layout, the facets are located in the "left" position of the view. For this purpose, the facets Layout Block used for navigation has configured the property "position":"left" .

For the technical insight into Magento2 navigation system and the provided API elements, please check:

• the Layered Navigation wiki
• the ApiFacet model wiki

The provided JSON samples for the Narrative layout and the Layout blocks must be imported in Boxalino Intelligence Admin

Integration

When a search/navigation/etc request is done, the API request happens from the "content/main" referenceContainer. Due to that certain Magento2 blocks have been picked and redefined their preference dependency (ex: Magento\CatalogSearch\Block\Result, Magento\Catalog\Block\Category\View)

1. Create the templates

A full list of templates based on the default Magento2 theme can be accessed here. Each of the templates is thoroughly documented and has little deviation from the Magento2 theme.

Each template is being used as renderer, state or navigation. The range facet (ex:price) uses a different template. The strategy is decided at the level of the renderer (be it block or template)

2. Add the Layout Blocks

Per Magento2 pattern, the navigation block will inherit a renderer and a state child. In the provided JSON structure, the rtux-magento2 blocks are being used.

3. Check out the ApiFacet model

The provided ApiFacet model can be used as is or as a base for your custom logic.

The model requires the configuration for the selected values delimiter which is done via di.xml; This is the character by which the multi-select filter items will be divided.

4. Update the di.xml

As mentioned in the Layered Navigation documentation, the navigation is a declared virtualType. For the context of search/navigation (where the layered navigation is typically used), new preferences have to be declared for the Magento\LayeredNavigation\Block\Navigation types.

5. Load facets (discountedPrice & categories)

Review the available JSON from https://github.com/boxalino/rtux-integration-magento2/wiki/JSON-Guidelines-(Complete)#merchandising--facets .

Edit the facets once loaded (optionally).

---

Layout Block JSON

[ { "id": 987, "uniqueKey": "facet_renderer_api", "parametersJsonScheme": { "title": "Facets Renderer (filter view)", "type": "object", "properties": { "accessor": { "type": "string", "description": "facet accessor (typically leave empty)" } } }, "format": null, "widgets": [], "parameters": [ { "name": "name", "values": [ "renderer" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\LayeredNavigation\\Layer\\Filter" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/layered-navigation/layer/filter.phtml" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 988, "uniqueKey": "facet_state_api", "parametersJsonScheme": "{\n \"title\": \"Facets State (active filters)\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"facet accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "name", "values": [ "state" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\LayeredNavigation\\Layer\\State" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/layered-navigation/layer/state.phtml" ] }, { "name": "content-resource", "values": [ "c-r=t" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 989, "uniqueKey": "facet_navigation_api", "parametersJsonScheme": "{\n \"title\": \"Navigation Facets\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"facet accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-facets", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/layered-navigation/navigation.phtml" ] }, { "name": "name", "values": [ "catalog.navigation.left" ] }, { "name": "position", "values": [ "left" ] }, { "name": "model", "values": [ "Boxalino\\RealTimeUserExperience\\Model\\Response\\Content\\ApiFacet" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\LayeredNavigation\\Layer\\Navigation" ] }, { "name": "child", "values": [ "state", "state", "renderer" ] } ], "subRenderings": [ { "parameters": [], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "facet_state_api", "label": null, "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [] }, { "visualElementModelUniqueKey": "facet_renderer_api", "label": null, "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [] } ], "parameters": null } } ], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true } ]