Favorites System

Build a favorites/bookmarks system where logged-in users can mark items as favorites and view their favorited items on a dedicated page.

How User Stores Work

WP-Nexus provides a built-in user store system. Each store is a named collection of item IDs per user. The stores are managed via pipeline nodes and queried via expression functions:

• Add to Store node -- Adds an item.
• Remove from Store node -- Removes an item.
• Get Store Items node -- Lists all items in a store.
• in_store(name, id) expression -- Checks if an item is in a store.
• count_store(name) expression -- Counts items in a store.

Database Table

Assume a products table:

Column	Type
id	int
name	varchar
price	decimal
image_url	varchar
description	text

Product Listing with Favorite Toggle

UI Layout

Repeater (products data source)
  └── Card
      ├── Image (src: "`{ {row.image_url}}`")
      ├── Heading ("`{ {row.name}}`")
      ├── Text ("$`{ {number_format(row.price, 2)}}`")
      └── Toggle Favorite (storeName: "favorites")

How Toggle Favorite Works

The Toggle Favorite widget automatically:

1. Displays a filled heart if the item is in the store.
2. Displays an outlined heart if the item is not in the store.
3. On click, adds or removes the item from the store.
4. Requires the user to be logged in.

Configure:

storeName: "favorites"

The widget automatically uses the current row's id as the item ID.

Favorites Page

UI Layout

Container
  ├── Heading ("My Favorites")
  ├── Text ("`{ {count_store('favorites')}}` items", visibility: "logged_in")
  ├── Text ("Please log in to view favorites", visibility: "logged_out")
  └── Repeater (favorites data source, visibility: "logged_in")
      └── Card
          ├── Image (src: "`{ {row.product.image_url}}`")
          ├── Heading ("`{ {row.product.name}}`")
          ├── Text ("$`{ {number_format(row.product.price, 2)}}`")
          └── Toggle Favorite (storeName: "favorites")

Favorites Data Source Pipeline

Get Store Items (storeName: "favorites")
  → Lookup (tableId: products, localField: "item_id", foreignField: "id", outputField: "product")
    → Filter (field: "product", operator: "not_empty")
      → Result

The pipeline:

1. Get Store Items fetches all favorited item IDs for the current user.
2. Lookup enriches each entry with the full product data.
3. Filter removes entries where the product no longer exists (deleted products).

Favorite Count in Navigation

Display the number of favorites in a navigation badge:

`{ {count_store('favorites') > 0 ? count_store('favorites') : ''}}`

Set visibility to logged_in.

Conditional Styling Based on Favorite Status

Use a custom CSS class state on product cards:

className: "is-favorited"
expression: "in_store('favorites', row.id)"

Then style .is-favorited with a different border or background color.

Variations

Wishlist instead of favorites

Use storeName: "wishlist" everywhere instead of "favorites". The pattern is identical.

Multiple store types

Create separate stores for different features:

• favorites -- Heart icon, general favorites.
• bookmarks -- Bookmark icon, save for later.
• cart -- Shopping cart items (see Shopping Cart tutorial).

Show "recently favorited" with sort by date

The Get Store Items node returns entries ordered by created_at DESC (newest first), so the most recently favorited items appear first automatically.

TIP

The Toggle Favorite widget is the easiest way to implement favorites. It handles the add/remove toggle, login check, and visual state automatically. For custom toggle behavior, use Button widgets with Add to Store / Remove from Store action pipelines.