如何在购物车下拉菜单 JavaScript 中只显示三个项目？

Question

我的电子商务网络应用程序中添加了购物车功能。所以在 header 里面有一个购物车的图标。因此，当任何人单击该图标时，会出现下拉菜单，其中显示了购物车内添加的项目。因此，如果我添加了 10 个项目，那么下拉列表会变得太长而无法显示。所以我只想在那里显示 2-3 个项目并查看更多按钮，用户可以通过该按钮重定向到购物车页面并可以看到他们添加的项目。

下面是我在下拉列表中显示购物车项目的脚本：

function displayCart(){
    var cart = JSON.parse(localStorage.getItem("cart"));
    var list = cart;
    var orderlist = "";
    if(list != null && list != 0){
        for(var i = 0 ; i < list.length ; i++) {
            var category = list[i].category;
            var productid = list[i].productid;
            var productname = list[i].productname;
            var pname = productname.replaceAll(' ','-');
            var quantity = list[i].quantity;
            var price_with_quantity = list[i].pprice;
            var image = list[i].productimage;
            orderlist = orderlist + "<li class=\"single-shopping-cart\">"
                    +"<div class=\"shopping-cart-img\">"
                       +"<input type=\"hidden\" id=\"hpid\" value="+productid+">"
                        +"<a href='singleproduct'>" 
                            +"<img alt="+pname+" src="+image+"/>"
                        +"</a>" 
                        +"<span class=\"product-quantity\">"+quantity+"x</span>"
                    +"</div>"
                    +"<div class=\"shopping-cart-title\">"
                        +"<h4>"
                            +"<a href='WebUrl.singleproduct'>"+productname+"</a>"
                        +"</h4>"
                        +"<span>&#8377;&nbsp;"+price_with_quantity+"</span>"
                        +"<div class=\"shopping-cart-delete\">"
                            +"<a href=\"#\" onclick=\"removeitem("+productid+");\"><i class=\"ion-android-cancel\"></i></a>"
                        +"</div>"
                    +"</div>"
                +"</li>";  
        }
    }else{
        orderlist = "<li>"
                        +"<div id=\"cart_empty\">No items in cart yet</div>"
                        +"<div id=\"ad_item\" style=\"text-align: center;\">Add items to your cart</div>"
                    +"</li>"
                    +"<div class=\"shopping-cart-btn text-center\">"
                        +"<a class=\"default-btn\" href=\"<%=WebUrl.login%>\">Login</a>"
                    +"</div> ";
        $(".shopping-cart-btn").hide();
    }
    document.getElementById('cartitems').innerHTML = orderlist;
}

如何在购物车下拉菜单中只显示 3 件商品？

Screenshot to show cart

Answer 1

const listLength = list.length > 2 ? 2 : list.length
for(var i = 0 ; i < listLength ; i++) {
    .....
}

Answer 2

我认为你可以只对数组进行切片并获得你需要的项目。

切片工作原理的示例；

const arr = [1, 2, 3, 4, 5, 6];

arr.slice(0, 3); // get items from 0th index till 3rd index (not including 3rd)

如何在购物车下拉菜单 JavaScript 中只显示三个项目？

How to display only three items inside cart dropdown JavaScript?

javascript

jquery

shopping-cart

local-storage

web-storage