product3.js

var productsList= [
    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/cream_300x.png?v=1668756103",
        name: "Airdopes 131",
        rev: "4.8 | 1295 reviews",
        discount:"67% off",
        price: "999",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/ivory-white_69842c05-b55f-48ff-90ed-9411992d960d_300x.png?v=1658994528",
        name: "TRebel Airdopes 131",
        rev: "4.7 | 56 reviews",
        discount:"57% off",
        price: "1299",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },


    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/back_300x.png?v=1668599490",
        name: "Airdopes 141",
        rev: "4.8 | 596 reviews",
        discount:"67% off",
        price: "1499",
        strikedoffprice: "4490",
        save: "Save ₹15 more on UPI payment",
    },


    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/grey_92c7203d-e618-4992-864f-cc69f45cbdb2_300x.png?v=1648723865",
        name: "TRebel Airdopes 141",
        rev: "5.0 | 63 reviews",
        discount:"67% off",
        price: "1499",
        strikedoffprice: "4490",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/Grey_560cad08-698b-45d6-a3dd-d10ae3fec8ee_300x.png?v=1657775492",
        name: "Airdopes 131 PRO",
        rev: "4.9 | 154 reviews",
        discount:"57% off",
        price: "1299",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/main1_c5f9fe7c-c012-4d93-ba0c-b25267c0560d_300x.png?v=1647426797",
        name: "Airdopes 411 ANC",
        rev: "4.8 | 67 reviews",
        discount:"50% off",
        price: "2499",
        strikedoffprice: "4990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/fvtfgvt_300x.png?v=1658150489",
        name: "Airdopes 121 PRO",
        rev: "4.9 | 40 reviews",
        discount:"50% off",
        price: "1499",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/airdopes-121-v2-blue_300x.png?v=1612765376",
        name: "Airdopes 121 v2",
        rev: "4.8 | 562 reviews",
        discount:"57% off",
        price: "1299",
        strikedoffprice: "2999",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/115-main2_300x.png?v=1655368638",
        name: "Airdopes 115",
        rev: "4.9 | 82 reviews",
        discount:"47% off",
        price: "1599",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/402-main-img_300x.png?v=1630059242",
        name: "Airdopes 402",
        rev: "4.8 | 481 reviews",
        discount:"67% off",
        price: "1999",
        strikedoffprice: "5990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/main-image_e269db64-c847-4f30-b904-ccb4d973ae52_300x.png?v=1655526604",
        name: "Airdopes 131 DC Edition with 13 mm Driver",
        rev: "5.0 | 10 reviews",
        discount:"53% off",
        price: "1399",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/main_white_300x.png?v=1641206209",
        name: "Airdopes 161",
        rev: "4.9 | 117 reviews",
        discount:"44% off",
        price: "1399",
        strikedoffprice: "2490",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/a1b32b3b-7ed4-4b58-ade4-088ee08914c4_300x.png?v=1625046016",
        name: "Airdopes 441",
        rev: "4.9 | 288 reviews",
        discount:"58% off",
        price: "2499",
        strikedoffprice: "5999",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/a78da6b8-689c-40f3-9c50-bcb4998c5f2a_300x.png?v=1625045618",
        name: "Airdopes 381",
        rev: "4.8 | 122 reviews",
        discount:"56% off",
        price: "2199",
        strikedoffprice: "4990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/airdopes-381-pink_9a1088cc-2e91-4acb-9d7c-841033532bfe_300x.png?v=1615468286",
        name: "TRebel Airdopes 381",
        rev: "4.8 | 12 reviews",
        discount:"56% off",
        price: "2199",
        strikedoffprice: "4990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/402-main-img_e2e6523c-c448-40bd-be18-117f2fc151cc_300x.png?v=1630569010",
        name: "Airdopes 131",
        rev: "4.8 | 9 reviews",
        discount:"67% off",
        price: "1999",
        strikedoffprice: "5990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/main_blue_eb862c0f-658f-43a2-99c2-65783233f592_300x.png?v=1641980344",
        name: "Airdopes 181",
        rev: "4.9 | 39 reviews",
        discount:"47% off",
        price: "1599",
        strikedoffprice: "2990",
        save: "Save ₹15 more on UPI payment",
    },

    {
        img_link: "https://cdn.shopify.com/s/files/1/0057/8938/4802/products/451v2_green_300x.png?v=1641467014",
        name: "Airdopes 451v2",
        rev: "4.8 | 33 reviews",
        discount:"50% off",
        price: "2999",
        strikedoffprice: "5999",
        save: "Save ₹15 more on UPI payment",
    },


    
    
];
    
//Function to append products//
showList(productsList);

