@tempi-public/core-renderer v1.0.64

Tích hợp

Cài đặt

yarn add @tempi/core-renderer

# hoặc

npm install @tempi/core-renderer

Sử dụng với React - chỉ xử lý các component tĩnh của Tempi

Cách sử dụng BuilderComponent (deprecated - vui lòng sử dụng component RenderPage)

import { 
  builder, 
  BuilderComponent, 
  buildComponentDict, 
  PublicPageResponse 
} from "@tempi/core-renderer";
import { components as coreComponents } from '@tempi/core-elements/dist/renderer';

const publishedDomain = 'vnshop.vn'

builder.init(publishedDomain, {
  env: "dev", // dev | staging | production | internal | local
});

function App() {
  const [content, setContent] = useState();
  const [metaData, setMetaData] = useState();
  const slug = location.pathname.substring(1);

  const componentDict = buildComponentDict(coreComponents);
  
  useEffect(() => {
    const fetchPage = async () => {
      const { content: pageContent, metaData } = await builder.getPublicPageV2({
        slug: slug || "/", 
        device: "desktop",
      });
      setContent(pageContent);
      setMetaData(metaData);
    };
    fetchPage();
  }, []);

  return (
    <BuilderComponent
      content={content}
      configs={{
        env: 'dev',
        device: 'desktop',
        terminalCode: 'vnshop',
        locationCode: 'HN001'
      }}
      componentDict={componentDict}
    />
  );
}

export default App;

Cách sử dụng RenderPage

import { 
  builder, 
  RenderPage, 
  buildComponentDict, 
  PublicPageResponse 
} from "@tempi/core-renderer";
import { components as coreComponents } from '@tempi/core-elements/dist/renderer';

const publishedDomain = 'vnshop.vn'

builder.init(publishedDomain, {
  env: "dev", // dev | staging | production | internal | local
});

function App() {
  const [content, setContent] = useState();
  const [metaData, setMetaData] = useState();
  const slug = location.pathname.substring(1);

  const componentDict = buildComponentDict(coreComponents);
    
  useEffect(() => {
    const fetchPage = async () => {
      const { content: pageContent, metaData } = await builder.getPublicPageV2({
        slug: slug || "/", 
        device: "desktop",
      });
      setContent(pageContent);
      setMetaData(metaData);
    };
    fetchPage();
  }, []);

  return (
    <RenderPage 
      content={content}
      configs={ {
        env: 'dev',
        device:'desktop',
        globalData: {
          menu: [],
          websiteId: 1,
        },
      }}
      numOfHydratedBlocks={5}
      componentDict={componentDict} 
    />
  );
}

export default App;

API

builder

BuilderComponent (deprecated)

RenderPage

PublicPageResponse

Page

PageBuilderResponse

PBComponent

IPageExtraInfo

StoreState

Slot

product_carousel_desktop | product_grid_desktop | product_carousel_mobile | product_grid_mobile | mega_menu | recent_search | recent_product | pending_payment

SSRInput

SSROutput

GlobalData

Sử dụng với Next - bao gồm cơ chế SSR bởi getServerSideProps

import { 
  builder, 
  BuilderComponent, 
  buildComponentDict, 
  PublicPageResponse 
} from "@tempi/core-renderer";
import {
  ProductCarouselDesktop,
  ProductGridDesktop,
  ProductCarouselMobile,
  ProductGridMobile,
  MegaMenu,
  RecentSearch,
  RecentProduct,
  PendingPayment,
} from 'components'
import { components as coreComponents } from '@tempi/core-elements/dist/renderer';
import { components as ecomComponents } from '@tempi/ecom-elements/dist/renderer';

function Page({ content, extraInfo, ssrData }) {

  const componentDict = buildComponentDict({...coreComponents, ...ecomComponent});

  return (
    <>
      <CustomHead extraInfo={extraInfo} >
      <BuilderComponent
        content={content}
        ssrData={ssrData}
        configs={{
          device: 'desktop', // quan trọng, sử dụng để hiển thị các component ở từng chế độ màn hình
          mappingDynamicSlots={{
            product_carousel_desktop: ProductCarouselDesktop,
            product_grid_desktop: ProductGridDesktop,
            product_carousel_mobile: ProductCarouselMobile,
            product_grid_mobile: ProductGridMobile,
            mega_menu: MegaMenu,
            recent_search: RecentSearch,
            recent_product: RecentProduct,
            pending_payment: PendingPayment
          }}
          componentDict={componentDict}
          terminalCode: 'vnshop',
          locationCode: 'HN001',
        }}
      />
    </>
  );
};

export async function getServerSideProps() {
  builder.init(publishedDomain, {
    env: "dev", // dev | stag | production | internal
  });

  const { content, metaData } = await builder.getPublicPageV2({
    slug: slug || "/", 
    device: "desktop",
  });

  const ssrInputs = builder.getSSRInputs(content);

  const ssrData = await ecommerceFunctionGetData(ssrInputs) // hàm này sẽ xử lý lấy data SSR, ví dụ products, megaMenu, ...

  // Pass data to the page via props
  return { props: { content, extraInfo, ssrData } }
}