This element allows users to mark content (such as products or posts) as favorites using a button element, with customizable styles and behaviors. The feature is highly flexible, with support for user-based and cookie-based storage, counter displays, and icon management.
Settings
Scope: Defines the storage method for favorites.
user: Favorites are saved per logged-in user.cookie: Favorites are saved locally in the browser via cookies.
Key: Unique identifier for the favorites list. Changing the key resets the stored favorites.
Allow Removal: Users can remove an item from their favorites list when enabled.
Cookie Expiration: The number of days a cookie-based favorite is stored. It defaults to 365 days. Set it to 0 for session-only storage.
Visitor Restrictions (User scope only):
Hide Button for Non-Logged-In Users
Login URL: URL to redirect users for authentication if the button is visible to visitors.
Counter:
Displays the total number of favorites.
Allows alignment (left/right) and visual customization (spacing, separator, icon).
Style
The button supports all native Bricks style controls, including:
Size and layout options (block, circle)
Icon position and spacing
Button styles based on state (add/remove)
Background and border customization per state
Icon and counter rendering inside the button
Compatibility with Other Features
Add to Favorites integrates smoothly with:
Clear Favorites: To clear the favorites list
Favorites Action for Bricks Form: To pass the favorites data to the forms
Usage Summary
Insert the Add to Favorites element where applicable (e.g., inside a post/product template).
Configure scope and key appropriately based on your storage needs.
Optionally enable counter and icon display for enhanced UX.
Combine with Clear Favorites or Favorites Action for advanced flows.
This feature offers a robust solution for creating interactive and personalized experiences for visitors on Bricks-powered websites.