Navigation Context - boxalino/rtux-integration-magento2 GitHub Wiki

Before you continue, make sure the required integration steps have been completed.

The navigation context is about replacing category views with API response blocks. The Boxalino widget is navigation and other properties are inherited from the request & Magento2 configurations (hitCount, sorting, facets etc)

The content of the response depends 100% on your design and layout blocks desired.

Before testing the feature, the layout blocks & narrative layout must be defined in Boxalino Intelligence admin.

The Layout Blocks JSON & Narratives JSON from this page can be used as base.

If there is no narrative assigned to the choice/widget requested, the response will be empty.

Integration description

The Layout Blocks JSON & Narrative Layout JSON sample is minimalistic. Following this integration, the content for product_list is being replaced by the Narrative API. These guidelines do not update the default Magento2 catalog_category_view template

Due to the listing context, the following elements are defined as layout blocks and used in the API layout. Templates and block types have been provided as well but the decision to re-use them is up to the integrator:

toolbar
pagination
sorting

More documentation on the provided elements is available in the framework wiki.

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

Steps

In order to enable Boxalino navigation, the following steps are needed:

1. Implement the Boxalino RTUX API ContextInterface

In the most basic integration (ex: when extending from the provided base ContextAbstract ) - only 3 functions are left to be implemented in order to set:

the products visibility (as filter values)
the products category (as filter - depends on the context)
the return fields (which can be set via layout XML as well)

The filters list can be changed by rewriting the addFilters(RequestInterface $request) function.

FYI: the ListingRequestDefinitionInterface must be defined on the context due to the nature of the context: listing.

2. Create the Navigation/View block

To keep things simple, the default Magento2 Catalog Category View block is used as a parent in order to also ensure a safe fallback strategy. As always, the required context definition properties must be set: widget, hit count and product item id.

In order to replace the content of "product_list", the function is rewritten: public function getProductListHtml()

In it`s place, the default response block is rendered, having all the API response content set. https://github.com/boxalino/rtux-integration-magento2/blob/master/Block/Api/Navigation.php#L95

3. Update the DI

4. Follow the navigation facets integration

5. (Optional) Follow the top facets integration

6. Create facets (or load in the Intelligence Admin);

In Intelligence Admin check the "Force Include" option on the facet. This will send it as part of the API response.

Layout Blocks JSON

[ { "id": 972, "uniqueKey": "product_list_api", "parametersJsonScheme": "{\n \"title\": \"Product List\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-hits", "values": [ "accessor" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/listing.phtml" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ListProduct" ] }, { "name": "model", "values": [ "Boxalino\\RealTimeUserExperience\\Model\\Response\\Content\\ApiEntityCollection" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_product_list" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 976, "uniqueKey": "product", "parametersJsonScheme": "{\n \"title\": \"Product\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/list/item.phtml" ] }, { "name": "bx-hit", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_product_item" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Item\\Block" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 977, "uniqueKey": "pagination", "parametersJsonScheme": "{\n \"title\": \"Pager Parameters (per Magento2 configurations)\",\n \"type\": \"object\",\n \"properties\": {\n \"useContainer\": {\n \"title\": \"Use container\",\n \"type\": \"boolean\",\n \"format\": \"checkbox\"\n },\n \"showAmounts\": {\n \"title\": \"Show amounts\",\n \"type\": \"boolean\",\n \"format\": \"checkbox\"\n },\n \"showPerPage\": {\n \"title\": \"Show per page\",\n \"type\": \"boolean\",\n \"format\": \"checkbox\"\n },\n \"showPager\": {\n \"title\": \"Show pager\",\n \"type\": \"boolean\",\n \"format\": \"checkbox\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-pagination", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_pagination" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Pager" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/list/toolbar/pagination.phtml" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 978, "uniqueKey": "sorting", "parametersJsonScheme": "{\n \"title\": \"Sorting\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-sort", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_sorting" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Sorting" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/list/toolbar/sorter.phtml" ] }, { "name": "model", "values": [ "Boxalino\\RealTimeUserExperience\\Model\\Response\\Content\\ApiSorting" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 979, "uniqueKey": "toolbar", "parametersJsonScheme": "{\n \"title\": \"Accessor\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-hitCounts", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_toolbar" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Toolbar" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/list/toolbar.phtml" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 984, "uniqueKey": "toolbar_pagination", "parametersJsonScheme": "{\n \"title\": \"Accessor\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-hitCounts", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_toolbar_pagination" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Toolbar" ] }, { "name": "template", "values": [ "BoxalinoClientProject_BoxalinoIntegration::api/catalog/product/list/toolbar.phtml" ] } ], "subRenderings": [ { "parameters": [], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "pagination", "label": null, "parameters": [ { "name": "useContainer", "values": [ "true" ] }, { "name": "showAmounts", "values": [ "false" ] }, { "name": "showPerPage", "values": [ "true" ] }, { "name": "showPager", "values": [ "true" ] } ], "visualElement": null, "subRenderings": [] } ], "parameters": null } } ], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true }, { "id": 985, "uniqueKey": "toolbar_sort_options", "parametersJsonScheme": "{\n \"title\": \"Accessor\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"description\": \"hits accessor (typically leave empty)\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "bx-hitCounts", "values": [ "accessor" ] }, { "name": "content-resource", "values": [ "c-r=t" ] }, { "name": "name", "values": [ "rtux_api_toolbar_sorting" ] }, { "name": "type", "values": [ "Boxalino\\RealTimeUserExperience\\Block\\Catalog\\Product\\ProductList\\Toolbar" ] }, { "name": "template", "values": [ "Boxalino_RealTimeUserExperienceIntegration::api/catalog/product/list/toolbar.phtml" ] } ], "subRenderings": [ { "parameters": [], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "sorting", "label": null, "parameters": [], "visualElement": null, "subRenderings": [] } ], "parameters": null } } ], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true } ]

Narrative Layout JSON

[ { "id": 884, "status": null, "uniqueKey": "navigation", "aliases": null, "widgets": [ "navigation" ], "allWidgets": null, "parametersJsonScheme": null, "seoContent": { "title": [ { "language": "de", "value": "" } ], "metaTags": [], "h1": [ { "language": "de", "value": "" } ], "others": [ { "name": "breadcrumbs", "value": [ { "language": "de", "value": "" } ] } ] }, "contexts": [], "layoutModels": null, "acts": [ { "parameters": [ null ], "chapter": { "format": "CPOActChapter", "contexts": [], "subActs": [], "journeyStepUniqueKeys": null, "callToActions": null, "renderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "facet_navigation_api", "label": "Left facets (navigation)", "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [], "parameters": null } } ] }, { "visualElementModelUniqueKey": "toolbar_sort_options", "label": "Toolbar with sorting", "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [], "parameters": null } } ] }, { "visualElementModelUniqueKey": "product_list_api", "label": "Category product list", "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "product", "label": null, "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [], "parameters": null } } ] } ], "parameters": null } } ] }, { "visualElementModelUniqueKey": "toolbar", "label": "Bottom toolbar (pagination)", "parameters": [ { "name": "accessor", "values": [ "" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "pagination", "label": "Pagination", "parameters": [ { "name": "useContainer", "values": [ "true" ] }, { "name": "showAmounts", "values": [ "false" ] }, { "name": "showPerPage", "values": [ "false" ] }, { "name": "showPager", "values": [ "true" ] } ], "visualElement": null, "subRenderings": [ { "parameters": [ null ], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [], "parameters": null } } ] } ], "parameters": null } } ] } ], "parameters": null } } ], "parameters": null } } ], "parameters": [], "route": "narratives", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true } ]