Product Listing

Filterable and searchable listing of products or resources.

View a live demo of this module.

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)

product-listing

product-listing-filtered