function showList(productsList){
    document.getElementById("parent").innerHTML = "";
    productsList.map(function(elem, i){

        var div = document.createElement("div");
        div.setAttribute("class","card");

        var img = document.createElement("img");
        img.setAttribute("src",elem.img_link);

        var imgBx = document.createElement("div");
        imgBx.setAttribute("class","imgBx");
        imgBx.append(img);

        var name = document.createElement("h3");
        name.textContent=elem.name;
        name.setAttribute("class","name");

        //
        var stars = document.createElement("i");
        stars.setAttribute("class", "fa-solid fa-star");

        var rev = document.createElement("p");
        rev.textContent=elem.rev;
        rev.setAttribute("class","rev");

        // Consists of star, rating, rev
        reviewBox = document.createElement("div");
        reviewBox.setAttribute("class","reviewBox");
        reviewBox.append(stars, rev);
        //

        var x = document.createElement("hr");

        var disc = document.createElement("p");
        disc.textContent=elem.disc;
        disc.setAttribute("class","disc");

        var priceEle = document.createElement("p");
        priceEle.setAttribute("class","price");
        priceEle.textContent = "₹"+" "+elem.price;

        var strikedoffprice = document.createElement("p");
        strikedoffprice.setAttribute("class","strprice");
        strikedoffprice.textContent = "₹"+" "+elem.strikedoffprice;

        // Consists of Disc, Price & Striked Price
        var priceparent = document.createElement("div");
        priceparent.setAttribute("class","priceparent");
        priceparent.append(disc,priceEle,strikedoffprice);

        var save = document.createElement("p");
        save.textContent=elem.save;
        save.setAttribute("class","save");

        var shopCartbtn = document.createElement("button");
        shopCartbtn.textContent="ADD TO CART";
        shopCartbtn.setAttribute("class","shopCartbtn");
        shopCartbtn.addEventListener("click", function() {
            addtocart(i);
        });

        // Constist of all contents in side of image
        var description = document.createElement("div");
        description.setAttribute("class","description");
        description.append(name,reviewBox,x,priceparent,save,shopCartbtn); ///

        div.append(imgBx,description);
        document.getElementById("parent").append(div);
    });
}


//Sorting 
function sortFun(){
    var selected=document.querySelector("#sort").value;
    var sortProduct ;
    if(selected=="Sort by Featured"){
        console.log(productsList);
        sortProduct =  productsList; 
    }
    else if(selected=="Price, low to high"){
        sortProduct =  productsList.sort(function(a,b){
        return parseFloat(a.price)-parseFloat(b.price);
    })  
    }
    else if(selected=="Price, high to low"){
        sortProduct =  productsList.sort(function(a,b){
        return parseFloat(b.price)-parseFloat(a.price);
    })  
    }

    else if(selected==="Alphabetically, A-Z"){
        sortProduct =  productsList.sort(function(a,b){
            if(a.name>b.name) return 1;
            if(a.name<b.name) return -1;
            return 0;
        });  
    }

    else if(selected==="Alphabetically, Z-A"){
        sortProduct =  productsList.sort(function(a,b){
            if(a.name>b.name) return -1;
            if(a.name<b.name) return 1;
            return 0;
    })  
    }

    console.log(sortProduct)

    return showList(sortProduct);
}


// Add to Cart

var cartProduct = JSON.parse(localStorage.getItem("cart")) || [];
        
function addtocart(index){
    event.preventDefault()
    alert("Product added to cart sucessfully !")
    var flag = 0
    var ind  = 0
    var prod = productsList.filter(function(elem,i){
        return i == index
    })
    var cartp = cartProduct.filter(function(elem,i){
        if(elem.name === prod[0].name){
            flag = 1
            ind = i
        }
    })
    if(flag == 0){
        prod[0].qty = 1
        cartProduct.push(prod[0])
    }
    else{
        cartProduct[ind].qty++
        flag = 0
    }
    localStorage.setItem("cart",JSON.stringify(cartProduct))
    console.log(cartProduct)
    var cartItems = JSON.parse(localStorage.getItem("cart")) || []
        var items =  cartItems.length
        console.log(items)
        if(items>0){
        document.querySelector(".nitems").textContent = items
        }
    
}
      
var cartItems = JSON.parse(localStorage.getItem("cart")) || [];
var items =  cartItems.length;
console.log(items);
if(items>0){
    document.querySelector(".nitems").textContent = items
}

// Mouse Moves

function displayData(){
    var keep = document.querySelector(".curser")
    keep.style.display = "grid";
    keep.style.background = "white";
    document.querySelector("body").addEventListener("mouseleave",removeData)
  }
  document.querySelector(".mouse").addEventListener("mouseover",displayData)
  
function removeData(){
    var keep = document.querySelector(".curser")
    keep.style.display = "none";
}
document.querySelector("body").addEventListener("mouseleave",removeData)