Pulse Of The Blogosphere

Favorites in Bricks

—

por

admin
en

Updated on 1 Apr 2024

This Pro tutorial provides the steps to add a Favorite button for each post in the posts list on the posts page (can be any/all archive page/s) and a “My Favorite” Page where the currently logged-in user can see the posts that he/she has favorited when using the Favorites plugin in a Bricks site.

Posts page (blog posts index):

My Favorites Page:

We will also display a message that reads “You are either not logged-in or do not have any posts favorited yet.” instead when the currently logged-in user either does not have any favorite posts or if a non logged-in visitor is viewing the page.

Note: The plugin also has support for anonymous users i.e., those that are not logged-in.

Step 1

Install and activate Favourites plugin.

In the plugin’s settings uncheck “Output Plugin CSS” and save changes.

In the “Display & Post Types” tab, enable the plugin for your desired post types. Posts are selected by default.

Button Type: Custom Markup

Unfavorited button markup:

<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z"/></svg>

That’s the HTML of heart SVG downloaded from Google Material font from here with these settings:
Fill: 0 Weight: 400 Grade: 0 Optical size: 20

Favorited button markup:

<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Z"/></svg>

Save changes.

Step 2

Edit your blog posts index template or any archive page template with Bricks.

Add a Section and either add a Posts element inside its Container or a Container on which Query Loop is enabled.

In this example, we shall use a Posts element.

Select the Posts element and add a field having this dynamic data:

<div class="favorite">[favorite_button]</div>

HTML tag: div

Enable Overlay to make the favorite buttons be positioned absolutely overlayed on top of the posts’ featured images.

Add this CSS:

.favorite {
	background: rgba(17,17,17,.6);
	position: absolute;
	right: 10px;
	top: 10px;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
}

.simplefavorite-button {
	background: none;
	outline: none;
	fill: #fff;
	width: 20px;
	height: 20px;
}

.favorite:hover {
	background: rgba(17,17,17,.65);
}

View your page on the front end and favorite a few posts for testing by clicking the heart buttons.

Step 3

Whitelist get_user_favorites_count function.

Refer to and https://academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/ and https://brickslabs.com/whitelisting-echo-functions-in-bricks-1-9-7-and-above/.

Step 4

Let’s set up a page where the users can see their favorite posts.

Create a static Page titled say, “My Favorites” and edit it with Bricks.

Copy the Section containing the posts from the previous step and paste it.

Apply these conditions to this Section:

The line of Dynamic data code:

{echo:get_user_favorites_count}

If you do not want to restrict the functionality to only logged-in users, remove the ‘User login’ condition so it looks like this:

Add another Section.

Add a Heading inside the Section’s Container having text that reads something like:

You are either not logged-in or do not have any posts favorited yet.

Apply these conditions on the Section:

To use OR instead of ADD when setting up a condition, you need to click the + icon that is to the right of CONDITIONS heading after adding the first one.

If you do not want to restrict the functionality to only logged-in users, remove the ‘User login’ condition so it looks like this:

Step 4

We need to now filter the posts on My Favorites Page to only those that current user has favorited.

This can be done using the bricks/posts/query_vars filter.

Add the following in your child theme’s functions.php or a code snippets plugin:

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	// if Favorites plugin is not active or if we are not on My Favorites Page, return the query vars
	if ( ! class_exists( 'Favorites' ) || ! is_page( 'my-favorites' ) ) {
		return $query_vars;
	}

	if ( $element_id === 'vroxmu' ) {
		$query_vars['post__in'] = get_user_favorites();
	}

	return $query_vars;
}, 10, 3 );

Replace vroxmu with the Bricks ID of your Posts element or the query loop-enabled element.

Reference

https://wpdevdesign.com/how-to-show-users-favorite-posts-in-oxygen/