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.

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.

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.

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”

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.

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.

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

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

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.

Making It Filterable

You will need to perform a few steps to make a Tag filterable. You will need to create a search field targeting the tag, create a facet using the field, and finally associate the facet with the appropriate facet group.  Broadleaf provides search fields, facets, and facet groups for this out-of-box experience. 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 tag types.

Let’s look at how the “Discount Tags Facet” field is set up. Note that you must go to the Tenant-level admin to see Fields. The main things to look at here are the “Property Path.” 

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.

Next, we’ll set up the actual Search Facet. Here, you’ll notice that the facet is simply a reference to the Search Field we created, along with several options that tell the system how the facet should behave. In this case, we have set up the facet to be multi-selectable, allowing the user to filter by multiple tags simultaneously. If our search field was numeric, we could also set up the various searchable ranges here. The final option is to make it a “ruled facet.” This is useful if you only want to show the search facet in specific scenarios.

The final step to get our facet to show up is to add it to the appropriate Facet Group. Out of the box, Broadleaf provides two Facet Groups, one for the admin tool and one for the storefront. In this case, we want our “Discount Type” to show on the storefront, so we’ve added it to the “Store Product Facets” group.

We’ve completed the steps to enable our new search facet on the storefront application. In Broadleaf, the ability to configure these fields and facets has been developed to give the user maximum configurability and reusability. 

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!