Example Setup in BU

componances - Cms - cmsWidget

Cms/CmsRender.js

import React, { memo } from 'react';
import propTypes from 'prop-types';
import { CmsView } from '@central-tech/core-ui';
import { initProductSlideWidget, initCmsBlockWidget } from './cmsWidget';

const CmsRender = ({ ...rest }, context) => {
  return (
    <CmsView
      {...rest}
      context={context}
      isMobile={context?.deviceDetect?.isMobile}
      widget={{ cmsBlock: initCmsBlockWidget, productSlide: initProductSlideWidget }}
    />
  );
};

CmsRender.contextTypes = {
  client: propTypes.object.isRequired,
  insertCss: propTypes.func,
  pathname: propTypes.string,
  store: propTypes.object,
  deviceDetect: propTypes.object,
};

CmsRender.propTypes = {
  renderCss: propTypes.bool,
  renderJs: propTypes.bool,
  replaceHtml: propTypes.array,
};

export default memo(CmsRender);

Cms/cmsWidget/initCmsBlockWidget.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CoreUiProvider, cmsBlockWidget } from '@central-tech/core-ui';
import theme from '../../../config/theme';
import App from '../../App';
import LazyLoad from 'react-lazyload';
import { Cms } from '../index';

function renderCmsBlockWidget(target, context, cmsIdentifier) {
  const comp = (
    <CoreUiProvider client={context.client} theme={theme}>
      <App context={context}>
        <LazyLoad height={330} once>
          <Cms identifier={cmsIdentifier} ssr={false} />
        </LazyLoad>
      </App>
    </CoreUiProvider>
  );
  ReactDOM.render(comp, target);
}

export default function initCmsBlockWidget(context) {
  cmsBlockWidget(context, renderCmsBlockWidget);
  return true;
}

Cms/cmsWidget/initProductSlideWidget.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CoreUiProvider, cmsProductWidget } from '@central-tech/core-ui';
import App from '../../App';
import theme from '../../../config/theme';
import { ProductSearchSliderWidget } from '../../Product/Slide';
import LazyLoad from 'react-lazyload';

const renderProductWidget = (target, context, productSetting) => {
  const {
    skus,
    page,
    size,
    isRecommendForYou,
    isFlashDeals,
    isBestSeller,
    flashDealsCondition,
    fontColor,
    arrows,
    infinite,
    dots,
    items,
    itemWidth,
    autoplay,
    autoplaySpeed,
    freeScroll,
    groupCells,
  } = productSetting;
  const comp = (
    <CoreUiProvider client={context.client} theme={theme}>
      <App context={context}>
        <LazyLoad height={330} once>
          <ProductSearchSliderWidget
            skus={skus}
            page={page}
            size={size}
            isRecommendForYou={isRecommendForYou}
            isFlashDeals={isFlashDeals}
            isBestSeller={isBestSeller}
            flashDealsCondition={flashDealsCondition}
            fontColor={fontColor}
            options={{
              arrows,
              dots,
              items,
              itemWidth,
              infinite,
              autoplay,
              autoplaySpeed,
              freeScroll,
              groupCells,
            }}
          />
        </LazyLoad>
      </App>
    </CoreUiProvider>
  );
  ReactDOM.render(comp, target);
};

const initProductSlideWidget = (context) => {
  cmsProductWidget(context, renderProductWidget);
};

export default initProductSlideWidget;