通過分頁、排序和過濾功能優化電子商務導航-魔扣目錄

在我的網絡筆記中查看這篇文章！

我們正在使我們的商店變得越來越人性化，今天我們將在我們的電子商務商店改進方面又邁出一步。在之前的文章中，我們已經添加了分頁、排序和過濾器，但它們只是我們模板的一部分，沒有任何功能，現在是時候修復它了，所以讓我們開始為今天的工作構建一個簡單的計劃，并繼續改進我們的商店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--;
    }
}

登錄后復制

現在我們可以轉到我們的商店頁面，其中有一些更改：

更新產品列表部分，我們需要添加 getter，它將使用產品列表作為參數并一次僅渲染一頁；

<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 商店的電子商務導航體驗：分頁、排序和過濾。我們首先添加分頁功能，將產品列表劃分為可管理的頁面，以獲得更好的性能和用戶體驗。接下來，我們實現了排序選項，允許客戶根據受歡迎程度、價格從低到高、價格從高到低對產品進行排序，增強用戶偏好。最后，我們結合了基于產品類別的過濾器，使客戶能夠快速縮小搜索結果范圍。在整個實施過程中，我們保持了用戶友好的界面，確保了無縫且直觀的導航體驗。通過優化這些關鍵功能，我們不僅提高了電子商務平臺的整體可用性，還可能提高客戶滿意度、轉化率和自然流量。

學習某些東西的最佳變體是自己制作它，同樣的事情也適用于編碼，但如果您需要本教程的源代碼，您可以在這里獲取。

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