PLP 界面库

导言

一个 UI 库,提供 React 组件来管理获取和渲染逻辑 搜索 打开 浏览 由 Constructionor 驱动的产品列表页面。 已有打字支持.

我们 故事书 Docs 是探索此 UI 库的行为和可用配置选项的最佳场所.

安装

npm i @constructor-io/constructorio-ui-plp

使用量

使用反应组件

这个 CioPlp 组件处理整个PLP的状态管理、数据采集和渲染逻辑.

import CioPlp from '@constructor-io/constructorio-ui-plp';

function YourComponent() {
  return (
    <div>
      <CioPlp apiKey='key_M57QS8SMPdLdLx4x' />
    </div>
  );
}

使用 Java 脚本套装

这是一种框架不可知论方法,可用于任何JavaScript项目. 这个 CioPlp 函数提供一个简单的接口,将整个 PLP 用户界面注入所提供 selector。 。 。 .

何况 PLP 组件道具,此函数也接受 selector 财务报告和审定财务报表 includeCSS。 。 。 .

import CioPlp from '@constructor-io/constructorio-ui-plp/constructorio-ui-plp-bundled';

CioPlp({
  selector: '#plp-container',
  includeCSS: true, // Include the default CSS styles - defaults to true
  apiKey: 'key_M57QS8SMPdLdLx4x',
  // ... additional arguments
});

++ 存储- 特定默认值

当与 Shopify 主题合并时, 您可以使用 useShopifyDefaults 启用 Shopify 特定行为的道具 :

<CioPlp apiKey='your-api-key' useShopifyDefaults={true} />

它所提供的:

• callbacks.onAddToCart: 将产品添加到 Shopify 推车中 /cart/add.js API 密码
• callbacks.onProductCardClick: 导航到 /products/{itemId}
• urlHelpers.setUrl: 转换 /group_id/ URL为 /collections/ 用于购买兼容性

对于 JavaScript 套装:

使用时 useShopifyDefaults 用捆绑的版本,可以省略 selector 参数并默认为 #cio-plp-ui-container数字 :

CioPlp({
  apiKey: 'your-api-key',
  useShopifyDefaults: true,
  // selector defaults to '#cio-plp-ui-container'
});

说明: 任何习惯 callbacks 或者说 urlHelpers 您提供将覆盖 Shopify 默认值.

自定义样式

库默认值

默认情况下, 从此库导入 React 组件不会将任何 CSS 拖入您的项目 .

如果您希望使用此库中的启动样式, 请添加一个类似于下面的示例导入语句的导入语句 :

import '@constructor-io/constructorio-ui-plp/styles.css';

• 起动风格可以被用做在上方的地基上,或者作为完全被替换的参考.
• 要选择退出所有默认样式, 请不要导入 styles.css 样式表.
• 此库中的所有启动样式都在 .cio-plp CSS选取器.
• 启动样式是为了通过在自己的CSS规则中分层来扩展.
• 如果导入启动样式, CioPlp 组件将占用母容器的全部宽度和高度.

请注意启动样式使用 @ container 查询,并根据进取器的容器元素大小,为进取器提供响应样式。 由于这个功能得到了现代浏览器的支持,所以多填充没有被包含在这个库中. 然而,如果想要支持更老的浏览器,可以添加倒置样式或者使用一个 多边填充。 。 。 .

解决问题

已知问题

旧的 Java 脚本环境

图书馆提供两个不同的构件: C通JS (cjs)和ECMAScript模块 (mjs).

为ECMAScript模块(mjs)所建. JavaScript 版本是 ESNext, 它可能不会被您的环境所支持 . 如果情况如此,而你的环境正在使用一个更古老的JavaScript版本,如ES6(ES-2015),你可能会得到这个错误:

Module parse failed: Unexpected token (15:32) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

要解决这个问题,您可以导入支持ES6(ES-2015)语法的普通JS(cjs)构建:

import CioPlp from '@constructor-io/constructorio-ui-plp/cjs'

ESLint 语录

ESLint有一个已知的问题,即它未能解决在互联网上暴露的路径 exports 国家防范机制一揽子措施声明。 如果您收到以下错误, 您可以使用 ESLint 安全禁用 // eslint-disable-line 为这条线.

Unable to resolve path to module '@constructor-io/constructorio-ui-plp/styles.css'

相关的未决问题: 问题1868, (中文(简体) ), 问题1810

地方发展

开发脚本

npm ci                  # Install dependencies for local dev
npm run dev             # Start a local dev server for Storybook
npm run lint            # Run lint

图书馆维护

npm run compile           # Generate lib folder for publishing to npm
npm run build-storybook   # Generate Storybook static bundle for deploy with GitHub Pages

出版新版本

调度 发布 gitHub 动作中的工作流程 。 您必须提供两个论据:

• 版本战略数字 : major, (中文(简体) ), minor,或 patch。 。 。 .
• 标题:发布的标题.

此工作流程将自动 :

1. 使用所提供的策略跳出库版 .
2. 创建新 git 标签 .
3. 创建新的 GitHub 发布 .
4. 编译图书馆.
5. 向国家预防机制公布新版本.
6. 向 GitHub Pages 部署故事手册文件.
7. 汇报《公约》 相关黑道。 。 。 .

iQQ注意:请不要手动增加软件包. json版本或创建新的git标签.

库版通过发行和git标签来跟踪. 我们故意把包裹。 。 0.0.0 避免将变化推向 main 树枝。 这避免了分支保护规则例外的必要性,从而解决了许多安全关切.

新故事书版本

调度 部署故事本 gitHub 动作中的工作流程 .

iQQQ 注:这在发布新版本时已经自动完成.

辅助文件

• 童话书7 导言
• 键入标记文件