自动完成 UI

轻而易举、最小化和完全定制的自动完成组件,用于快速、无障碍和灵活的搜索体验 构造器.io的自动建议服务

文档

查看完整的组件文档和现场实例 故事书

目录

• 概览
• 安装和快速启动
  • 基本用途( 反应)
• 整合模式
  • 购买
    • 安装和快速启动
    • ++ 存储- 特定默认值
• Bundle (瓦努阿图联署材料)
  • 安装和快速启动
• 自定义
• 解决问题
• 补充资源
• 捐款
• 许可证

概览

Autocomplete UI提供轻量级和自定义的自定义自定义完成组件. 它使开发者能够快速地用 Constructionor 执行快速,可访问的搜索体验. io的自动建议服务.

• QQ Easy Introduction – 作为插件和游戏回放组件快速与您的应用程序集成
• QQ 轻快- 小捆绑大小, 为速度优化
• QQ自定义 UI – 样式最小, 支持自定义标记
• QQ 键盘导航 – 完全支持可访问键盘导航
• QQ 访问( a11y) – 为屏幕阅读器建有 ARIA 支持
• QQ 在类型安全的脚本中写入

探索完整的文件 −

安装和快速启动

安装库

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

基本用途( 反应)

导入和使用 CioAutocomplete 组件

import { CioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
import '@constructor-io/constructorio-ui-autocomplete/styles.css';

function YourComponent() {
  return (
    <div>
      <CioAutocomplete
        apiKey="key_M57QS8SMPdLdLx4x"
        onSubmit={(e) => {console.log(e)}}
      />
    </div>
  );
}

整合模式

购买

安装和快速启动

构造器自动完整组件作为组件的一部分可用 构造器.io 商店化应用程序

在安装了应用程序后, 您可以在主题编辑器中点击“ 添加部分” 并添加“ 构造器” 自动完整液体组件

更多深度指示请查看 购买文档。 。 。 .

++ 存储- 特定默认值

如果您正在使用 Hishify 内部的构造器自动补全组件而不使用 构造器.io 商店化应用程序,可以使用 useShopifyDefaults 启用自动导航处理的道具 :

<CioAutocomplete
  apiKey="your-api-key"
  useShopifyDefaults={true}
  shopifySettings={{ searchUrl: '/search' }}
/>

它会做什么:

• 产品选择: 自动重定向到产品细节页面
• 搜索建议: 以选定的查询重定向到搜索结果页面
• 手动搜索: 用输入的查询重定向到搜索结果页面
• 查询参数: 保存所有已存在的 URL 查询参数( 如 UTM 参数)

配置 :

• shopifySettings.searchUrl: 搜索结果页 URL( 如: '{{ block.settings.search_url }}' 液体模板)

说明: 何时 useShopifyDefaults={true},任何习惯 onSubmit 您提供的处理器将覆盖默认行为 .

Bundle (瓦努阿图联署材料)

这是一种框架不可知论方法,可用于任何JavaScript项目. CioAutocomplete功能提供了一个简单的接口,可以将整个Autocomplete UI注入到所提供的选择器中. 除了Autocomplete组件道具,此功能还接受一个选择器并包含CSS.

安装和快速启动

安装库

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

导入和使用 CioAutocomplete 组件

import CioAutocomplete from '@constructor-io/constructorio-ui-autocomplete/constructorio-ui-autocomplete-bundled';

CioAutocomplete({
  selector: '#autocomplete-container',
  includeCSS: true, // Include the default CSS styles. Defaults to true.
  apiKey: 'key_M57QS8SMPdLdLx4x',
  onSubmit: (submitEvent) => console.dir(submitEvent),
  // ... additional arguments
});
</script>

自定义

CSS样式并非默认导入. 将此添加到您的代码中以导入基本样式

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

所有风格都标注在.cio-autocomplete下. 你可以通过瞄准选择者来扩展它们.

/* Custom Style Sheet */
.cio-autocomplete .cio-submit-btn {
  border-radius: 10px;
  border: 1px solid red;
}

如果你想要覆盖或扩展基地 className,你可以做到这一点与 autocompleteClassName 参数

import { CioAutocomplete } from '@constructor-io/constructorio-ui-autocomplete';
import '@constructor-io/constructorio-ui-autocomplete/styles.css';

function YourComponent() {
  return (
    <div>
      <CioAutocomplete
        apiKey="key_M57QS8SMPdLdLx4x"
        onSubmit={(e) => { console.log(e)}}
        autocompleteClassName="cio-autocomplete custom-autocomplete-container"
      />
    </div>
  );

然后可以修改这样的风格

/* Custom Style Sheet */
.cio-autocomplete.custom-autocomplete-styles .cio-input {
  font-weight: bold;
}

解决问题

共同的问题和解决办法.

需要帮忙吗? 加入我们 GitHub 讨论

补充资源

• 完整文档 : 故事书
• JS客户端: SDK 文档
• * 购买应用程序 : App Store 链接
• (原始内容存档于2018-10-21) (英语). Restor's REST API: 自动完成

捐款

1. 叉出 repo 创建新分支( C) .
2. 运行 npm install 以安装依赖.
3. 在进行预期修改后, 运行 npm run tests && npm run lint 当地.
4. 提交公关审查.

许可证

MIT 许可证

版权(c) 2022年至今