Adding the Rich Text and Linked Product List components

October 8, 2024

You can use the Rich Text component as side content on the left or right side of a page. The component shows product lists with references from the main rich text.

You should use the Product Lists component along with the Rich Text component.

To add the Rich Text and Linked Product List components:

  1. Open your site project in edit mode and navigate to the page in which you want to add the component.
  2. Click Any content where you want to place the product list. In the dialog, find and select the Rich Text component.
  3. Click OK.
  4. In the Edit Content page, you can add plain text or HTML content to the component, as shown in the following example.
  5. Click Save to save the new content for the component. The page that you add the component to displays again.
  6. In the side area, click Add content where you want to place the linked product list. In the dialog, find and select the Linked Product List component.
  7. Click OK.

The page that you add the component to displays again. You should see the Rich Text and Linked Product List components both on same page. Next, you should link these two components.

Linking the Rich Text and Linked Product List components

To link the Rich Text and Linked Product List components:

  1. Click the pin icon and move the mouse to the rich text area which you want to link.
  2. Double-click the Rich Text component to configure the products that you want to reference and show on the right side.
  3. In the Edit Content page, choose Options in the left menu.
  4. Enable the productReference option.
    Screen Shot 2018-10-25 at 13.53.20.jpg
  5. Then add the products you want to link to.
    Screen Shot 2018-10-25 at 13.54.51.jpg
  6. When you finish choosing the linked products, continue with the rich text editor in Content tab.
  7. Click the Macros drop down menu and select the '##'producthighlight'##' item. Click to add the macro into the content body. You can edit the display text and the index of the referenced product.
    For example, to show “product highlight 1” for the number 1 product from the referenced list, enter:
    '##'producthighlight(proudct highlight 1, 1)'##'
     
    To use the code sample, you must remove the ' sign from the examples to change  '##' to ##.
  8. Click Save to confirm.

Now, you should be able to see the highlighted text with the linked products as below. When a user hovers their mouse over the highlighted text on the left side, the linked product on the right side will be highlighted.