Facets

Shopware6 facets

• Shopware6 facets are ajax-based. The controller action that handles the facets is the pagelet (or ajax) function.
• By default, Shopware6 does not update facets&search page title on pagelet, only the content within cmsProductListingSelector (as seen in the Shopware6 listing.plugin.js)

In the template samples within this repository, the integrator is presented with a strategy to also render the facets on each API response. This will provide the user with the facet options available based on prior selected filters.

Templates

The facets are a listing element. The Layout Block template is configured in the Boxalino Intelligence admin. The proposed template is the filter-panel template

• you can define different filter-view templates based on the configured facet visualisation
• same goes for the active filters

The Javascript SearchWidget has been extended and other Shopware6 widgets can be replaced as well.

Facet & Facet Options

The facet list is accessed via the ApiFacetModel which is configured as "model" for the bx-facets Layout Block element. The facet properties can be accessed with the use of the Facet accessor

Layout Block for 1 column layout facets

[ { "id": 848, "uniqueKey": "facets", "parametersJsonScheme": {}, "format": null, "widgets": [], "parameters": [ { "name": "**bx-facets**", "values": [ "accessor" ] }, { "name": "template", "values": [ "**@BoxalinoRealTimeUserExperienceIntegration/storefront/narrative/component/listing/filter-panel.html.twig**" ] }, { "name": "model", "values": [ "**Boxalino\\RealTimeUserExperience\\Framework\\Content\\Listing\\ApiFacetModel**" ] } ], "subRenderings": [], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true } ]

Layout Block for sidebar layout facets

[ { "id": 849, "uniqueKey": "facets_sidebar", "parametersJsonScheme": "{\n \"title\": \"Wrapper\",\n \"type\": \"object\",\n \"properties\": {\n \"accessor\": {\n \"type\": \"string\",\n \"title\" : \"Accessor\"\n }\n }\n}", "format": null, "widgets": [], "parameters": [ { "name": "position", "values": [ "left" ] }, { "name": "content-resource", "values": [ "c-r=f" ] }, { "name": "section", "values": [ "sidebar" ] }, { "name": "template", "values": [ "@BoxalinoRealTimeUserExperienceIntegration/storefront/narrative/element/cms-element-sidebar-filter.html.twig" ] } ], "subRenderings": [ { "parameters": [], "rendering": { "contexts": [], "layoutModels": [], "visualElements": [ { "visualElementModelUniqueKey": "facets", "label": null, "parameters": [], "visualElement": null, "subRenderings": [] } ], "parameters": null } } ], "route": "visual-elements", "reqParams": null, "$fromServer": true, "parentResource": null, "restangularCollection": false, "isSelected": true } ]

The facet options templates are specific for the configured visualisation type.

The facet option properties can be accessed with the use of the FacetValue accessor

Facets (request & response)

The facets can be part of the API request (in the integration for specific views OR by user selection).

The facets can also be configured directly in Boxalino Intelligence Admin (Facets view). The preferred and transparent recommended way is to configure the facets in Boxalino Intelligence.

The range facets required for your project must declared in an element such as the IntegrationContextTrait

Strategies

1. Update facets based on user selected options

In order to integrate this functionality, the AJAX Narrative layout structure has to be imported in the Boxalino Intelligence Admin.

1. use the Narrative AJAX layout: it is composed of a single root block which wraps the title, facets, products
2. add the JavaScript files

the JS contains more information on what it represents; it is to be updated and maintained within your own repository

3. update the main.js
4. compile the theme
   • php bin/console theme:compile
   • ./psh.phar storefront:build

2. Shopware6 default

In order to integrate this strategy:

1. design the narrative layout so that the page title, facets & listing are 3 individual (root) blocks;
2. follow steps 2-4 from above
3. same templates can be used
4. update the filter-panel template by removing the block boxalino_filter_panel_container_active and removing the inline style from the default block