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

| function | Description | Type | | --- | --- | --- | | init | khởi tạo builder | function(domain: string, { env: 'dev' | 'stag' | 'production' | 'internal' }) => void | getPublicPageV2 | lấy data của page | function({ slug: string; device: 'desktop' | 'mobile' }) => Promise<PublicPageResponse> | getSSRInputs | lấy các thông tin cần thiết sử dụng để khởi tạo dữ liệu SSR như products, megaMenu,... | function(pbConfig: PageBuilderResponse) => { [key: string]: SSRInput[] }

BuilderComponent (deprecated)

| Property | Description | Type | | --- | --- | --- | | content | Cấu hình của builder (dữ liêu content lấy từ builder.getPublicPageV2) | PageBuilderResponse | configs | Các cấu hình thêm cho builder (env, device, mappingDynamicSlots), có thể tự định nghĩa thêm fields | StoreState | componentDict | Các component có thể render trong BuilderComponent - required | {[key: string]?: React.ComponentType} | | ssrData | Dữ liệu phục vụ cơ chế SSR cho các component động | {[key: string] : SSROutput[]}

RenderPage

| Property | Description | Type | | --- | --- | --- | | content | Cấu hình của builder (dữ liêu content lấy từ builder.getPublicPageV2) | PageBuilderResponse | configs | Các cấu hình thêm cho builder (env, device, mappingDynamicSlots), có thể tự định nghĩa thêm fields | StoreState | componentDict | Các component có thể render trong BuilderComponent - required | {[key: string]?: React.ComponentType} | | ssrData | Dữ liệu phục vụ cơ chế SSR cho các component động | {[key: string] : SSROutput[]} | numOfHydratedBlocks | số block cần SSR. Nếu k truyền SSR tất cả blocks | number | addGlobalStyle | default true | boolean | addLandingLinks | default true | boolean | rootId | id root element. default ROOT | string

PublicPageResponse

| Property | Description | Type | | --- | --- | --- | | id | | number | | name | Tên page | string | | pbConfig (deprecated) | Cấu hình page (format của Tempi) | PageBuilderResponse | | content | Cấu hình page (format của Tempi) | PageBuilderResponse | | extraInfo | Các thông tin thêm của page như SEO, tracking, ... | IPageExtraInfo | | canonical | Canonical của page | string | | menu | Danh sách menu của page nếu page thuộc website | array |

Page

| Property | Type | | --- | --- | | id | number | | pbConfig (deprecated) | PageBuilderResponse | | content | PageBuilderResponse | | metaTitle | string | | metaDescription | string | | metaImage | string | | faviconUrl | string |

PageBuilderResponse

| Property | Description | Type | | --- | --- | --- | | [key: string] | Cấu hình từng component (format của Tempi) | PBComponent |

PBComponent

| Property | Description | Type | | --- | --- | --- | | id | id (unique) của từng component | string | | parentId | id của component cha của component hiện tại, nếu là root thì parentId = null | string | | children | danh sách id của các component là con của component hiện tại | string[] | | tag | định danh của từng loại component. Ví dụ: row, col, image, best_selling_product,... | string | | style | Style chung của component | React.CSSProperties | | version | | string | | customAttributes | Cấu hình riêng của từng component. có thể tự định nghĩa thêm | T extends [key: string]: any; |

IPageExtraInfo

| Property | Type | | --- | --- | | metaTitle | string | | metaDescription | string | | metaImage | string | | faviconUrl | string | | noIndex | boolean | | tekoTrackingWebMobile | string | | tekoTrackingWebDesktop | string | | facebookPixelId | string | | googleAnalyticsId | string | | googleTagManagerId | string | | googleAdsId | string | | tiktokPixelId | string | | headContentHtml | string | | bodyContentHtml | string |

StoreState

| Property | Description | Type | | --- | --- | --- | | env | môi trường | "local", "internal", "test-1", "dev", "staging", "production" | | device | Sử dụng để hiển thị các component ở từng chế độ màn hình | "desktop", "mobile" | | mappingDynamicSlots | slot trên tempi và component trên Ecommerce tương ứng | {[tag: string]: React.ComponentType} | | globalData | | GlobalData

Slot

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

SSRInput

| Property | Description | Type | | --- | --- | --- | | slot | Loại slot cần sử dụng cơ chế SSR | Slot | | collectionSlug | slug của collection (dùng cho danh sách sản phẩm) - slot = product_* | string | | menuZone | zone của menu (dùng cho mega menu) - slot = mega_menu | string |

SSROutput

| Property | Description | Type | | --- | --- | --- | | slot | Loại slot cần sử dụng cơ chế SSR | Slot | | serverData | Dữ liệu đầu vào của slot sử dụng cơ chế SSR | unknown (quy định bởi bên tích hợp)

GlobalData

| Property | Description | Type | | --- | --- | --- | | menu | menu website | object[] | websiteId | id website | number | page | page of website | PublicPageResponse

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