Published at: 2025-10-31

Key Scenario Capabilities | Personalized PWC Card Support for Marketplace Listings

Basic Approach

Reuse the standard object’s outer layer by leveraging the pwc plugin from the object list page. Pass the plugin instance to the card component via table.get('pluginService'). The card component exposes a render.before hook to support customizing card content.

Implementation Solution

Reuse the plugin instance from the object list page and define exclusive hooks for the Order Mall. Pass the returned shoppingCard component to the mall card in vCRM, then replace it. The input parameters and event responses remain consistent with the existing Order Connector card.

Interface Parameter Specifications

Hook Event Definitions

Level/Category Hook Event Name (eventName) Description & Suitable Logic Parameters (opt) Return Result (rst) Demo
Object List Page dht.shopmall.list.render.before Trigger: Before rendering the Order Mall list (excludes top filters). Purpose: 1. Card replacement 2. Mall list customization - See Return Result (rst) below See Demo below

Return Result (rst) javascript { // Mall card shoppingCard: Card // Card is a Vue component }

Demo ```javascript 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 Parameter Specifications

Attributes

Parameter Description Type Example
product Single item data from the list (formatted, e.g., product.commodityLabels for tags) Object { name: "123", _id: 'xxx'}
productFields Field descriptions for the product/commodity object Object { name: { label: 'Product' } }

Events

Event Name Description Callback Parameters
on-action Triggers action functions. Example: this.$emit('on-action', { type, product });
Handles various actions on the product card:
- 'CART': Add to Cart
- 'DETAIL': View product details
- 'COLLECTION': Favorite/Unfavorite
- 'SPEC': Select specifications
- 'BOM': Select configurations
- 'ATTR': Select attributes		 -

Configuration Entry

Located in the layout settings of the product/commodity list page.

image

Mall Card Replacement Demo Example

1. Entry File (main.js)

```javascript 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
    });
} } ```
2. Custom Mall Card (card.vue)

Note: A pwc template file is available in vCRM at vcrm/src/widgets/product-card/pwcCardDemo.vue.

```html

```

Submit Feedback
Next
Key Scenario Capabilities | CPQ Product Bundle Ordering