Related Page Widget (Listing Page)

Use

Use this widget to embed related Path page links from a product listing, category, or other content page.

To use the related pages widget:

  1. 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-pages.min.js' data-organization="[ORGID]" data-element="#relatedPagesEl" data-limit="10">
  </script>
  1. Add an html element to your page in the location where you would like related links injected.
  <div id="relatedPagesEl"></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="relatedPagesEl">
	<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.