在我的網(wǎng)絡(luò)筆記中查看這篇文章！
我們正在使我們的商店變得越來越人性化，今天我們將在我們的電子商務(wù)商店改進(jìn)方面又邁出一步。在之前的文章中，我們已經(jīng)添加了分頁、排序和過濾器，但它們只是我們模板的一部分，沒有任何功能，現(xiàn)在是時(shí)候修復(fù)它了，所以讓我們開始為今天的工作構(gòu)建一個(gè)簡單的計(jì)劃，并繼續(xù)改進(jìn)我們的商店nuxt.js.
只是想提醒一下，您可以在這里查看我們正在構(gòu)建的演示，以及這里的源代碼。
-
分頁。將產(chǎn)品列表劃分為可管理的頁面。
通過用戶友好的界面實(shí)現(xiàn)排序功能。
根據(jù)相關(guān)產(chǎn)品屬性（例如類別）實(shí)施過濾器。
概述了需要改進(jìn)的關(guān)鍵領(lǐng)域后，是時(shí)候卷起袖子深入研究實(shí)施細(xì)節(jié)了。我們的目標(biāo)是通過向之前實(shí)現(xiàn)的分頁、排序和過濾功能添加功能，將 nuxt.js 電子商務(wù)商店轉(zhuǎn)變?yōu)橛脩粲押玫钠脚_(tái)。讓我們從處理分頁功能開始，該功能會(huì)將我們的產(chǎn)品列表劃分為可管理、可抓取的頁面，以增強(qiáng)瀏覽體驗(yàn)。
1.分頁。將產(chǎn)品列表劃分為可管理的頁面。
之前我們在商店頁面添加了分頁元素，我喜歡它的設(shè)計(jì)，所以我不會(huì)改變css樣式，只改變分頁功能。
什么是分頁？分頁是一種用于將大量內(nèi)容（例如產(chǎn)品列表）劃分為單獨(dú)頁面的技術(shù)。這有助于通過一次僅加載內(nèi)容的子集來提高網(wǎng)站性能，使用戶更輕松地瀏覽信息。
在我們的例子中，產(chǎn)品列表將是我們的“大內(nèi)容”，所以讓我們修改產(chǎn)品數(shù)組，但不要直接在商店?duì)顟B(tài)中修改它，讓我們在商店 getter 中渲染之前修改它。對于打開的產(chǎn)品商店和內(nèi)部狀態(tài)，添加將存儲(chǔ)“currentpage”和“itemsperpage”值的分頁對象，然后在 getter 內(nèi)部創(chuàng)建新的 getter“gpaginateditem”，它將接受項(xiàng)目列表并逐部分返回該列表。該 getter 將計(jì)算頁面的開始值和結(jié)束值，并在這些值之間“切片”項(xiàng)目列表：
gpaginateditems: (state) => (items) => {
const start = (state.pagination.currentpage - 1) * state.pagination.itemsperpage;
const end = start + state.pagination.itemsperpage;
return items.slice(start, end);
},
登錄后復(fù)制
下一步，我們需要?jiǎng)?chuàng)建僅修改“currentpage”值的操作，它們將用于更改頁面。
asetpage(page) {
this.pagination.currentpage = page;
},
anextpage() {
if (this.pagination.currentpage 1) {
this.pagination.currentpage--;
}
}
登錄后復(fù)制
現(xiàn)在我們可以轉(zhuǎn)到我們的商店頁面，其中有一些更改：
更新產(chǎn)品列表部分，我們需要添加 getter，它將使用產(chǎn)品列表作為參數(shù)并一次僅渲染一頁；
<div class="products__content">
<productcard v-for="product in productsstore.gpaginateditems(productsstore.gproductslist)" :key="product.id" :product="product"></productcard>
</div>
登錄后復(fù)制
更新我們的分頁部分，添加將更改頁面的點(diǎn)擊事件（箭頭的上一頁和下一頁并將頁面設(shè)置為每個(gè)數(shù)字），實(shí)現(xiàn)僅顯示第一頁、最后一頁和當(dāng)前頁面的功能；
<div class="products__pagination">
<ul class="page">
<li class="page__btn"><nuxticon name="chevron-left-solid"></nuxticon></li>
<li v-if="productsstore.gcurrentpage > 2" class="page__numbers">1</li>
<li v-if="productsstore.gcurrentpage > 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 < productsstore.gtotalpages - 1" class="page__dots">...</li>
<li v-if="productsstore.gcurrentpage < productsstore.gtotalpages - 1" class="page__numbers">{{ productsstore.gtotalpages }}</li>
<li class="page__btn"><nuxticon name="chevron-right-solid"></nuxticon></li>
</ul>
</div>
登錄后復(fù)制
是的，就是這樣，現(xiàn)在我們只需要重新啟動(dòng) nuxt 開發(fā)服務(wù)器，添加更多測試產(chǎn)品，并嘗試分頁行為。
我喜歡它的外觀和工作原理，但我們沒有時(shí)間玩，需要繼續(xù)前進(jìn)。
2. 通過用戶友好的界面實(shí)現(xiàn)排序功能。
在我們的設(shè)計(jì)中，我們已經(jīng)有一個(gè)包含所有排序選項(xiàng)的下拉菜單，因此我們只需要接收用戶選擇的選項(xiàng)并對我們所有的產(chǎn)品進(jìn)??行排序，但不要忘記它應(yīng)該與我們的分頁同時(shí)實(shí)現(xiàn)。
請打開產(chǎn)品存儲(chǔ)并添加一個(gè)新變量“排序”，默認(rèn)值為“流行度”。讓我們使用我們將在操作中對產(chǎn)品進(jìn)行排序的變體，在這種情況下，我們需要?jiǎng)?chuàng)建一個(gè)新的排序操作并添加一個(gè)條件語句，該條件語句將根據(jù)排序值修改我們的產(chǎn)品列表。
asetsort(sort) {
this.sort = sort;
if (sort === 'ltoh') {
return this.productslist.sort((a, b) => a.price - b.price);
} else if (sort === 'htol') {
return this.productslist.sort((a, b) => b.price - a.price);
}
},
登錄后復(fù)制
另外，不要忘記添加一個(gè)將返回排序語句值的 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>
登錄后復(fù)制
并將 setter-getter 添加到我們的排序值中：
sort: {
get() {
return this.productsstore.gsort;
},
set(value) {
this.productsstore.asetsort(value);
this.productsstore.asetpage(1);
}
}
登錄后復(fù)制
太好了，重啟 nuxt 開發(fā)服務(wù)器并檢查結(jié)果：
3. 根據(jù)相關(guān)產(chǎn)品屬性（例如類別）實(shí)施過濾器。
這是我們今天的第三部分，也是最后一部分，我們將為不同的產(chǎn)品類別添加和配置過濾器。為此，打開產(chǎn)品商店并將“categoryfilter”變量添加到狀態(tài)中，然后添加“asetcategoryfilter”操作，該操作將簡單地更新我們的過濾器，并根據(jù)該過濾器值，我們將返回過濾后的產(chǎn)品列表。修改“gproductslist”getter，它將按類別鍵過濾所有項(xiàng)目，并僅返回具有某些特定類別的項(xiàng)目。
gproductslist: (state) => {
let products = state.productslist;
if (state.categoryfilter) {
products = products.filter(el => el.category === state.categoryfilter);
}
if (state.categoryfilter === 'all') {
products = state.productslist
}
return products;
},
登錄后復(fù)制
您可以在該列表中添加任意數(shù)量的過濾器，并使用戶可以選擇他們正在尋找的產(chǎn)品。
此外，我們還需要修改商店模板中的過濾器本身：
登錄后復(fù)制
-
{{ category }}
現(xiàn)在，只要用戶按下某個(gè)過濾類別，我們的應(yīng)用程序就會(huì)返回已過濾的產(chǎn)品列表。
在本文中，我們通過實(shí)現(xiàn)三個(gè)基本功能來優(yōu)化 nuxt.js 商店的電子商務(wù)導(dǎo)航體驗(yàn)：分頁、排序和過濾。我們首先添加分頁功能，將產(chǎn)品列表劃分為可管理的頁面，以獲得更好的性能和用戶體驗(yàn)。接下來，我們實(shí)現(xiàn)了排序選項(xiàng)，允許客戶根據(jù)受歡迎程度、價(jià)格從低到高、價(jià)格從高到低對產(chǎn)品進(jìn)行排序，增強(qiáng)用戶偏好。最后，我們結(jié)合了基于產(chǎn)品類別的過濾器，使客戶能夠快速縮小搜索結(jié)果范圍。在整個(gè)實(shí)施過程中，我們保持了用戶友好的界面，確保了無縫且直觀的導(dǎo)航體驗(yàn)。通過優(yōu)化這些關(guān)鍵功能，我們不僅提高了電子商務(wù)平臺(tái)的整體可用性，還可能提高客戶滿意度、轉(zhuǎn)化率和自然流量。
學(xué)習(xí)某些東西的最佳變體是自己制作它，同樣的事情也適用于編碼，但如果您需要本教程的源代碼，您可以在這里獲取。
