README

Craft CMS 4.x 的条目加载器和过滤器插件

此插件将为您提供使用 AJAX 加载更多条目的选项。

您可以根据字段和类别进行筛选。

您有排序选项可供选择。

数字字段转换为 range 输入类型，您可以按照需要应用 CSS。

您可以通过插件设置页面或在调用 render() 时控制选项。请查看下面的动画，了解可用的后端选项。

您还可以传递自定义查询以获取您需要的条目。

您可以在不同的模板上创建具有不同设置的多个 Multiple Load More 实例。

如果您已经在模板上显示了一些条目（desc 排序），您可以通过调整设置页面中的偏移量或在调用 render() 时跳过这些条目。

设置页面

要求

此插件需要 Craft CMS 4.X 或更高版本。

对于旧版本，请访问 Craft V3

安装

要安装插件，请按照以下说明操作。

1. 打开您的终端并转到您的 Craft 项目

   cd /path/to/project
   

2. 然后告诉 Composer 加载插件

   composer require hestabit/craft-ajaxinate
   

3. 在控制面板中，转到设置 → 插件，然后点击“安装”按钮以安装“条目加载器和过滤器”。

⚠️ 请仅在这些 支持的字段 类型中在插件设置页面或传递给 render() 调用。

• 数字
• 单选按钮
• 复选框
• 开关

添加“加载更多”功能的步骤。

• 在您想要加载更多功能性的模板上添加 csrf token。向下滚动以查看示例。

• 将以下代码添加到模板（您在上面添加了 csrf token）。此代码将添加“加载更多按钮”。

{{ craft.craftAjaxinate.loadMoreVariable() }}

• 将此类 "ajaxDataDump" 添加到任何现有元素或创建一个新的空 <div class="ajaxDataDump"></div> 在您的模板上，或者，

• 在 render() 中使用 containerClass 创建您自己的自定义类，该类将用于加载的内容。

• 渲染模板：创建一个新的 单独的模板。在此模板中，您有权访问 {{ entries }} 对象。此对象基于设置包含所有条目。不要在此处放置任何其他标记，如页眉或页脚。请参见下面的示例。

• 在插件设置页面或调用 render() 时选择您刚刚创建的 渲染模板。

调用 渲染模板 的示例代码

        {{ craft.craftAjaxinate.render({
                template: 'ajax/stories.twig',
        }) }} 

• 您可以在 渲染模板 中的条目上自由应用 CSS 并定义 HTML，以满足您的需求。

• 选项 加载更多 按钮的可用选项
  • btnWrapperClass : 添加到 <div> 的类。
  • loadMoreName : 用于 加载更多 按钮的字符串。默认 加载更多

带有选项的 加载更多 按钮示例

{{ craft.craftAjaxinate.loadMoreVariable({
      btnWrapperClass:'ajaxBtn',
      loadMoreName: 'Load More'})
}}

添加排序和过滤器的步骤

• 以上所有步骤都应执行。
• 要渲染排序，您需要在模板中添加以下代码，该模板在您的“加载更多”按钮可用。

       {{ craft.craftAjaxinate.render() }}

• 根据您的需求调整设置，从插件的设置页面或调用 render() 时传递可用选项。

• 过滤器和排序选项 传递以下选项以更改插件的设置。可用选项包括：

  • template : 传递 渲染模板 路径。
  • limit : 传递限制。
  • offset : 页面加载时要跳过并加载的条目。
  • initLoad : 在页面加载时显示条目，如 initLoad:true 或 initLoad:false。
  • resetBtnState : 显示重置按钮，如 resetBtnState:true 或 resetBtnState:false。
  • extraFilters : 显示过滤条件，传递字段处理程序如 extraFilters: ['price', 'featuredEntry', 'anyOtherhandleName']。
  • sortingFilters : 显示排序选项 (仅日期和价格处理程序) 如 sortingFilters:{ 'date':'dateHandleName', 'price':'priceHandleName' },。
  • section : 传递部分名称如 ['news', 'services']。
  • catGroup : 类别处理程序的数组如 ['cms','craftcms']。显示类别过滤器所需。
  • catGroupLimit : 要显示的子类别数量，默认为 10。
  • tagGroup : 标签组处理程序名称如 'blogtag'。
  • query : 高级查询选项，只需以 craft 格式传递参数。向下滚动查看示例。

• 添加类的选项 传递以下选项以在不同的输入控件上添加类名。

  • selectClass : 在 <select> 上添加的类。
  • optionClass : 在 <option> 上添加的类。
  • ulClass : 在 <ul> 上添加的类。
  • liClass : 在 <li> 上添加的类。
  • resetWrapperClass : 在重置按钮的 <div> 上添加的类。
  • catWrapperClass : 在类别选项的 <div> 上添加的类。
  • checkFieldDiv : 在复选框字段的 <div> 上添加的类。
  • sortingWrapperClass : 在排序选项的 <div> 上添加的类。
  • messageClass : 错误/成功消息将显示的类。（在 render 中传递）

