/
Front Office ( Nuxt BaseCamp )

Front Office ( Nuxt BaseCamp )

Owned by ted (Unlicensed)
Last updated: Mar 25, 2020
2 min read

How to develop a component having mutability by the Site Theme

http://dcsf-dev08.i-on.net/dxp/basecamp

Basic Structure

  1. No deeper than children of the presentational/ directory.

  2. One Component has One Directory end with .mc. ( Multi-Component, Mutable Component )
    ex) list component in list.mc/

  3. If Component is providing many themes, You can implement it to branch in each directory.

    list/ 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 . .

  4. Register your component to *.collection.js .

    { [componentId( 'list' )]: registerComponent( () => import( './list' ) ), }

  5. Finally, you can use list component as <reg-list/> .

 

 

How it works

Index Branch Component : **/*.mc/index.vue

That component has only a script block<script>...</script> and import theme components in there.

<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>

 

 

 

Related content