Related Content
Our related content component allows you to display articles and/or products on any page on your website.
Configuration
Here is a complete list of configuration parameters you can use to setup the related content feature on your site.
{
siteId: 'mysiteid', // the site id of your site (required)
urlPattern: undefined, // an url pattern the active page has to match in order for the related content component to be initialized (default: initialized on all pages)
contentBlock: 'article, body, main', // a css selector, the related content component will be appended to the first matching element (default: first of the following elements present on the page - article, main, body)
querySource: { // the source of the text the related content search should be based on (default: content of the h1 tag)
type: 'domElement',
selector: 'h1'
},
contentGroups: undefined, // an array of content groups to be included (default: all content groups), e.g. ['Products']
limit: 3, // the maximum number of related content articles to be displayed (default: 3)
title: 'Related content', // the title of the related content block (default: Related content)
themeColor: undefined, // the theme color hex code (used to highlight links, default: #3d8fff)
showSnippet: true, // whether to show a text snippet
showDataPoints: true, // whether to show data points (default: true)
layoutType: 'grid', // the layout, 'grid' or 'list' (default: 'grid')
resultStyle: 'plain', // how to style the recommendations, 'plain' or 'card' (default: 'plain')
imagePosition: 'top', // the image position, 'top', left' or 'right' (default: 'top' for grid layout, 'left' for list layout)
grid: {
sm: 1, // number of grid columns on small resolution (767px and below; default: 1)
md: 2, // number of grid columns on medium resolution (768px - 991px; default: 2)
lg: 3, // number of grid columns on large resolution (992px - 1199px; default: 3)
xl: 3, // number of grid columns on xl resolution (1200px and above; default: 3)
},
ecom: false, // whether the ecom search api should be used (only for ecommerce projects, default: false)
dataPoints: undefined, // an array of data points (names) that should be shown (default: all available data points will be displayed)
userGroup: undefined, // the user group (ecom only)
isRelationSearch: false, // whether to use product relations (ecom only)
isVisualSimilaritySearch: false, // whether to use visual similarity to determine related products (ecom only)
includeTags: [], // array of product relation types to use to determine related products (one entry is an object like the following structure: {tag: 'tag_name', limitPerRelation: 3}) (ecom only)
includeRelations: [] // array of product relations to use to determine related products (one entry is an object with the following structure: {id: 4578}) (ecom only)
}Integration
With the Site Search 360 Search Plugin
If you're using the latest version of our search plugin (v14), you can simply add the configuration object to your ss360Config (the siteId , themeColor and ecom settings will be taken directly from your ss360Config):
window.ss360Config = {
siteId: 'mysiteid',
/
...
/
relatedContent: {
contentBlock: '#ss360-related-content',
querySource: {
type: 'domElement',
selector: '#ss360-related-content-q'
}
}
}Standalone
If you're using an older version of our search plugin (or aren't using the search plugin at all), you can easily load our standalone related content component, just include the following code right before your closing </body> tag:
<!-- SS360 Related Content -->
<script>
window.ss360RelatedContentConfig = {
siteId: 'mysiteid',
contentBlock: '#ss360-related-content',
querySource: {
type: 'domElement',
selector: '#ss360-related-content-q'
}
};
</script>
<script src="
https://cdn.sitesearch360.com/ss360-related-content.min.js
" defer></script>
<!-- SS360 Related Content End -->Query Sources
The text the related content search should be based on can be extracted from the following sources:
DOM Element
The text is extracted from the first DOM element matching a given CSS selector. By default the inner text is extracted. An attribute value can be extracted by providing the attribute name prefixed by the @ character. If a source is given, and it is not prefixed by the @ character, a property of the element will be used (e.g. innerHTML):
{
type: 'domElement',
selector: '#ss360-related-content-q',
source: '@data-query'
}Query Parameter
The text is extracted from a query parameter:
{
type: 'urlParam',
paramName: 'related-query'
}URL Regex
A regular expression is applied on the URL and the text gets extracted from a matching group:
{
type: 'urlRegex',
groupIndex: 0,
regex: '/blog/(.*)'
}Getter
The text is provided by a custom function:
{
type: 'getter',
getter: function() { return document.getElementById('tags').innerText.split(',')[0]; }
}DOM Object
The text is extracted from a JSON object that is present in the DOM (inner text of a node), you need to specify a JPath to point to the property you want to extract:
{
type: 'domJson',
objectSelector: '#products-json',
jpath: 'products[0]/name'
}Window Object
The data is extracted from an object that is attached to the window, you need to specify a JPath to point to the property you want to extract:
{
type: 'windowJson',
propertyName: 'Products',
jpath: 'data/name'
}Static
The text is a static value:
{
type: 'static',
value: 'cheesecake'
}Integration Example
The following example will display up to 3 related products on your blog pages, up to 3 related blog posts on your blog pages, and no related content on all other website pages. The related content will be resolved based on the text of your h1 heading.
var href = window.location.href;
var isProductPage = href.indexOf('/p/') !== -1;
var isBlogPage = href.indexOf('/blog/') !== -1;
if (isProductPage || isBlogPage) {
window.ss360RelatedContentConfig = {
siteId: 'mysiteid',
contentBlock: '#ss360-related-content',
querySource: {
type: 'domElement',
selector: 'h1'
},
title: isProductPage ? 'Related blog posts' : 'Related products',
contentGroups: isProductPage ? ['Blog'] : ['Products'],
limit: 3
};
var relatedContentScript = document.createElement('script');
relatedContentScript.setAttribute('defer', 'defer');
relatedContentScript.setAttribute('src', '
https://cdn.sitesearch360.com/ss360-related-content.min.js
');
document.querySelector('body').appendChild(relatedContentScript);
}