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" .

More on this topic in :

• the "Facets: 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

Top facets

With the use of the property "position":"top" - the content can be accessed from the API response parameter "top" instead of "blocks". This is a strategy applied in case of top-facets.

Note: the facet must have the property "position":"top" configured as well.

Integration

In order to display the content from the "top" response, the layout XML has to be updated:

1. search layout
2. category view layout

Layout Block JSON

As an integration use-case, the top facets are complimentary to the navigation facets. Due to this, it only has the renderer child defined which handles how are the filter options displayed.

The top facets renderer child must have a different name than the navigation facets renderer child. In the provided JSON element, the name is renderer-top. The top facets name has to be unique as well (per Magento2 standards)

The Boxalino Layout Block uses same block type as the navigation facets layout block: Boxalino\RealTimeUserExperience\Block\LayeredNavigation\Layer\Navigation

The Boxalino Layout Block uses same model as the navigation facets layout block: Boxalino\RealTimeUserExperience\Model\Response\Content\ApiFacet

Have a look at the top facets template.

Same facet_renderer_api layout block is defined as child. The only difference is the name which is redefined via the Parameters.

Now you are ready to use the top facets in the view. Just add the new element to the desired narrative layout.

[ { "id": 986, "uniqueKey": "facet_top_api", "parametersJsonScheme": "{\n \"title\": \"Top Facet\",\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": "name", "values": [ "catalog.navigation.top" ] }, { "name": "position", "values": [ "top" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\LayeredNavigation\\Layer\\Navigation" ] }, { "name": "model", "values": [ "Boxalino\\RealTimeUserExperience\\Model\\Response\\Content\\ApiFacet" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/layered-navigation/top.phtml" ] }, { "name": "child", "values": [ "renderer-top" ] } ], "subRenderings": [ { "parameters": [], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "facet_renderer_api", "label": null, "parameters": [ { "name": "name", "values": [ "renderer-top" ] }, { "name": "accessor", "value": "", "values": [ "" ] } ], "visualElement": null, "subRenderings": [], "startVal": { "name": "renderer-top" }, "hiddenParams": {} } ], "parameters": null } } ], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "contentResource": false, "isSelected": true }, { "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 } ]