Mixed Content
Lets isolate the use-case for which you want to display on one page: blogs, campaigns, trendy brands (with icons), different product-slider recommendations, most-viewed categories, etc.
This page will identify the core elements and strategies to follow when designing a mixed-content Layout.
API REQUEST STRATEGIES (INTEGRATION)
Because of the different nature of the returned content, it is expected that different filters will work on a certain content type.
As a practice, the Integration Layer Guidelines (ex: for Shopware6, Magento2, etc) include samples for the default product filters.
The required filters for every content type (if any) is an integrator`s decision.
The filters have no impact on the optimization rules on the widget.
The filters are used to restrict the API response.
1. ONE API REQUEST
This is the desired use-case.
Why? Because it gets down to building a single narrative layout in Intelligence Admin (IA).
Easy to maintain & migrate
Transparent for debugging
STEPS
Identify the content required (ex: a list of campaigns, a list of products, trending brands + icons slider, more products, some blogs)
Identify the data-source (solr index, headless CMS, IA campaign/correlation, etc)
Identify the default filters for each content (ex: status+stock+store for products, blog-status for blogs, etc)
Identify the Layout Blocks to be used
Review the Integration Guide with default Narratives
(If it helps) Identify the already available JSON elements in the framework-specific integration guidelines
Make sure the Layout Blocks that return a collection / list of elements:
the parent has the bx-hits:accessor key-value property
the child has the bx-hit:accessor key-value property
Add the accessor property in your Layout Block JSON Schema
Create the Narrative Layout (linked to a single widget: home, for ex)
Identify the widget for each content-source
Each data source must be provided by an individual widget
When building the narrative layout, the name will be set as a value for the accessor property
Create the API request based on your Context
or check out the API Request view service https://boxalino-di-transformer-krceabfwya-ew.a.run.app/api/view
Add the identified filters at step #1.a
At the level of the content widget
If your API request has some filters (ex: the ones for product), add Request Rule to remove those filters from other widgets
Go to Merchandising >> Request Rules
Add a new rule for a widget (or more) (ex: blog)
Switch on tab “Effects” and add “Remove” rules for the API request filters
Test he API request
The above sample is based on our demo web-shop layout https://demo.bx-cloud.com/
In the above example, the API response was rendered in a loop, all Layout Elements being sorted per design requirements.
If you need/want to access the API response in different page sections, use the position property (with a value) as instructed here Narrative API - Technical Reference | Use other positions than the main “blocks”
2. MULTIPLE API REQUESTS
This case is the easiest one to follow through.
It is assumed that steps #1-2-3 are known (content, data source, filters and Layout Blocks)
Identify the content details (source, filters)
Create the required Layout Blocks
Create individual narrative layouts, linked to a single widget
Use the Layout Blocks for your data content
Identify the API request structure https://boxalino-di-transformer-krceabfwya-ew.a.run.app/api/view
Add the filters on the API request, matching each widget & content particularity
Make the API requests
Relevant Layout Blocks