Product Listing

Filterable and searchable listing of products or resources.

Content

• Select to enter resources manually or pull from a HubDB
• If entering resources manually: 
  • Include an image, title, description, date, price, rating, tags, and/or link
  • Add filters that mirror the tags included in your resources
  • Allow multi-select in the filters
  • Select a filter to group items by on unfiltered view
• If pulling resources from HubDB:
  • Select HubDB table
  • Map columns to image, title, description, date, price, rating, tags, and/or link
  • Map columns to filters
  • Allow multi-select in the filters
  • Select filter to group items by on unfiltered view
  • Add a query to the HubDB function to pull in only certain items (refer to the official HubDB documentation for information on how querying HubDB tables works)
  • Set a limit on how many items to pull in
  • Set an offset to skip pulling in a certain amount of items
  • Set a column to sort by on default
  • Reverse the sort of the selected sorting column
• Select what options to include in the sorting dropdown on the filtered view (newest, price low to high, price high to low, rating)
• Select what option to sort by default on the filtered view (newest, price low to high, price high to low, rating)
• Change the currency format (locale, currency, max decimals)
• Edit text strings used throughout the module (filter label, view all text, search label, submit search button text, sorting labels, slider aria labels, etc.)
  
  

Styles

• Set Dark Mode
• Show/hide search bar
• Show/hide sorting dropdown
• Show/hide tags
• Change number of items to show per page
• Change number of items to show per page on desktop and tablet
• Change spacing between rows, columns, and groups
• Set dark mode on cards
• Change background color of cards
• Truncate title to limit the title to a certain number of characters before hover for a more consistent look across cards with varying title lengths
• Set a minimum height on the title before for a more consistent look across cards with varying title lengths
• Truncate description to limit the description to a certain number of characters so it doesn't overflow the card
• Change aspect ratio of images
• Set object fit of images (cover crops the image to fit the aspect ratio, contain resizes the image to fit inside the aspect ratio)