Published at: 2025-10-31

Key Scenario Capabilities | Personalized PwC Card Support for Marketplace Listings

Basic Concept

Reuse the standard object for the outer layer. Use the pwc plugin from the object list page to obtain the plugin instance via table.get(‘pluginService’) and pass that instance to the card component. The card component exposes a render.before hook, allowing customization of card content.

Implementation Plan

Reuse the plugin instance from the object list page, define ShopOrder (ShareOrder) Mall–specific hooks, return the shoppingCard component, pass it through to the vCRM mall card, and replace the existing card. Input parameters and emitted events stay consistent with the existing ShareOrder card.

API Parameters Description

Hook Event Definition

Level / Category	Hook Event Name (eventName)	Description and Suitable Logic	Parameters (opt)	Return Result (rst)	Demo
Object list page	dht.shopmall.list.render.before	Execution timing: before rendering the ShopOrder Mall list, excluding the top filters. Main uses: 1) Card replacement 2) Customizing the mall list		See “Return Result (rst)” below	See demo below

Return Result (rst)

{ // Mall card shoppingCard: Card // Card is a Vue component }

demo

``` import Card from ‘./card’; export default class Plugin { apply() { return [ { event: “dht.shopmall.list.render.before”, functional: this.shopmalRenderBefore.bind(this) } ]; }

shopmalRenderBefore() {
  return Promise.resolve({
        shoppingCard: Card
    });
} } ```

Card Props Description

Attributes

Parameter	Description	Type	Example
product	Single item in the Products (Products) list, already formatted. e.g., product.commodityLabels is the labels array	Object	{ name: “123” _id: ‘xxx’}
productFields	Field definitions for the Products object	Object	{ name: { label: ‘Product’ } }

Events

Event Name	Description	Callback Parameters
on-action	Example of triggering an operation: this.$emit(‘on-action’, { type, product }); Handles various action events on the product card. @param {string} type - action type, possible values: - ‘CART’: add to Cart - ‘DETAIL’: view product detail - ‘COLLECTION’: add/remove favorite - ‘SPEC’: select specification - ‘BOM’: select configuration - ‘ATTR’: select attribute @param {Object} product - product object	{ type: string, product: Object }

Configuration Entry

In the Products list page layout

Mall Card Replacement Demo Example

1. Entry — main.js

``` import Card from ‘./card’; export default class Plugin { apply() { return [ { event: “dht.shopmall.list.render.before”, functional: this.shopmalRenderBefore.bind(this) } ]; }

shopmalRenderBefore() {
  return Promise.resolve({
        shoppingCard: Card
    });
} } ```

Custom mall card

card.vue

Note: This is a pwc template file. vCRM includes a sample at vcrm\src\widgets\product-card\pwcCardDemo.vue

Submit Feedback

Key Scenario Capabilities | CPQ Bundled Product Ordering

Unnamed title