Adding a New Product Type¶
This tutorial will show you how to add a new product type by implementing three interfaces: CPType, ScreenNavigationCategory, and ScreenNavigationEntry.
Product types can be used to group products that share similar characteristics. Liferay Commerce provides three product types out-of-the-box: Simple, Grouped, and Virtual.
Overview¶
Deploy an Example¶
In this section, we will get an example product type up and running on your instance of Liferay Commerce.
Start a new Liferay instance by running
docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.55-ga55
Sign in to Liferay at http://localhost:8080. Use the email address test@liferay.com and the password test. When prompted, change the password to learn.
Then, follow these steps:
Download and unzip the Acme Commerce Product Type.
curl https://learn.liferay.com/commerce/latest/en/developer-guide/catalog/liferay-c1n4.zip -O
unzip liferay-c1n4.zip
Build and deploy the example.
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
Note
This command is the same as copying the deployed jars to
/opt/liferay/osgi/modules
on the Docker container.Confirm the deployment in the Liferay Docker container console.
STARTED com.acme.c1n4.web_1.0.0
Verify that the example product type was added. Open your browser to
https://localhost:8080
. Click the Applications Menu () and navigate to Commerce → Products. Then click on the (+) icon to add a new product. The new product type (“Example”) will be present in the list of types to choose from.
Note
In Liferay Commerce 2.1 and earlier, find the products page by navigating to Control Panel → Commerce → Products.
Congratulations, you’ve successfully built and deployed a new product type that implements CPType
.
Next, let’s dive deeper to learn more.
Walk Through the Example¶
In this section, we will review the example we deployed. We will create two classes: a product type class and a screen navigation entry class for a custom screen. Walk through the following:
Annotate the Product Type Class for OSGi Registration¶
Our product type class implements the CPType
interface:
@Component(
property = {
"commerce.product.type.display.order:Integer=16",
"commerce.product.type.name=c1n4"
},
service = CPType.class
)
public class C1N4CPType implements CPType {
The product type name must be a unique value so that Liferay Commerce can distinguish our product type from existing product types.
The
commerce.product.type.display.order
value indicates how far into the list of product types our product type will appear in the UI. For example, the virtual product type has a value of 15. Giving our product type a value of 16 ensures that it will appear immediately after the virtual type.
Review the CPType
Interface¶
Implement the following methods of CPType
in the product type class:
public void deleteCPDefinition(long cpDefinitionId) throws PortalException;
This method is where any custom deletion logic for the product type will be added.
public String getLabel(Locale locale);
This returns a text label that describes the product type. See the implementation in C1N4CPType.java for a reference in retrieving the label with a language key.
public String getName();
This returns the name of our product type. This name may be a language key that corresponds to the name that will appear in the UI.
Complete the Product Type¶
The product type is comprised of backend logic for deleting the product, logic to render the screen in the navigation menu, and the custom screen itself. Do the following:
Configure the ServletContext
for the Module¶
Define the ServletContext
in our ScreenNavigationEntry
class using the symbolic name of our bundle so that it can find the JSP in our module:
@Reference(target = "(osgi.web.symbolicname=com.acme.c1n4.web)")
private ServletContext _servletContext
The value we set for
osgi.web.symbolicname
matches the value forBundle-SymbolicName
in our bnd.bnd file. These values must match for theServletContext
to locate the JSP.We declare a unique value for
Web-ContextPath
in our bnd.bnd file so theServletContext
is correctly generated. In our example,Web-ContextPath
is set to/c1n4-web
. See bnd.bnd for a reference on these values.
Add the Product Type Deletion Logic to deleteCPDefinition
¶
Our example does not require any logic to be added to deleteCPDefinition
.
Add a JSP to Render the Custom Screen¶
In our example, we are adding a JSP that prints “Hello C1N4.”.
<h1>Hello C1N4.</h1>
Implement any other inputs or actions desired on the custom screen here, such as a form or MVC action command. See MVC Action Command for more information on adding an MVC action command that can be accessed from the JSP.
Add the Language Key to Language.properties
¶
Add the language key and its value to a Language.properties file within our module:
c1n4-commerce-product-type=C1N4 Commerce Product Type
c1n4-screen-navigation-entry=C1N4 Screen Navigation Entry
See Localizing Your Application for more information.
Conclusion¶
Congratulations! You now know the basics for implementing the CPType
interface, and have implemented a new product type with its own custom screen to Liferay Commerce.