• 排序控件选项 传递以下选项更改默认字符串。

  • nFirstName : 用于 最新优先 的字符串。默认为 最新优先。
  • oFirstName : 用于 最旧优先 的字符串。默认为 最旧优先。
  • lPriceName : 用于 从低到高 的字符串。默认为 从低到高。
  • hPriceName : 用于 从高到低 的字符串。默认为 从高到低。
  • dSortName : 用于 默认排序 的字符串。默认为 默认排序。

• 更改消息的选项

  • noMoreDataMsg : 当根据 以上设置 或 用户输入 没有找到条目时显示的消息。

• onscroll 事件选项（在 loadMoreVariable 中传递参数）

  • scrollActive : 要激活传递 true 否则 false。您也可以在 CP 中设置默认值。
  • pagesToLoad : 每次滚动要加载的页面数量。
  • bottomOffset : Ajax 将被触发时距底部的像素数。
  • loaderTemplate : 要覆盖默认加载器，请传递您的加载器模板路径。

带有滚动参数的加载更多

 {{ craft.craftAjaxinate.loadMoreVariable({
     loadMoreName: 'Load More',
     scrollActive: true,
     pagesToLoad: 2,
     bottomOffset: 300
     }) 
 }}

带有选项的排序示例

    {{ craft.craftAjaxinate.render({
      selectClass: 'selectClassWrapper',
      optionClass: 'optionClassWrapper',
      sortingWrapperClass: 'sortingWrapperClasss'
    }) }}

页面加载时加载 3 条条目并显示 featuredEntry (lightswitch)、price (number) 的过滤器。也显示 mensClothing 和 shoes 的所有子类别和 technology 的标签。

    {{ craft.craftAjaxinate.render({
      template: 'ajax/stories.twig',
      offset: 3,
      initLoad: true,
      resetBtnState: 1,
      extraFilters: ['featuredEntry', 'price'],
      catGroup: ['mensClothing', 'shoes'],
      sortingFilters:{
        'date': 'eventDate',
        'price': 'price',
      },
      tagGroup: ['technology'],      
    }) }}

页面加载时加载 3 条条目且 shortDescription 不为空。由于未传递限制，将使用 CP 设置。

    {{ craft.craftAjaxinate.render({
      template: 'ajax/stories.twig',
      offset: 3,
      initLoad: true,
      resetBtnState: 1,
      query:{
        'shortDescription':':notempty:',
      },
      
    }) }} 

页面加载时加载 3 条条目且 postDate 在 2019-07-31 之前。

    {{ craft.craftAjaxinate.render({
      template: 'ajax/stories.twig',
      offset: 3,
      initLoad: true,
      resetBtnState: 1,
      query:{
        'before': '2019-07-26'
      },
      
    }) }} 

页面加载时加载4条记录，并且postDate在2019-07-31之前，且shortDescription不能为空。查询中的每一行之间都有and关系。

    {{ craft.craftAjaxinate.render({
      template: 'ajax/stories.twig',
      offset: 4,
      limit: 5,
      initLoad: true,
      resetBtnState: 1,
      query:{
        'shortDescription':':notempty:',
        'before': '2019-07-26'
      }      
    }) }}

title可以是foo或bar。如果没有传递template，则将使用CP设置。

    {{ craft.craftAjaxinate.render({
      limit: 5,
      resetBtnState: 1,
      query:{
        'where': ['or', ['like','title','foo'], ['like','title','bar']],
      }      
    }) }}

title可以是foo或bar或field_featuredEntry（lightswitch）处于活动状态。

在handleName前添加field_。

    {{ craft.craftAjaxinate.render({
      limit: 5,
      resetBtnState: 1,
      query:{
        'where': ['or', ['like','title','foo'], ['like','title','bar']],
        'orWhere': ['and', ['=','field_featuredEntry',1]],
      }      
    }) }}

日期在2019-07-12和2019-07-31之间。

在handleName前添加field_。

    {{ craft.craftAjaxinate.render({
      limit: 5,
      resetBtnState: 1,
      query:{
        'postDate': ['and', '>= 2019-07-12', '<= 2019-07-31'],
        'orWhere': ['and', ['=','field_featuredEntry',1]],
      }      
    }) }}

  # Example of csrf  ( There is no need to declare csrf if its already declared in your site)
  {% set csrfToken = {
    csrfTokenName: craft.app.config.general.csrfTokenName,
    csrfTokenValue: craft.app.request.csrfToken,
  } %}

  {% js %}
    window.Craft = {{ csrfToken | json_encode | raw }};
  {% endjs %}

{# Access all the fields in the iteration. #}

{% for item in entries %}
  <a href="{{item.url}}">{{ item.title }}</a>
  <span>Price : {{ item.priceHanlde }} </span>
  .....
{% endfor %}

条目加载器和过滤器路线图

插件的未来开发计划（如果有任何建议，请在GitHub上创建功能请求）

• 加载更多条目（特定模板）
• 在后台选择默认模板的选项
• 排序
• 过滤器
• 多个加载更多
• 自定义查询new
• 在onload时加载条目选项
• 根据未来条目进行过滤
• 滚动new
• 搜索

支持

发现任何问题😕，创建一个Github Issue

致谢

• 由Saurabh Ranjan开发
• 模板来自pluginfactory

由HestaBit提供