@ duffel/ 组件

这个软件包是一个组件库,用于帮助您使用 达菲尔 API。 。 。 .

开始

将组件整合到您的网站上有三种不同的方式。 这取决于你使用的是什么技术。 我们将使用辅助部件作为例子,但同样的步骤将适用于其他部件.

整合React 组件

1. 安装软件包 :

   yarn add @duffel/components
   # -- or --
   npm i @duffel/components
   

2. 从 @duffel/components

   import { DuffelAncillaries } from "@duffel/components";
   

3. 将部件装入所需的道具

   <DuffelAncillaries
     offer={offerFromYourBackend} // The offer object from your backend
     seat_maps={seatMapsFromYourBackend}
     services={["bags", "seats"]}
     passengers={[...]}
     onPayloadReady={console.log}
   />
   

整合 HTML 自定义元素

如果您没有使用React,但仍处于节点环境中,您可以:

1. 安装软件包 :

   yarn add @duffel/components
   # -- or --
   npm i @duffel/components
   

2. 导入组件渲染函数和事件听众 @duffel/components/custom-elements

   import {
     renderDuffelAncillariesCustomElement,
     onDuffelAncillariesPayloadReady,
   } from "@duffel/components/custom-elements";
   

3. 在您的 HTML 中包含自定义元素

   <duffel-ancillaries></duffel-ancillaries>
   

4. 调用带有正确属性的渲染函数来渲染自定义元素 :

   renderDuffelAncillariesCustomElement({
     offer: offerFromYourBackend,
     seat_maps: seatMapsFromYourBackend,
     services: ["bags", "seats"],
     passengers: [...],
   });
   

5. 为组件触发的事件设置听众 :

   onDuffelAncillariesPayloadReady((data, metadata) => {
     console.table(data);
     console.table(metadata);
   });
   

没有节点的自定义元素集成

如果您不在节点环境中,不能依赖npm安装软件包,我们通过我们的CDN提供. 这是如何整合:

1. 包含脚本标签

   <!--
     Replace VERSION with the desired version.
     You can find them all on https://www.npmjs.com/package/@duffel/components?activeTab=versions
   
     Replace COMPONENT with the desired component you'd like to use.
     You can find the components available in the `./cdn-dist` directory after running `yarn build-and-publish --dry-run`
   
     For example, for the duffel ancillaries component on version 3.3.1, use:
     https://assets.duffel.com/components/3.3.1/duffel-ancillaries.js
   -->
   
   <script src="https://assets.duffel.com/components/VERSION/COMPONENT.js"></script>
   

2. 在 HTML 中包含自定义元素标记 :

   <duffel-ancillaries></duffel-ancillaries>
   

3. 将组件装入所需数据。 您可以安全地调用此功能所需的次数, 例如, 当乘客数据变化时 .

   const duffelAncillariesElement = document.querySelector("duffel-ancillaries");
   
   duffelAncillariesElement.render({
     offer: offerFromYourBackend,
     seat_maps: seatMapsFromYourBackend,
     services: ["bags", "seats"],
     passengers: [...],
   });
   

4. 聆听组件上的“ 在 Payload Ready” 事件 . event.detail.data 包含您需要发送到 Duffel API 以创建命令的有效载荷 .

   const duffelAncillariesElement =
     document.querySelector("duffel-ancillaries");
   
   duffelAncillariesElement.addEventListener("onPayloadReady", (event) =>
     console.log("onPayloadReady\n", event.detail),
   );
   

财务问题

是否有融合指南?

• 将辅助部件纳入您的预订流程。 。 。 .
• 将客户卡表整合到您的退出页面。 。 。 .

很快会有更多导游来.

这个 examples 文件夹是快速启动并看到每个组件充分运行的示例的好方法.

通过 npm 可用哪些组件 ?

React 组件列表可见于 src/index.ts。如果您正在使用自定义元素,您可以在其中找到所有渲染函数和事件听众 src/custom-elements.ts。 。 。 .

通过CDN可提供哪些组件?

请检查 entryPoints 内 config/esbuild.base.config.js。它列出了我们将构建的所有组件,并上传到CDN.