Skip to main content

Favoriting

Terminology​

  • Favorite: A favorite is a content or object ID stored in relationship to a user. It may be simple (just a content or object ID in a flat list), or collection-enhanced (stored in a nested object that includes user-defined collection details such as Title, Description, and Featured Item ID)
  • Favorite type: A favorite type is a configuration that defines what UI options a user will be presented with when "favoriting" a post or object.

Favorites Settings​

General​

  • Status
  • Name Mode [Simple|Collection-enhanced]
  • Migration wizard (priority low)
  • Terminology (Verb, Noun singular, Noun plural)

Content Management​

  • Post types
  • User types
  • Show to logged out users
  • Algolia Integration

Favorite Button​

The Favorite Button section provides settings to customize the frontend appearance of the add to favorites button.

  • Button wrapper and wrapper class: the button wrapper option allows selection of the HTML tag that will be used to wrap the reaction action. The wrapper class option allows the user to add a space-separated list of classnames that will be applied to the wrapper on the frontend. The available options for Button wrapper are: [Button:default|Anchor (a)|Div|Span]
  • Button type: allows the user to customize what elements appear on the reaction button. [Icon and Text:default|Icon Only|Text Only]. When set to Icon-only mode, the button text should still appear in the DOM as an aria-label or visually-hidden span.
  • Button Style: button styles can be adjusted for Default (no reaction) and Active (has reaction) states. Each styling setting (as opposed to content settings) can be locked with an icon button to make its value match between the Default and Active state tabs. When the lock icon is selected for an option it will be set to disabled in the Active state tab. Each tab contains the following settings:
  • Button size: alters a sizing modifier classname on the reaction button wrapper [Extra-Small|Small|Medium:default|Large|Extra-Large]
  • Border: styles border-width value on button wrapper
  • Radius: styles border-radius value on button wrapper
  • Icon type: determines which icon selection modal is opened by "Select icon" option [Icon|Emoji|Custom]
  • Alignment (icon): determines DOM order of icon and text
  • Default background color: styles background-color value on button wrapper
  • Default border color: styles border-color value on button wrapper
  • Hovered background color: styles background-color value on button wrapper when hovered
  • Hovered border color: styles border-color value on button wrapper when hovered
  • Icon: The icon field displays the currently selected reaction icon, and contains a button that opens the appropriate icon selection modal based on the Icon Type selection
  • Default icon color: styles the color/fill value on the icon svg element. Not applicable to emoji-type icons
  • Hovered icon color: styles the color/fill value on the icon svg element when the wrapper button is hovered. Not applicable to emoji-type icons
  • Default label color: styles the color value of the label element
  • Hovered label color: styles the color value of the label element when the wrapper button is hovered
  • Label: defines the react action label text
  • Tooltip: defines the text in the tooltip displayed when the wrapper button is hovered
  • Wrapper class: defines state-specific wrapper classes input as space-separated list