Shop by Diagram
Subscription
With Shop by Diagram you can easily find parts for larger equipment visually through diagrams. This can be an automotive spare part, electronic component, or spares of heavy machinery.
You can browse through an exploded view of the product, select the part and its quantity, and add it to your cart. With Shop by Diagram it’s easy to find the right component when you don’t have the product name or model number.
Shop by Diagram is available in Liferay DXP 7.4+/Commerce 4.0+ and is a more robust replacement for the Bill of Materials (BOM) feature.
Creating a Diagram product
A Diagram is like any other Product type in Liferay Commerce (Simple, Grouped, Virtual) with some key differences. A Diagram by itself cannot be shipped, does not have inventory, pricing, or tax, and does not allow subscriptions or Product Options. But the steps to create it are the same as other product types.
Open the Global Menu, click on Commerce → Products.
Click the Add (
) button and select Diagram.
Enter the following information.
Name: Engine Diagram
Catalog: Minium
Click Submit.
Configuring a Diagram product
This creates a new Diagram product and opens a Configuration view. Now, you must upload an image with the exploded view of the product. You can map SKUs or other Diagrams from your catalog to the constituent parts within the image.
Click the Diagram tab
Under Diagram Settings, select SVG if you are uploading an SVG image, otherwise set it to Default.
Under Diagram File, you can drag and drop an image or upload an image of your choice.
Click Select File and upload the image.
The Diagram Mapping section becomes active after the upload is complete.
|
Diagram Mapping Reference
|
|
|---|---|
| Field |
Purpose
|
| Position | Denotes the label given to a pin. It can be numbers or letters. For non-exploded diagrams, the pins can be used as labels. There can be more than one component with the same position. For instance, equipment might use the same gear in different areas. In a Diagram, all the gears use the same position to denote that they are the same component but at different places in the equipment. |
| Type | Choose Linked to a SKU, Linked to a Diagram or Not Linked to a Catalog.
|
| SKU | Becomes active if Type is Linked to a SKU. You can type the SKU in the search bar and select the appropriate one. |
| Diagram | Becomes active if Type is Linked to a Diagram. You can search for the Diagram using the search bar and select the appropriate one. |
| Label | Becomes active if Type is Not Linked to a Catalog. A label is used when sellers want to show the name of a part or component in the Diagram that they don’t sell in their online catalog for informational purposes. |
| Quantity | Denotes the quantity of the component necessary to complete the equipment. |
Mapping SKUs to the Diagram
You must map points in the image to SKUs or other Diagrams from the catalog.
Click the part in the diagram that must map to an SKU or another Diagram.
Search for the SKU or Diagram in the search bar, set its quantity, and assign a position in the dialog box.
Click Save.
Click Publish when done.
You can view the SKUs with their positions and quantities on the right side. After publishing the product, you can view it in the storefront.
Diagrams appear the same way as other products in Liferay Commerce in the Product Details widget, Product Publisher widget, and Search Results. You can also use tags and categories with Diagrams, the same way as with other products.
Image: “Bultaco engine exploded view” by Tom Margie / CC BY-SA 2.0