“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.

Import this (mirror) section Template and insert it in your Favorites Page.

We need to pass an array of post IDs that user has favorited to the query.

Add this in child theme‘s functions.php:

// Limit posts to those favorited by the currently logged-in user.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( 'ba4bba' === $element_id ) {
		$query_vars['post__in'] = explode( ',', get_user_meta( get_current_user_id(), 'ccc_my_favorite_post_ids', true ) );
	}
	
	return $query_vars;
}, 10, 3 );

Replace ba4bba with the ID of the container element on which query loop is enabled w/o the brxe- part at the front.

If you wish to set up the loop manually w/o importing the section Template remember these two things:

1) Set Posts per page in the GUI to -1 to fetch all matching posts.

2) For the heart icon, add a Container and inside that, a Button element.

Add this class to the Container: ccc-favorite-post-toggle

Add these classes to the Button element: save and ccc-favorite-post-toggle-button

For the button element, set the Link type to External URL and the URL to #.

3) Remember to add the PHP code to limit posts to user’s favorites given above.

---

Reference

https://stackoverflow.com/a/1125740/778809