Use
Use this widget to embed related Path page links from a product detail page.
To use the related pages widget:
- Add a script tag reference to the page you would like to display related links on.
<script type='text/javascript' src='https://[PATHSERVER]/Scripts/related-skus.min.js' data-organization="[ORGID]" data-element="#relatedSkusEl" data-limit="10">
</script>
- Add an html element to your page in the location where you would like related links injected.
<div id="relatedSkusEl"></div>
Script parameters.
The script is configured using these attribute values:
- data-organization(required): Your AddStructure organization key.
- data-element(required): A valid css selector used to indicate which element on the page should be populated with related links.
- data-limit(optional): The desired number of links to output to the page. 10 items will be output by default. The maximum requested value is 20.
Output
<div id="relatedSkusEl">
<ul class="as-related-list">
<li class="as-related-list-item">
<a href="http://example.com/example_path1">example page 1</a>
</li>
<li class="as-related-list-item">
<a href="http://example.com/example_path2">example page 2</a>
</li>
<li class="as-related-list-item">
<a href="http://example.com/example_path3">example page 3</a>
</li>
<li class="as-related-list-item">
<a href="http://example.com/example_path4">example page 4</a>
</li>
</ul>
</div>
The link list container ul will have the class as-related-list and each list item will have the class as-related-list-item for styling. If no element is specified, nothing will be output to the page.