With the 1.6.0-GA release of Broadleaf Microservices, we introduced advanced tagging and badging features for Products. Although products already supported a collection of simple tags that can be used for filtering and categorizing, the new Advanced Tags better empower merchandisers to improve search and browse experiences for their users and better organize their catalogs. They can be used to enhance product merchandising in the following ways:

  • Create search filters
  • Add search terms
  • Display badges with configurable positions, rich text, and assets

Moreover, they are reusable across products and catalogs and can be configured to be active between certain dates. Thus, a “New” tag could be applied to a product and set to automatically be hidden after a few months without the merchandiser having to go through all the products to remove it manually from each.

Hot Sauces with Tags

Setting up an Advanced Tag in the Admin

Let’s take a look at how we set up the “On Sale” and “New” tags in the admin. You’ll find Advanced Tags under the “Catalog” section in the navigation. Let’s click on it and select the “New” tag to investigate.

Advanced Tag admin screen

Basic Fields

First, we see the name field. Every tag has a name, and this is a simple display value for the tag. It must be unique and it’s translatable. This is what will be displayed as a filter value, what will be used as a search term, and, if the tag is meant to be displayed as a badge, the default text to display.

Next, each tag has an active start and end date. These control the activeness of the tag in general, independent of any relationship to a product. We’ll see in a moment that the relationship between a Product and Advanced Tag can also have active start and end dates. These are subordinate to the dates on the Tag itself.

We also see that there is a flag that controls whether to use the name as a search term. This is present because there may be tags that don’t make sense as search terms such as “20% Off” but they could still be badges and would be interesting for users to see as filters.

Note
In this initial release, we haven’t included any special logic to automatically apply the “On Sale” tag. In the future, we plan to add that ability based on configurable rules.

Displaying as a Badge

The next set of fields control how to display a badge on a product: type, display position, badge message, badge asset, and priority.

Type

The type is a set of arbitrary values that group tags together such as Feature, Attribute, Discount, or Generic. Along with display position these help categorize tags and prioritize which will be displayed. For example, you may only want a single Discount type tag shown on a Product even if multiple might apply.

Display Position

Likewise, display position controls where on the product to display the tag. This comes with several values by default like top-right, top-left, bottom-right, bottom-left. It also has a None option for if no badge should be displayed for the tag, which is the default. Badges usually display over the Product’s image on the storefront, and the default values for position are set up accordingly.

Customizing Type and Display Position Values

It’s possible to change the values for both type and display position easily in the admin using metadata augmentation. At the top left of most forms, including the Advanced Tag form, you will see a “Customize Form” button.

Customizing forms in the admin

Click this and then hover over type. You’ll see it highlighted in green with a gear icon in the top right. Then select “Edit Field”

Field highlighting for augmentation

Now, you should see a form that lets you edit the field label and “Allowed Options” among other things. The allowed options are what you would edit to create or remove values.

Field highlighting for augmentation

Badge Message and Asset

Badge message allows defining the display value for the tag using HTML. This would override the name when displaying over the Product’s primary image and is translatable. Badge asset allows you to link an image to be displayed rather than using HTML. Although, it is up to how your storefront app is set up whether badge message and badge asset are mutually exclusive or used together.

Priority

Finally, we come to priority. This provides a little more control over how conflicts are resolved when multiple tags could apply to the same position or have the same type. The lower the number the higher the priority. Tags can also be ordered directly on a Product they apply to.

Adding a Tag to a Product

The next step after creating an Advanced Tag is to add it to a Product. There are two ways to do this. One is to look up the product from the Advanced Tag’s screen, and the other is to go to the Product’s screen and lookup the Tag.

Adding a Tag to a Product from the Tag Screen

The first step is to select an Application. While Advanced Tags can be created at the Tenant-level, to associate a Product with one form the Tag’s screen currently requires moving to a specific Application’s context. This has to do with the way catalog entities like Product interact with non-catalog entities like Tags.

After selecting an application, navigate to Advanced Tags and select or create a tag. After creation, you’ll see a new section called “Products.” Select it. You will see a table listing the related products.

Advanced Tag's Product grid

To add a new product, hit the add button, look up the desired product, set the active date range (optional), and hit submit.

Create form for adding a Tag to a Product

Now you can promote and deploy the change and we will be able to see it on the frontend.

Showing newly added tag on Sudden Death storefront

Adding a Tag to a Product from the Product Screen

Navigate to a Product, and you will see a section on the left for “Tags and Badges” with an entry for “Tags.” Select that. Just as Tags had a Product grid, now Products have an Advanced Tags grid—not just the simple tags input. However, this grid does have one difference: It supports reordering the tags on a product. This feature behaves just as with reordering Products within a Category.

Product's Advanced Tag grid

Making It Filterable

To make a Tag filterable, you will need to create a Search Field targeting it and configure it to be “facetable.” Broadleaf provides Search Fields for this out-of-box. In addition, Broadleaf uses the type field on Advanced Tag to group them by type when displaying filters. In the following example, note “Attribute” and “Discount Type” are based on the default types for tags.

Filters based on tags on the storefront

Let’s look at how the “Discount Tags Facet” field is set up. Note that you’ll have to go to the Tenant-level admin to see Fields. The main things to look at here are the “Property Path” and the “Faceting” group. These are the main fields we use to group tags by type and set up filters.

The property path uses JSON path syntax to target the field on the product. This also allows us to target specific tags by their type. We do something similar to create a Search Field that makes only Tags marked as “searchable by name” searchable.

Highlighting the important fields of the Search Field form

An additional feature available in the Next.js starter app for the storefront offered by Broadleaf is to hide any badges that match the active filter on the storefront. This is a recommended practice by Baymard Institute experts in best UX practices. The reason behind this is that when a filter is active such as on the “New” tag, then all of the results will have that same badge. Therefore, it’s redundant to display it. Moreover, by hiding it the user’s attention will be drawn to whatever other badges or pricing present that distinguish the rest of the results from each other, enhancing their ability to focus on what matters most to them.

Conclusion

To conclude, Advanced Tags provide merchandisers with more power to improve user experiences when searching, filtering, and browsing for Products than before. They are highly reusable, translatable, and offer rich text and image support for displaying over Products. Check out Broadleaf 1.6.0-GA or later to take advantage of this new feature!