wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

WordPress区块主题教程wordpress古藤堡区块介绍

线性筛选区块–让用户选择多级分类以及关联标签,迅速精确查找产品

线性筛选区块是WEB主题公园根据很多客户的建议和需求新增的一个功能区块,这个区块中,第一个选项可以手动选择使用多个高层分类,选中后 第二个选项则会自动调用他的二级分类,第三个选项调用三级分类,依次类推。

到了最后一个选项,则可以联动前一个选项选择的分类关联的标签,这样就可以实现多层级关联选择分类+标签进行精准的筛选了。

这个功能区块特别适合于产品细分非常多的企业,这样你可以仔细的将产品分类为多级,并且辅助标签添加到各个产品中,可以通过线性的分类层级关联选择+关联标签对产品进行精准筛选。

这个区块还可以与分类主列表以及文章调用区块进行联动,ajax无刷新得到筛选结果,无需翻页等待即可得到结果。

如下图:

实际的效果请访问:https://block.themepark.com.cn/supersimpletravel/category/guonei/

 

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

 

线性筛选区块的设置

插入后,我们可以开始选择一下分类:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

可以看到上图,分类以层级的方式进行选择,一般来说,选择层级较高的分类,可以让他的子分类自动调用,那么,如果我们的分类层级是3层,那么我们在此处只需要选择第一层级的分类就行了,后续的层级会自动调用。

现在我们是三层分类,那么我们需要添加三个分类选择器:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

可见 点击添加按钮,增加了三个分类选项,最后还有个标签选项选择器是默认自带的,(因为标签无层级,是依附于分类的关联,因此只有一个无需再添加了)

然后你可以设置一下区块的样式,图标和文字,成品如下:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

现在,选择好了分类和标签的选项点击按钮,则会跳转到对应的网站列表地址,查看结果。

 

AJAX无刷新结果的两种方式

1.与页面内的文章调用模块进行关联

首先我们插入筛选模块后,下一个模块马上插入一个文章调用模块

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

可见上图层级,这两个模块之间不要有段落或者其他的区块隔开,一定要是紧接着放入的。

然后打开线性筛选区块的选项,开启ajax刷新下方文章列表的选项:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

这样我们就可以使用线性筛选对下方的文章调用区块进行关联了。

文章区块可以采用无刷新增加下一页,这样整个筛选和查看都无需刷新,直接可以在一个页面查看了

如下图,文章区块的标题选项中,找到加载设置,选择第二页或者换一换的方式,设置一下按钮就可以实现了。

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

 

页面中的效果请见演示::https://block.themepark.com.cn/supersimpletravel

 

2.分类目录中使用线性列表AJAX无刷新结果

分类目录是不可以直接使用区块编辑器进行编辑的,因此我们就需要加入区块模板挂载到分类的头部。

首先去区块模板创建一个名称为:产品线性筛选头部模板(名称自己填就行)

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

模板创建后切换到初始化外观,选择全屏模式无动画,开启区块模式

然后又切换回设置,插入区块,为了美观可在线性筛选区块上面加一个图文的区块,做好了之后发布。

然后进入分类目录,编辑最顶层的分类(他的子分类如果都是默认选项,那么会继承顶层分类的样式设置,所以只需要编辑顶级分类,子分类都会继承,不需要一个个的设置)

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

这里挂载之后,我们在分类中就可以看到了:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

 

分类列表上加入了线性筛选,也可以开启一下ajax加载更多的翻页功能,这样筛选结果不会因为翻页而丢失。

进入主题选项-默认筛选和列表选项最后:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

这里填写加载更多的按钮文字,提交保存就可以了

效果如下:

wordpress区块:线性筛选区块-多级联动选择以及ajax无刷新筛选结果说明

分类的效果可见演示请访问:https://block.themepark.com.cn/supersimpletravel/category/guonei/

 

下一篇:

文章评论

您好!请登录

取消回复
    展开更多