This event is called after product detail page data is obtained and processed, but before the page renders. It can hide, replace, or insert page components.

Parameters

Parameter	Description	Type
params	Current page context parameters. Original data is stored in params.data.	Object
pluginService	Common plugin parameters	Object

Return Value

Parameter	Description	Type
hide	Components to hide. See the comments in the basic example for supported values.	Array
components	Components to insert or replace. See the comments in the basic example for supported positions.	Object

hide and components can be used together to hide and replace existing components.

Page Data

const data = params.dataGetter.getData();

Common fields in data:

{
    skus: this.skus,
    spuData: this.spuData,
    currentProduct: this.currentProduct,
    allProducts: this.allProducts,
    originProducts: this.originProducts,
    options: this.options,
    subProducts: this.subProducts,
    specOrder: this.specOrder,
    metaData: this.metaData,
}

Basic Example

import CustomNameComponent from "./CustomNameComponent.vue"

export default class Plugin {
    apply() {
        return [
            {
                event: "dhtProductDetail.render.before",
                functional: this.renderBefore.bind(this)
            }
        ];
    }

    async renderBefore(params, pluginService) {
        const NameComponent = Vue.extend(CustomNameComponent);
        const nameInstance = new NameComponent({
            propsData: {
                params
            }
        });

        nameInstance.$mount();

        return new Promise((resolve, reject) => {
            resolve({
                hide: ["name", "quantity"],
                components: {
                    name: nameInstance,
                }
            })
        })
    }
}

CustomNameComponent.vue:

<template>
<div class="test-container">
    <div style="background-color: yellow; color: red; padding: 10px; font-size: 16px;">
        Name component replacement: {{ testName }}
    </div>
</div>
</template>

<script>
export default {
    props: {
        params: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            testName: "pwc component name"
        }
    }
}
</script>