Related Items

With the Related Items content item, you can display a list of profile or product pictures based on the results of an IQA query. For example, you can write a query to display the profile pictures of everyone who has registered for an event, made a donation, or ordered a particular product, or to display products in the same category. You can configure the list to display horizontally or vertically, to display a name for the item, and to choose the size of the image. You also have the option to make the profile picture a live link that opens a URL of your choosing, such as the member profile page.

Viewing a Related Item content item example

Related Items configuration options

This content item uses the Common content item configuration options, in addition to the following:

  • Source query - Click select and browse to the IQA query for which you want to see results in the list.
  • Maximum results - Enter the total number of results to be displayed.
  • Description - If you want a description to be displayed below the title and above the list, enter the text for the description here. The variable {0} can be used in the description to display the total record count number. For example, {0} people also bought this product.
  • No results found message - Message displayed if no results are returned. If this field is blank, no message is displayed to the user when there are no results.

Filter options

You can dynamically filter the query results based on the value of a particular property. If a Filter column is selected, the content item looks for a URL parameter to set the value for that property. The name of the URL parameter is defined in the Filter on URL parameter field. For example, to filter the query to show only the category passed in the URL (for example Category=GIFTS), choose the ProductCategory column and specify Category as the URL parameter.

  • Filter column - Select a data column on which to filter the query results.

    • Note: Each property you select on the Display tab of your query in IQA is available as a Filter column option.

  • Filter on URL parameter - Enter the URL parameter name by which you want to filter values. You can use an existing URL parameter, for example Category, or you can enter a unique value.

Display options

  • Default item image - Enter the full path file name for the image to display when a query result has no image.

    • Example: /images/MySite/default_product.jpg.

  • Item image size - Choose a size for the images that are displayed for the query results.
    • Custom image size - If the Item image size is Custom, specify in pixels the size the image should be displayed.
  • List orientation - Choose whether to display the list of results horizontally or vertically.
    • Enable horizontal scrolling - If the List orientation is Horizontal, select this option to display the results in a scrollable list. If this option is enabled, the Tooltip option is not available for Display item name as.
    • Scroll width - If Enable horizontal scrolling is enabled, enter the number of pixels for the width of the scrollable list. A value of 0 sets the width to 100% of the column where the content item is placed.
  • Display item name as - Choose whether to display the name of each result as a tooltip when the user hovers over the image or as a label which appears below the image. The source query must include a column with an alias of Name in order to display an item name.
    • Label length - If displaying the item name as a label, choose the number of characters to display in the label. Names longer than this value will be truncated.
  • Items link to (URL or shortcut) - The URL or shortcut used when the image is clicked. If blank, the image is not clickable. The URL might be relative to the website root; for example the link to http://www.example.com/Member/iMIS/ContactManagement/ContactLayouts/Account_Page.aspx can be entered as Member/iMIS/ContactManagement/ContactLayouts/Account_Page.aspx. URL parameters can be added to the URL or shortcut. To dynamically add the value of an item property, you can include the property or column name as a variable by enclosing it in {}. For example, to include a product ID in the URL where the column name for product ID is key_Id, you can append ?iProductID={key_Id} to the URL. For queries that return contacts, the ID value of the contact is automatically appended to the URL.

Notes

For sample queries that work with this content item, see $/Samples/RelatedItems and $/Samples/QueryProfilePictureList in IQA.

Guidelines for working with the Related Items content item
  • The pictures displayed in the content item are based on iMIS product or contact IDs. When creating the query for this content item in IQA, you must select a property that returns an iMIS product or contact ID on the Display tab. Give this property an Alias of key_Id (the Alias is case sensitive).
  • To define the image to display for each record, include a column in your query that specifies the image file name for that record. Give this property an Alias of Image.
  • To display a name for each record, include a column in your query for the name of the item or contact. Give this property an Alias of Name.
  • When you add Display columns to the query in IQA, they become available within the content item as Filter columns on which you can filter.
  • You can dynamically filter the query results displayed in the Related Items content item based on the value of another content item’s URL parameter. For example, you can set up your donation page to display the profile pictures of people that have donated to a particular cause (called a gift item in iMIS). Donation Creator uses the URL parameter itemid to determine which gift item the donation should go towards. If you add your content item to the same content record as the Donation Creator, then you can set up the Related Items content item to look at the value of itemid to determine which profile pictures to display. Ensure that your query includes the CsActivity.Product Code property, so that you can select it as a Filter column on the content item’s configuration page. Once selected, enter itemid for the Filter on URL parameter, so that the content item knows to filter the results based on that URL parameter’s value.
Example: Display other products in the same category

In this example, the Related Items content item is set up to display clickable images for other products in the same category as a particular product. This example uses content installed for the sample Member site.

  1. Go to Page Builder > Manage content.
  2. Click Core Content > Shop > Store Layouts > Item Detail.

    3. Note: The Item Detail content record displays product pages in the Member sample site’s Shop. The product displayed is based on the value of the URL parameter iProductCode.

  3. Select Add content > Commerce > Related Items.
  4. For the Source query, click select. Navigate to $ > Samples > RelatedItems and select Related Products.
  5. In the Filter column drop-down, select ProductCategory.
  6. In the Filter on URL parameter field, enter Category.
  7. In the Items link to (URL or shortcut) field, enter: 
    ItemDetail?iProductCode={key_Id}&Category={ProductCategory}
    This uses the ItemDetail shortcut to link each item in the list to the product page. The particular item’s product ID and category are specified in URL parameters so that the correct product and related products are displayed in the resulting product page.
  8. Click Save & Publish.
Example: Display other users who have purchased a product

In this example, the Related Items content item is set up to display clickable profile pictures of other users who have bought a particular product. This example uses content installed for the sample Member site.

  1. Go to Page Builder > Manage content.
  2. Click Core Content > Shop > Store Layouts > Item Detail.

    3. Note: The Item Detail content record displays product pages in the Member sample site’s Shop. The product displayed is based on the value of the URL parameter iProductCode.

  3. Select Add content > Commerce > Related Items.
  4. For the Source query, click select. Navigate to $ > Samples > QueryProfilePictureList. Select Orders.
  5. In the Filter column drop-down, select ProductCode.
  6. In the Filter on URL parameter field, enter iProductCode.
  7. For the Items link to (URL or shortcut), enter: 
    MBR/Party.aspx
    This redirector web page looks for an ID in the URL parameter, and then checks the ID’s party type and the user’s permissions to determine which content record to display. The user’s ID is appended to any URL specified in this field.
  8. Click Save & Publish.