Blogs

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

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

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;
  }
}
 

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";
}

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

<?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>

<%@ 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" %>
<%@ taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<liferay-frontend:defineObjects />
<liferay-theme:defineObjects />
<portlet:defineObjects />

liferay_commerce_ui_custom=/META-INF/liferay-commerce-ui-custom.tld

import {PRODUCT_REMOVED_FROM_CART} from 'commerce-frontend-js/utilities/eventsDefinitions';
import Price from 'commerce-frontend-js/components/price/Price';
import QuantitySelector from 'commerce-frontend-js/components/quantity_selector/QuantitySelector';
import ItemInfoView from 'commerce-frontend-js/components/mini_cart/CartItemViews/ItemInfoView';
import MiniCartContext from 'commerce-frontend-js/components/mini_cart/MiniCartContext';
import {
  INITIAL_ITEM_STATE,
  REMOVAL_CANCELING_TIMEOUT,
  REMOVAL_ERRORS_TIMEOUT,
  REMOVAL_TIMEOUT,
} from 'commerce-frontend-js/components/mini_cart/util/constants';
import {parseOptions} from 'commerce-frontend-js/components/mini_cart/util/index';

<ItemInfoView
  childItems={childItems}
  name={name}
  options={options}
  sku="[SKU hardcoded]"
/>

<%@ include file="../init.jsp" %>
<%@ page import="com.liferay.portal.kernel.util.HashMapBuilder" %>
<%@ taglib prefix="liferay-commerce-ui" uri="http://liferay.com/tld/commerce-ui" %>

<liferay-commerce-ui:mini-cart views="<%=HashMapBuilder.<String, String>put("Item", "commerce-frontend-taglib-custom@1.0.0/js/OverriddenCartItem").build()%>" />

{
  "config": {
    "imports": {
        "commerce-frontend-js": {
          "/": ">=4.0.0"
        },
        "frontend-js-web": {
          "/": ">=3.0.0"
        },
        "frontend-taglib-clay": {
          "@clayui/icon": ">=3.1.0",
              "@clayui/button": ">=3.6.0"
        },
        "@liferay/frontend-js-react-web": {
                "/": ">=1.0.0",
                "classnames": ">=2.2.6",
                "formik": ">=1.4.3",
                "prop-types": ">=15.7.2",
                "react": ">=16.8.6",
                "react-dnd": ">=7.0.2",
                "react-dnd-html5-backend": ">=7.0.2",
                "react-dom": ">=16.8.6"
        }
    }
  }
}

{
"dependencies": {},
"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.6",
  "@babel/preset-react": "^7.7.4",
  "liferay-npm-bridge-generator": "2.26.0",
  "liferay-npm-bundler": "2.24.3"
},
"name": "commerce-frontend-taglib-custom",
"scripts": {
  "build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler && liferay-npm-bridge-generator --verbose"
},
"version": "1.0.0"
}

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

<div class="speedwell-topbar__cart-wrapper speedwell-cart">
  <@liferay_commerce_ui_custom["mini-cart"] />
</div>