@shelf / ssp-sdk

ShelfSSPSDK

这个 ShelfSSPSDK 是一个JavaScript库，允许您轻松地集成和交互 ShelfSSP 基于框架的单页应用程序。 类的初始化方法 ShelfSSP . iframe、构造URL、跟踪URL更改、处理事件以及向 ShelfSSP.

安装

npm install @shelf/ssp-sdk

或者

yarn add @shelf/ssp-sdk

作为脚本

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@shelf/ssp-sdk@:tag-version:/lib/integration.self-service-portal.min.js"></script>

使用

要使用 ShelfSSPSDK，将它导入到你的JavaScript或TypeScript文件中：

import { ShelfSSPSDK } from '@shelf/ssp-sdk';

初始化ShelfSSP框架

初始化 ShelfSSP Iframe，使用initialize方法：

ShelfSSPSDK.initialize({
  element: document.getElementById('shelf-ssp-container'),
  sspURL: 'https://example.com/ssp',
  lang: 'en',
  slug: 'product',
  searchParams: { category: 'electronics', brand: 'apple' },
  onReady: () => {
    console.log('ShelfSSP is ready');
  }
});

initialize方法接受一个具有以下属性的对象：

• element (HTMLElement)的DOM元素 ShelfSSP Iframe将被追加。
• sspURL (string)的基础URL ShelfSSP.
• lang (string)的语言参数 ShelfSSP URL。
• slug (string)的段塞参数 ShelfSSP URL。
• searchParams (Record<string, string>)的附加查询参数 ShelfSSP URL。
• onReady (optional function)：一个回调函数，当 ShelfSSP Iframe已加载并准备好。

处理来自ShelfSSP的事件

事件发送的事件 ShelfSSP，使用 on 方法:

ShelfSSPSDK.on('event', (data) => {
  console.log('Received event:', data);
});

这个 on 方法接受一个事件名称和一个回调函数。 方法接收到具有指定名称的事件时，将调用回调函数 ShelfSSP.

向ShelfSSP发送消息

要向ShelfSSP发送消息，请使用 postMessage 方法:

ShelfSSPSDK.postMessage('action', { payload: 'data' })
  .then((response) => {
    console.log('Received response:', response);
  });

这个 postMessage 方法接受消息类型和可选有效负载。 它返回一个promise，该promise使用的响应进行解析 ShelfSSP.

关闭ShelfSSP框架

关闭 ShelfSSP 如果帧，使用 close 方法:

ShelfSSPSDK.close();

这个 close 方法移除 ShelfSSP 从DOM获取iframe。

CommunicationChannel

这个 CommunicationChannel 类是一个实用程序类，它提供了用于初始化通信通道并与之交互的方法 structured-channel 图书馆。

使用

要使用 CommunicationChannel 类，把它导入到你的JavaScript或TypeScript文件中：

import { CommunicationChannel } from '@shelf/sdk-ssp';

初始化通信通道

方法对通信通道进行初始化 init 方法:

await CommunicationChannel.init();

这个 init 方法建立与 structured-channel 并准备用于发送和接收消息的通信通道。

发送消息

要通过通信通道发送消息，请使用 send 方法:

await CommunicationChannel.send('action', { payload: 'data' });

这个 send 方法接受消息类型和可选有效负载。 它通过通信通道发送消息，并返回一个与通道另一端的响应解析的承诺。

处理事件

要处理通过通信通道接收的事件，请使用 on 方法:

CommunicationChannel.on('event', (data) => {
  // Handle the event data
});

这个 on 方法接受一个事件名称和一个回调函数。 每当通过通信通道接收到具有指定名称的事件时，将调用回调函数。

停止处理事件

要停止处理特定事件名称的事件，请使用 off 方法:

CommunicationChannel.off('event', callback);

这个 off 方法从给定事件名称的事件侦听器中删除指定的回调函数。

麻省理工学院© 架子上