Blogs

I have recently created a new custom fragment which creates dynamic overlay badges for Commerce Products, and I am in the process of publishing it it is available as a marketplace application.

https://marketplace.liferay.com/p/dynamic-badge-overlay-fragment

While the badges are all fully configurable, there are three use cases which are catered for.

• Low stock
• Offer / discount
• New products

The obvious dependency for this fragment is Commerce Products, so if you have not already set up Commerce in your Liferay DXP instance then this is a great opportunity to look at the Commerce Classic Site Initialiser!

This site initialiser not only creates a Commerce site with 50 products but is also a great way to explore some of Liferay’s more recent Commerce features, such as Order DPT, Returns, B2B Guest Checkout and Multi-shipments.

If you already have Commerce set up, then you can skip this section.

Set up Commerce

The easiest way to get a new Commerce site up and running is using the site initializer. This feature is currently behind a Beta Feature Flag (LPD-20379) and so you need to enable that before trying to create the site.

As mentioned, you may want to look at some of the other recent features, in which case why not enable the B2B Guest Checkout (LPD-35678) and Returns (LPD-10562) which are both Release Feature Flags.

Once you have enabled the feature flags, head to the Sites section of the Global menu and create a new Site in the usual way using the Commerce Classic template.

Language Override (optional)

This is an optional step, but it can be very valuable because it replaces all the label and description placeholders with a more friendly name and explanation of what each configuration option does.

At the time of writing this blog, I had not found a way to include the language override file with the fragment itself, so I have included it in the GitHub repo which contains the source code of the fragment.

• Download the raw language file from here.
• Import it into your Liferay DXP instance via the Language Override screen within the Global menu. It can be found under the Control Panel section.

Using the Fragment

• Create a new content page within the Commerce site. For the sake of simplicity, you can simply call it Promotions and base it on the Commerce Classic master page.
• Drop a Collection Display on the page and then configure it to use the Commerce Products collections provider.
• From this point you can apply whatever formatting you want but my own preference is to update the Collection Display configuration to use a 3-column grid layout.
• Drop a Product Card into the Collection Display. You should have something that looks like the screenshot below.

• Edit the page and add the Dynamic Badge Overlay fragment somewhere within the Collection Display. You will now see a drop zone.

• Now simply drag and drop the product card into the drop zone of the Dynamic Badge Overlay fragment.
• The final step is to map the fields on the Dynamic Badge Overlay fragment so that it can retrieve the product information it needs to generate the badges. It does this via the Headless API.
  1. In the Browser map the product id and SKU to the associated fields of the collection fields, i.e. 01-product-id needs to be mapped to the Product Id field and 02-sku needs to be mapped to the SKU field. 

• At this point you may notice some discount badges are created for some of the products with discounts.

• You can also move to the 2nd page to see that the Power Steering Pump currently has low stock.

Feel free to play around with the configuration of the fragment, however, you may want to look at the Configuration section to understand more about the supported use cases.

References

GitHub - https://github.com/peterrichards-lr/liferay-fragments/tree/main/commerce/fragments/dynamic-badge-overlay
Marketplace - https://marketplace.liferay.com/p/dynamic-badge-overlay-fragment