Blogs

Override Taglib Mini Shopping Cart (with React) in Liferay Commerce

Roselaine Marques

julio 21, 2021

Lectura de 5 minutos

IMPORTANT: this blog post was done with Liferay Portal version 7.4.1 GA 2, which you can use as your guide, but you need to adapt to your own version (CartItem.js file and dependencies from .npmbundlerrc and package.json if needed).

NOTICE: This blog post has Spanish and English version.

When you start to build an e-commerce website with Liferay Commerce, you might be faced with a requirement from a customer to personalize the “Mini Shopping Cart”.

You can use a Widget Display Template to create your own entire custom style and apply it to the “Mini Cart” module. But suppose you want to make just a minor change , because you like the mini-car commerce taglib styles and you don’t want to have to create an entire structure and style with a freemarker.

So... you start to look at how to override some part of the existing cart in Liferay Commerce (of course because we don’t want to reinvent the wheel, we only want to maybe add some small piece, or hide some existing part in this cart). But to your surprise, there is not a “standardized Liferay way” to override it.

It is not a JSP which we are comfortable with and know how to handle. It is a Taglib built with React files…

Don't panic, here I have the step-by-step recipe on how to do it.

First of all…

Go to your Liferay Portal > Control Panel > Sites > click to add a new site and select a SpeedWell Template, to create a new e-commerce Site for our test with the mini cart.

Go to the Catalog page and add some products to the cart. At the top right hand corner you can see the mini cart with the new product added. Here is the piece with which you’ll learn how to customize in this blog post.

So, let's get to know the code a little bit. It’s useful to know and understand the taglibs from Liferay Commerce, here is a link to help you: https://github.com/liferay/liferay-portal/blob/7.4.1-ga2/modules/apps/commerce/commerce-frontend-taglib/src/main/resources/META-INF/resources

Good to know: when you see the mini-cart taglib code, you will notice that it is called a react component in your Liferay Module, simply using the <aui:script require="${yourComponen}”>

So, the taglibs we saw were built with React Components, and here we have the Components used: https://github.com/liferay/liferay-portal/tree/7.4.1-ga2/modules/apps/commerce/commerce-frontend-js/src/main/resources/META-INF/resources/components

So lets start to create our taglib overriding the mini shopping cart OOTB.

1. I always like to use the blade and starting with a liferay-workspace:

blade init -v portal-7.4-ga2 liferay-workspace-7-4

2. For this test create a API module inside your liferay-workspace, with the following command:

blade create -t api commerce-frontend-taglib-custom

3. Inside your module, delete the package created by default and create these two java classes for our taglib:

a. com.liferay.commerce.frontend.taglib.custom.internal.servlet.ServletContextUtil

* Inside copy and paste the following code

package com.liferay.commerce.frontend.taglib.custom.internal.servlet; import org.osgi.service.component.annotations.Reference; import javax.servlet.ServletContext; import org.osgi.service.component.annotations.Component; /** * @author Roselaine Marques */ @Component(immediate = true, service = {}) public class ServletContextUtil { private static ServletContext _servletContext; @Reference( target = "(osgi.web.symbolicname=commerce.frontend.taglib.custom)", unbind = "-" ) protected void setServletContext(ServletContext servletContext) { _servletContext = servletContext; } public static ServletContext getServletContext() { return _servletContext; } }

b. com.liferay.commerce.frontend.taglib.custom.CommerceFrontendTaglibCustom

*Inside copy and paste the following code

package com.liferay.commerce.frontend.taglib.custom; import com.liferay.taglib.util.IncludeTag; import com.liferay.commerce.frontend.taglib.custom.internal.servlet.ServletContextUtil; import javax.servlet.jsp.PageContext; /** * @author Roselaine Marques */ public class CommerceFrontendTaglibCustom extends IncludeTag { @Override public void setPageContext(PageContext pageContext) { super.setPageContext(pageContext); setServletContext(ServletContextUtil.getServletContext()); } @Override protected String getPage() { return _PAGE; } private static final String _PAGE = "/mini-cart/page.jsp"; }

4. Open the bnd.bnd file and add the following configuration

Bundle-Name: Commerce Frontend Taglib Custom Bundle-SymbolicName: commerce.frontend.taglib.custom Bundle-Version: 1.0.0 Export-Package: com.liferay.commerce.frontend.taglib.custom Provide-Capability:\ osgi.extender;\ osgi.extender="jsp.taglib";\ uri="http://liferay.com/tld/commerce-ui-custom";\ version:Version="${Bundle-Version}" Web-ContextPath: /commerce-frontend-taglib-custom

NOTE: The main target here is to know how to customize a React taglib from commerce OOTB. These two previous steps are only about how to create a simple and common taglib, I don’t want to bore you by going into too much detail.

5) Now in “commerce-frontend-taglib-custom/src/main/resources”, eliminate everything inside and create the following structure of directories and files:

└── META-INF

├── liferay-commerce-ui-custom.tld

├── resources

│ ├── init.jsp

│ ├── js

│ │ └── OverriddenCartItem.js

│ └── mini-cart

│ └── page.jsp

└── taglib-mappings.properties

a. In the liferay-commerce-ui-custom.tld add the following code:

<?xml version="1.0"?> <taglib version="2.1" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" > <description>Provides the Liferay Commerce MiniCart component tags, prefixed with <![CDATA[<code>commerce-ui-custom:</code>]]>. </description> <tlib-version>1.0</tlib-version> <short-name>liferay-commerce-ui-custom</short-name> <uri>http://liferay.com/tld/commerce-ui-custom</uri> <tag> <name>mini-cart</name> <tag-class>com.liferay.commerce.frontend.taglib.custom.CommerceFrontendTaglibCustom</tag-class> <body-content>JSP</body-content> </tag> </taglib>

b. In the init.jsp add the following code:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

Añadir comentarios

Por favor identifíquese para continuar.

Thank you for your helpful post. I was looking for this.

Do you think it required a ".npmbridgerc" file?

Por favor identifíquese para votar.

Hi Tran,

no, no needs the ".npmbridgerc" file.

Por favor identifíquese para votar.

Hi i just recently started learning about Liferay Commerce,

i wanted to modify the commerce catalog with some of my js modules, but i cannot find a way to show that even with taglibs, is there a way now to override some part of the existing components in Liferay Commerce ?

Por favor identifíquese para votar.

Hi Roselaine Marques, We are currently facing the following issues in Liferay 7.4 Q1.2. Do you have any insights on this? issues: Missing dependency: commerce-frontend-js Missing dependency: frontend-js-react-web Thanks in advance for your support. Thanks

Por favor identifíquese para votar.

Hi, this looks like it would be really useful feature, but I am having trouble making it work in Liferay Portal GA 132.

I have copied the newer minicart item code, it all compiles and deploys fine. I copied the Minicart Fragment and replaced the taglib item used with the overridden one, everything works, except my version of the Cart Item does not seem to be getting used.

I am wondering if you have any tips on making this work with the later versions of Liferay (particulally the points on overriding existing functionality), or even better, an update to this blog for the current version would be a great asset :-)

Por favor identifíquese para votar.