How to develop a component having mutability by the Site Theme
http://dcsf-dev08.i-on.net/dxp/basecamp
Basic Structure
One Component has One Directory end with
.regmul.
ex)listcomponent inlist.regmul/If Component is providing many themes, You can implement it to branch in each directory.
Decide component name will you make.
Code Block I am gonna make product list component. Name will be 'productList'.Make new dire
Code Block list.mul/ index.vue // Implement to do branch impl.js // Implement component business logic multikart.vue // multikart theme template unishop.vue // unishop theme template default.vue // default theme template . .Register your component to
*.collection.js.Code Block { [componentId( 'list' )]: registerComponent( () => import( './list.mul' ) ), }Finally, you can use list component as
<reg-list/>.
How it works
Index Branch Component : **/*.mul/index.vue
That component has only a script block<script>...</script> and import theme components in there.
| Code Block | ||
|---|---|---|
| ||
<script>
import impl from './impl';
import multikart from './multikart';
import unishop from './unishop';
import { MasqueradeRenderReplace } from '../../../_core/helper/builderComponent';
export default {
props: impl.props, // connect component properties.
/**
* Replace Render Function
* Replace render function to apply support function implemented
* to connect component params between real theme component and itself.
* It will pass events and props and slots to the theme component.
*/
render: MasqueradeRenderReplace, // Easy way to import: Enter "Masq" and use auto complete.
methods: {
/**
* kernel()
* The kernel provides a real theme component correctly depends on the condition.
*/
kernel() {
// Branch method
// ./_core/helper/builderComponent.js:$$switchThemeComponent
// This array parameter has composed as pair elements.
return this.$$switchThemeComponent([
// condition(theme string or boolean) ,component
// Meaning of these is if left condition is true will return right component entered.
'multikart', multikart,
'unishop', unishop,
// if no one is true will return last left one.
unishop,
]);
},
},
};
</script>
|