“My Favorites” in Bricks

This Pro tutorial provides the steps to set up and use My Favorites in Bricks Builder.

Step 1

Install and activate My Favorites plugin. There are no settings to be configured for this plugin.

Step 2

To add the favorite heart button, edit your Template with Bricks and add this shortcode via a Shortcode element:

[ccc_my_favorite_select_button]

That will output an empty heart icon that gets filled when the user clicks on it to indicate that it has been added to the user's favorites.

Step 3

If you have a profile page in your site for each logged-in user and wish to show a link to the favorites page – /favorites (to be created in the next step), add this shortcode:

[ccc_my_favorite_list_menu]

Step 4

Create a Page called Favorites.

We are going to cover 2 ways in which the logged-in user's favorites can be shown.

1. Plugin shortcode
2. Query Loop

Plugin shortcode

Advantage:

• Favorited items can be unfavorited using the - icon. The plugin uses AJAX to remove any unfavorited item from the DOM.

Disadvantage:

• Not possible/easy to modify the HTML output.

Edit Favorites Page with Bricks and add this shortcode:

[ccc_my_favorite_list_results]

At Bricks → Settings → Custom code → Custom CSS, add

.post-ccc_favorite .title-post {
	font-size: 1.2em;
	margin-top: 0.5em;
}

which results in, for example:

Query Loop

Advantage:

• Total control of the HTML output. We can decide what data should be shown for each post.

Disadvantage:

• There will be no AJAX way to delete the unfavorited item. The heart icon will toggle between unfilled and filled states when any item is unfavorited/favorited and the item (like post/page) will remain on the page.