61 lines
No EOL
1.6 KiB
Markdown
61 lines
No EOL
1.6 KiB
Markdown
# ExPlat
|
||
|
||
此包包含一个组件和实用函数，可用于在 WooCommerce 仪表板、报告页面和前端页面中运行 A/B 测试。
|
||
|
||
## 安装
|
||
|
||
安装模块
|
||
|
||
```bash
|
||
pnpm install @woocommerce/explat --save
|
||
```
|
||
|
||
此包假定您的代码将在 ES2015+ 环境中运行。如果您使用的环境对 ES2015+ 支持有限或没有支持（例如较低版本的 IE），那么使用 core-js 或 @babel/polyfill 将添加对这些方法的支持。在 Babel 文档中了解更多信息。
|
||
|
||
## 使用实验组件
|
||
|
||
```js
|
||
import { Experiment } from '@woocommerce/explat';
|
||
|
||
const DefaultExperience = <div>Hello World</div>;
|
||
|
||
const TreatmentExperience = <div>Hello WooCommerce!</div>;
|
||
|
||
const LoadingExperience = <div>⏰</div>;
|
||
|
||
<Experiment
|
||
name="woocommerce_example_experiment"
|
||
defaultExperience={ DefaultExperience }
|
||
treatmentExperience={ TreatmentExperience }
|
||
loadingExperience={ LoadingExperience }
|
||
/>;
|
||
|
||
// 以 WPCOM 用户身份认证获取实验作业。
|
||
import { ExperimentWithAuth } from '@woocommerce/explat';
|
||
|
||
<ExperimentWithAuth
|
||
name="woocommerce_example_experiment"
|
||
defaultExperience={ DefaultExperience }
|
||
treatmentExperience={ TreatmentExperience }
|
||
loadingExperience={ LoadingExperience }
|
||
/>;
|
||
```
|
||
|
||
## 使用 useExperiment
|
||
|
||
```js
|
||
import { useExperiment } from '@woocommerce/explat';
|
||
|
||
const DefaultExperience = <div>Hello World</div>;
|
||
|
||
const TreatmentExperience = <div>Hello WooCommerce!</div>;
|
||
|
||
const [ isLoadingExperiment, experimentAssignment ] = useExperiment('experiment-name');
|
||
|
||
if ( ! isLoadingExperiment && experimentAssignment?.variationName === 'treatment' ) {
|
||
return <TreatmentExperience />
|
||
}
|
||
|
||
return <DefaultExperience />
|
||
|
||
```` |
