In the plugin marketplace, users can add the product list plugin. This plugin presents product images and key information, such as name, sales, price, and key attributes, in a clear and concise list format using the product card style. It meets the personalized display needs of different products and can be configured to enable click-through navigation to web pages or dashboards, allowing users to access the most essential content in the shortest possible time and greatly improving the efficiency of information browsing. *(This plugin is a paid plugin package. To purchase, please contact the sales team.)

2.1 Dataset requirements #

The product list plugin supports displaying product images. Therefore, the dataset should include a field for image addresses to store the URL address of the image.
If the current underlying data table does not include a field for product image addresses, a separate image table can be created. Each product and image address should correspond one-to-one. There must not be cases where multiple image addresses exist for the same product.
Example of an image data source:

Incorrect example:

After setting up the image data source, you can connect the image table with the product order table or basic information table in visual modeling.

Example structure of a product basic information table:

2.2 Usage example #

Step 1: Go to visual query, at the bottom of the “Chart” section, select the plus sign “Get from marketplace”, find the product list plugin, and click Add. After adding, the product list plugin icon will appear in the chart list.

Step 2: According to chart requirements, add product ID, product image, tags, metrics, and filter options.

• Product ID: Only one dimension can be used. If “Category” is placed in the product ID, one product card will correspond to information for one category of products. If “Order ID” is placed in the product ID, one product card will correspond to product information for one order. Generally, to make the information clearer and more concise, it is recommended to use product name or category.
• Product image: Place the image URL
• Label: Only one dimension can be added. The label will be displayed at the top right corner of the product card as a prompt.
• Indicators: One or more indicators can be added and will be displayed below the product card. The aggregation method can be configured.
• Filter: Filter options can be added (optional).

2.3 Application scenarios #

The Product List visualization plugin package can be widely used in the consumer goods industry and the e-commerce industry. The specific application scenarios are as follows:

• Market research and analysis: Easily view sales performance, key attributes, and other information of products in different categories, quickly compare the market performance of various products, and help enterprises develop more precise market strategies. For example, when studying the beverage market, you can clearly compare the sales, price, and key attributes of different beverage brands that consumers care about.
• Store product management: Quickly understand the inventory, sales data, and category information of products in each store through the product list, to allocate goods efficiently and optimize product displays. For example, for chain supermarkets, you can easily monitor the sales speed and remaining inventory of fresh products in each store, and replenish stock and adjust display positions in a timely manner.
• E-commerce store operation optimization: E-commerce enterprises can quickly view the sales performance and key information of various products in the store, and plan targeted product recommendations and promotional activities. For example, during major e-commerce promotions, use the sales and price data in the product list to focus on promoting best-selling products and discounting slow-moving products.
• Competitive product analysis: Directly compare the differences between your own store's products and competing products, including image display effects, price advantages, sales data, and more, to optimize your own product strategy. For example, in the apparel e-commerce sector, you can compare the price, sales volume, and other key data of the same style of clothing across different stores in detail, identifying your own competitive advantages and shortcomings.

3.1 Style configuration #

3.1.1 Label color #

In the "Label color" section on the left side of the editing panel, you can set colors for labels, with up to five label colors available.

3.1.2 Layout and size #

In the "Layout and size" section on the left side of the editing panel, you can configure product card width, number per row, product card spacing, image aspect ratio, and the number of indicator cards per row.

• You can set the product card width rule by choosing either fit to container (fill the screen) or custom. If custom is selected, you can set the product card width below.

• You can set the maximum number of product cards and indicator cards displayed per row. After configuration, product cards and indicator cards will be arranged in rows and columns according to the specified quantities.

• You can set the spacing between indicator cards.
• You can set the image aspect ratio to default, 1:1, 4:3, or 16:9. Standardizing the image aspect ratio will make the product card layout more orderly.

3.1.3 Indicator name configuration #

The indicator names in indicator cards can be modified in the "Indicator" dropdown menu under "Set field information".

3.1.4 Indicator unit configuration #

By default, data in indicator cards has no unit. In the "Indicator" dropdown menu, select "Set data format" - "Number" to set a unit suffix and decimal places, making the data clearer and reducing confusion caused by missing units.

3.2 Analysis configuration #

The product list visualization plugin supports configuration for sorting, top N, percentage, comparison, and period-over-period analysis.

• Supports sorting product cards

• Supports displaying only the top N products

• Supports percentage, comparison, and period-over-period calculations, with the results displayed in the indicator cards

3.3 Navigation settings #

After saving the visualization query to the dashboard, you can configure navigation in the dashboard to enable clicking a product card to navigate to a web page or dashboard. (For details, see: Chart navigation)

3.3.1 Navigate to a web page #

Go to the dashboard editing page, select the product list chart, click the three dots in the upper right corner, and select navigation settings.

In the redirection settings, select redirect to web page, choose the open location, and enter the target web page address in the target web page URL field. The field value {字段名} can be used as a parameter in the URL redirection rule. As shown in the figure, when the high heels metric card is selected, it will redirect to https://www.baidu.com/s?wd=高跟鞋, that is, search for "高跟鞋" on Baidu.

3.3.2 Redirect to dashboard #

Go to the dashboard editing page, select the product list chart, click the three dots in the upper right corner, and select redirection settings.

Select redirect to dashboard, choose the open location, and select the target dashboard from the list (only dashboards with access permissions can be selected).

To display only the data of the selected product on the redirected dashboard when clicking different product cards, the following conditions must be met:
(1) The current chart contains filter items
(2) The target dashboard contains a public filter
(3) The filter items of the current chart have the same dimensions as the public filter
After meeting these conditions, open redirection settings - redirection with filter conditions, and associate the current chart filter with the public filter of the target dashboard to enable dashboard redirection. As shown in the figure below, if the high heels product card is clicked for redirection, the public filter of the target dashboard will filter "Product Category = High Heels", and the redirected dashboard will display only order data for the high heels category.