通过分页、排序和过滤功能优化电子商务导航

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签分页

在我的网络笔记中查看这篇文章！

我们正在使我们的商店变得越来越人性化，今天我们将在我们的电子商务商店改进方面又迈出一步。在之前的文章中，我们已经添加了分页、排序和过滤器，但它们只是我们模板的一部分，没有任何功能，现在是时候修复它了，所以让我们开始为今天的工作构建一个简单的计划，并继续改进我们的商店nuxt.js.

只是想提醒一下，您可以在这里查看我们正在构建的演示，以及这里的源代码。

分页。将产品列表划分为可管理的页面。
通过用户友好的界面实现排序功能。
根据相关产品属性（例如类别）实施过滤器。

概述了需要改进的关键领域后，是时候卷起袖子深入研究实施细节了。我们的目标是通过向之前实现的分页、排序和过滤功能添加功能，将 nuxt.js 电子商务商店转变为用户友好的平台。让我们从处理分页功能开始，该功能会将我们的产品列表划分为可管理、可抓取的页面，以增强浏览体验。

1.分页。将产品列表划分为可管理的页面。

之前我们在商店页面添加了分页元素，我喜欢它的设计，所以我不会改变css样式，只改变分页功能。

什么是分页？分页是一种用于将大量内容（例如产品列表）划分为单独页面的技术。这有助于通过一次仅加载内容的子集来提高网站性能，使用户更轻松地浏览信息。

在我们的例子中，产品列表将是我们的“大内容”，所以让我们修改产品数组，但不要直接在商店状态中修改它，让我们在商店 getter 中渲染之前修改它。对于打开的产品商店和内部状态，添加将存储“currentpage”和“itemsperpage”值的分页对象，然后在 getter 内部创建新的 getter“gpaginateditem”，它将接受项目列表并逐部分返回该列表。该 getter 将计算页面的开始值和结束值，并在这些值之间“切片”项目列表：

gpaginateditems: (state) =&gt; (items) =&gt; {    const start = (state.pagination.currentpage - 1) * state.pagination.itemsperpage;    const end = start + state.pagination.itemsperpage;    return items.slice(start, end);},

下一步，我们需要创建仅修改“currentpage”值的操作，它们将用于更改页面。

asetpage(page) {    this.pagination.currentpage = page;},anextpage() {    if (this.pagination.currentpage  1) {        this.pagination.currentpage--;    }}

现在我们可以转到我们的商店页面，其中有一些更改：

<div class="products__content">    <productcard v-for="product in productsstore.gpaginateditems(productsstore.gproductslist)" :key="product.id" :product="product"></productcard></div>

<div class="products__pagination">    <ul class="page"><li class="page__btn"><nuxticon name="chevron-left-solid"></nuxticon></li>        <li v-if="productsstore.gcurrentpage &gt; 2" class="page__numbers">1</li>        <li v-if="productsstore.gcurrentpage &gt; 2" class="page__dots">...</li>        <li v-for="page in displayedpages" :key="page" class="page__numbers" :class="{ active: productsstore.gcurrentpage === page }">            {{ page }}        </li>        <li v-if="productsstore.gcurrentpage &lt; productsstore.gtotalpages - 1" class="page__dots">...</li>        <li v-if="productsstore.gcurrentpage &lt; productsstore.gtotalpages - 1" class="page__numbers">{{ productsstore.gtotalpages }}</li>        <li class="page__btn"><nuxticon name="chevron-right-solid"></nuxticon></li>    </ul></div>

是的，就是这样，现在我们只需要重新启动 nuxt 开发服务器，添加更多测试产品，并尝试分页行为。

我喜欢它的外观和工作原理，但我们没有时间玩，需要继续前进。

2. 通过用户友好的界面实现排序功能。

在我们的设计中，我们已经有一个包含所有排序选项的下拉菜单，因此我们只需要接收用户选择的选项并对我们所有的产品进行排序，但不要忘记它应该与我们的分页同时实现。

请打开产品存储并添加一个新变量“排序”，默认值为“流行度”。让我们使用我们将在操作中对产品进行排序的变体，在这种情况下，我们需要创建一个新的排序操作并添加一个条件语句，该条件语句将根据排序值修改我们的产品列表。

asetsort(sort) {    this.sort = sort;    if (sort === 'ltoh') {        return this.productslist.sort((a, b) =&gt; a.price - b.price);    } else if (sort === 'htol') {        return this.productslist.sort((a, b) =&gt; b.price - a.price);    }},

另外，不要忘记添加一个将返回排序语句值的 getter。接下来，我们需要再次修改我们的商店页面，并简单地使用新值更新排序下拉列表：

<div class="products__header--select">    <p>sort by</p>    <select v-model="sort"><option selected value="popularity">popularity</option><option value="ltoh">price: low to high</option><option value="htol">price: high to low</option></select></div>

并将 setter-getter 添加到我们的排序值中：

sort: {    get() {        return this.productsstore.gsort;    },    set(value) {        this.productsstore.asetsort(value);        this.productsstore.asetpage(1);    }}

太好了，重启 nuxt 开发服务器并检查结果：

3. 根据相关产品属性（例如类别）实施过滤器。

这是我们今天的第三部分，也是最后一部分，我们将为不同的产品类别添加和配置过滤器。为此，打开产品商店并将“categoryfilter”变量添加到状态中，然后添加“asetcategoryfilter”操作，该操作将简单地更新我们的过滤器，并根据该过滤器值，我们将返回过滤后的产品列表。修改“gproductslist”getter，它将按类别键过滤所有项目，并仅返回具有某些特定类别的项目。

gproductslist: (state) =&gt; {    let products = state.productslist;    if (state.categoryfilter) {        products = products.filter(el =&gt; el.category === state.categoryfilter);    }    if (state.categoryfilter === 'all') {        products = state.productslist    }    return products;},

您可以在该列表中添加任意数量的过滤器，并使用户可以选择他们正在寻找的产品。

此外，我们还需要修改商店模板中的过滤器本身：

{{ category }}

现在，只要用户按下某个过滤类别，我们的应用程序就会返回已过滤的产品列表。

在本文中，我们通过实现三个基本功能来优化 nuxt.js 商店的电子商务导航体验：分页、排序和过滤。我们首先添加分页功能，将产品列表划分为可管理的页面，以获得更好的性能和用户体验。接下来，我们实现了排序选项，允许客户根据受欢迎程度、价格从低到高、价格从高到低对产品进行排序，增强用户偏好。最后，我们结合了基于产品类别的过滤器，使客户能够快速缩小搜索结果范围。在整个实施过程中，我们保持了用户友好的界面，确保了无缝且直观的导航体验。通过优化这些关键功能，我们不仅提高了电子商务平台的整体可用性，还可能提高客户满意度、转化率和自然流量。

学习某些东西的最佳变体是自己制作它，同样的事情也适用于编码，但如果您需要本教程的源代码，您可以在这里获取。

文章推荐

通过分页、排序和过滤功能优化电子商务导航

1.分页。将产品列表划分为可管理的页面。

2. 通过用户友好的界面实现排序功能。

3. 根据相关产品属性（例如类别）实施过滤器。

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？