@teko-builder/client v1.0.1-beta.31

Tích hợp

Cài đặt

yarn add @teko-builder/client

# hoặc

npm install @teko-builder/client

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

import { builder, BuilderComponent } from "@teko-builder/client";
import "@teko-builder/client/dist/base.css";

const publishedDomain = 'vnshop.vn'

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

function App() {
  const [content, setContent] = useState();
  const [metaData, setMetaData] = useState();
  const slug = location.pathname.substring(1);
  
  useEffect(() => {
    const fetchPage = async () => {
      const { pbConfig, metaData } = await builder.getPublicPageV2({
        slug: slug || "/", 
        device: "desktop",
      });
      setContent(pbConfig);
      setMetaData(metaData);
    };
    fetchPage();
  }, []);

  return (
    <BuilderComponent
      content={content}
      configs={{
        ggSheetKey: {
          clientEmail: 'clientEmail',
          privateKey: 'privateKey',
        },
        terminalCode: 'vnshop',
        locationCode: 'HN001'
      }}
    />
  );
}

export default App;

API

builder

BuilderComponent

PublicPageResponseV2

PublicPageResponse

Page

PageBuilderResponse

PBComponent

PageExtraInfo

SSRInput

SSROutput

MappingDynamicSlots

Slot

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

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

import { builder, BuilderComponent } from "@teko-builder/client";
import {
  ProductCarouselDesktop,
  ProductGridDesktop,
  ProductCarouselMobile,
  ProductGridMobile,
  MegaMenu,
  RecentSearch,
  RecentProduct,
  PendingPayment,
} from 'components'
import "@teko-builder/client/dist/base.css";

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

  return (
    <>
      <CustomHead extraInfo={extraInfo} >
      <BuilderComponent
        content={pbConfig}
        ssrData={ssrData}
        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
        }}
        configs={{
          ggSheetKey: {
            clientEmail: 'clientEmail',
            privateKey: 'privateKey',
          },
          terminalCode: 'vnshop',
          locationCode: 'HN001',
          device: 'desktop', // quan trọng, sử dụng để hiển thị các component ở từng chế độ màn hình
        }}
      />
    </>
  );
};

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

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

  const ssrInputs = builder.getSSRInputs(pbConfig);

  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: { pbConfig, extraInfo, ssrData } }
}