haircaredata.js

var haircare_array = [
    {
        tag: "Shampoo",
        image_url: "https://cdn14.nnnow.com/web-images/medium/styles/ZXCZQG4LPA2/1586865417849/1.jpg",
        brand: "Aveda",
        description: "Cherry Almond Softening Shampoo",
        price: 1300,
        gender: "Female",
        skin_type: "Normal", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn09.nnnow.com/web-images/medium/styles/DSHD0M5WT0Z/1586865417815/1.jpg",
        brand: "Aveda",
        description: "Shampure™ Nurturing Shampoo",
        price: 1500,
        gender: "Female",
        skin_type: "Normal", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn19.nnnow.com/web-images/medium/styles/PDOEXQ0ITGY/1586865417839/1.jpg",
        brand: "Aveda",
        description: "Be Curly™ Shampoo",
        price: 2250,
        gender: "Female",
        skin_type: "Normal", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn14.nnnow.com/web-images/medium/styles/ZXCZQG4LPA2/1586865417849/1.jpg",
        brand: "Aveda",
        description: "Cherry Almond Softening Shampoo",
        price: 1300,
        gender: "Male",
        skin_type: "Normal", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn09.nnnow.com/web-images/medium/styles/DSHD0M5WT0Z/1586865417815/1.jpg",
        brand: "Aveda",
        description: "Shampure™ Nurturing Shampoo",
        price: 1500,
        gender: "Male",
        skin_type: "Combination", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn03.nnnow.com/web-images/medium/styles/9YJY1PG9ERJ/1580451959421/1.jpg",
        brand: "Aveda",
        description: "Nutriplenish™ Shampoo Light Moisture",
        price: 750,
        gender: "Male",
        skin_type: "Dry", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn17.nnnow.com/web-images/medium/styles/7Q8UUW0TDB4/1609913734081/1.jpg",
        brand: "Aveda",
        description: "Invati Advanced™ Exfoliating Shampoo: Light",
        price: 2450,
        gender: "Female",
        skin_type: "Oily", 
    },
    {
        tag: "Shampoo",
        image_url: "https://cdn13.nnnow.com/web-images/medium/styles/F8JPSETLF92/1586865417816/1.jpg",
        brand: "Aveda",
        description: "Sap Moss Weightless Hydration Shampoo",
        price: 2250,
        gender: "Male",
        skin_type: "Normal", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn04.nnnow.com/web-images/medium/styles/1M1KRTW6BV5/1571036172269/1.jpg",
        brand: "Aveda",
        description: "Sap Moss Weightless Hydration Conditioner",
        price: 2400,
        gender: "Male",
        skin_type: "Normal", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn17.nnnow.com/web-images/medium/styles/2A8YHU3CSEM/1586865417790/1.jpg",
        brand: "Aveda",
        description: "Cherry Almond Softening Conditioner",
        price: 1750,
        gender: "Female",
        skin_type: "Combination", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn02.nnnow.com/web-images/medium/styles/HHE9KAXKW8L/1586865417823/1.jpg",
        brand: "Aveda",
        description: "Cherry Almond Softening Leave-In Conditioner",
        price: 1750,
        gender: "Male",
        skin_type: "Dry", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn16.nnnow.com/web-images/medium/styles/1Z491AQYL9B/1580451959406/1.jpg",
        brand: "Aveda",
        description: "Nutriplenish™ Conditioner Light Moisture",
        price: 750,
        gender: "Male",
        skin_type: "Oily", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn10.nnnow.com/web-images/medium/styles/B428LT1Z7YB/1580451959400/1.jpg",
        brand: "Aveda",
        description: "Nutriplenish™ Leave-In-Conditioner",
        price: 2850,
        gender: "Female",
        skin_type: "Normal", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn15.nnnow.com/web-images/medium/styles/KOBW76KOJ54/1586865417830/1.jpg",
        brand: "Aveda",
        description: "Be Curly™ Conditioner",
        price: 2350,
        gender: "Male",
        skin_type: "Combination", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn12.nnnow.com/web-images/medium/styles/HRR0YRUUCK4/1586865417824/1.jpg",
        brand: "Aveda",
        description: "Shampure™ Conditioner",
        price: 750,
        gender: "Female",
        skin_type: "Dry", 
    },
    {
        tag: "Conditioner",
        image_url: "https://cdn11.nnnow.com/web-images/medium/styles/GSYDXLHZLUU/1580451959414/1.jpg",
        brand: "Aveda",
        description: "Nutriplenish™ Conditioner Deep Moisture",
        price: 750,
        gender: "Male",
        skin_type: "Oily", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn16.nnnow.com/web-images/medium/styles/WLNYC1O7H10/1652253085725/1.jpg",
        brand: "Sephora collection",
        description: "Protective Hair Oil With Moringa Oil",
        price: 2000,
        gender: "Male",
        skin_type: "Normal", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn19.nnnow.com/web-images/medium/styles/X1XO2C0IMAC/1634886167233/1.jpg",
        brand: "Moroccanoil",
        description: "Mending Infusion",
        price: 2700,
        gender: "Male",
        skin_type: "Combination", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn12.nnnow.com/web-images/medium/styles/TDFZTYEVKX4/1635244791517/1.jpg",
        brand: "Moroccanoil",
        description: "Beach Wave Hair Mousse",
        price: 2160,
        gender: "Male",
        skin_type: "Oily", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn08.nnnow.com/web-images/medium/styles/0XBYOPD1N2D/1634886109094/1.jpg",
        brand: "Moroccanoil",
        description: "Restorative Hair Mask",
        price: 3330,
        gender: "Female",
        skin_type: "Dry", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn11.nnnow.com/web-images/medium/styles/NXSX9L9VBBL/1652252632363/1.jpg",
        brand: "Ouai",
        description: "Matte Pomade",
        price: 2700,
        gender: "Female",
        skin_type: "Normal", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn12.nnnow.com/web-images/medium/styles/QJ2QNWIE87T/1652252637863/1.jpg",
        brand: "Ouai",
        description: "Wave Spray",
        price: 2200,
        gender: "Female",
        skin_type: "Combination", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn00.nnnow.com/web-images/medium/styles/644ZRGY12NH/1652252610548/1.jpg",
        brand: "Ouai",
        description: "Finishing Crème",
        price: 2700,
        gender: "Female",
        skin_type: "Dry", 
    },
    {
        tag: "HairStyling",
        image_url: "https://cdn00.nnnow.com/web-images/medium/styles/V73BE2NW20M/1652252643744/1.jpg",
        brand: "Ouai",
        description: "Volume Spray",
        price: 2450,
        gender: "Female",
        skin_type: "Oily", 
    },
]

//let cartstore = JSON.parse(localStorage.getItem("cart_sephora")) || [];

// Brand -> Aveda , Ouai ,Moroccanoil
// let content = document.getElementById("content");
// haircaredata.forEach(function(elem,index){
//     let prodBox = document.createElement("div");
//     let image = document.createElement("img");
//     let brand = document.createElement("h4");
//     brand.innerText = (elem.brand).toUpperCase();
//     brand.setAttribute("id","brandname");
//     image.setAttribute("src",elem.image_url);
//     image.setAttribute("id","prodimg");
//     prodBox.append(image,brand);
//     content.append(prodBox);
    // if(index%4 == 0){
    //       cartstore.push(elem);
    // }
//})
localStorage.setItem("haircare_products",JSON.stringify(haircare_array));
var haircare_obj = JSON.parse(localStorage.getItem("haircare_products")) || [];
display(haircare_obj);

function display(hair_array){
    console.log(hair_array);
    // console.log(hair_array.length);
    
    document.getElementById("product_display").innerHTML = "";
    hair_array.map(function(elem,index){
        console.log(elem.brand);
        var div2 = document.createElement("div");
        var image = document.createElement("img");
        image.setAttribute("src",elem.image_url);
        image.setAttribute("atl",elem.brand);
        var name = document.createElement("h4");
        name.innerText = elem.brand;
        var info = document.createElement("p");
        info.innerText = elem.description;
        var value = document.createElement("h4");
        value.innerText = "Rs. "+ elem.price; 
        var add_to_cart = document.createElement("button");
        add_to_cart.innerText = "Add to Cart";
        add_to_cart.setAttribute("class","cart_bag");
        add_to_cart.addEventListener("click",function(){
            add_pro_cart_fun(elem);
        });
        var add_to_bag = document.createElement("button");
        add_to_bag.innerText = "Add to Bag"; 
        add_to_bag.addEventListener("click",function(){
            add_pro_bag_fun(elem);
        });
        add_to_bag.setAttribute("class","cart_bag");
        div2.append(image,name,info,value,add_to_cart);
        document.getElementById("product_display").append(div2);
    });

}

var cartProducts = JSON.parse(localStorage.getItem("cart_products"))|| [];

function add_pro_cart_fun(elem){
      
  cartProducts.push(elem);
  localStorage.setItem("cart_products",JSON.stringify(cartProducts));
}

var bagProducts = JSON.parse(localStorage.getItem("bag_products"))|| [];

function add_pro_bag_fun(elem){
      
  bagProducts.push(elem);
  localStorage.setItem("bag_products",JSON.stringify(bagProducts));
}

function filter_fun(){
    filter_gender_fun();
    filter_brand_fun();
    filter_skintype_fun();
    sort_price_fun();
    
    var gender_filtered = haircare_obj;  
    function filter_gender_fun(){
        selected_gender = document.getElementById("filter_gender").value;
        gender_filtered = haircare_obj.filter(function(elem){
            if(selected_gender === "all"){
                return 1;
            }

            return elem.gender === selected_gender;
        });
        
        //display_skincare(gender_filtered);
    }

    var brand_filtered = gender_filtered;
    function filter_brand_fun(){
        var selected_brand = document.getElementById("filter_brand").value;
        brand_filtered = gender_filtered.filter(function(elem){
            if(selected_brand === "all"){
                return 1;
            }
            return elem.brand === selected_brand;
        });
        //console.log(brand_filtered);
    }
    //display_skincare(brand_filtered);

    var skintype_filtered = brand_filtered;
    function filter_skintype_fun(){
        var selected_skintype = document.getElementById("filter_skin_type").value;
        skintype_filtered = brand_filtered.filter(function(elem){
            if(selected_skintype === "all"){
                return 1;
            }

            return elem.skin_type === selected_skintype;
        });
        //display_fragrance(skintype_filtered);
    }

  
    
    function sort_price_fun(){
        if(document.getElementById("sort_price").value == 'high'){
            skintype_filtered.sort(function(a,b){
            if(parseInt(a.price)>parseInt(b.price)) return -1;
            if(parseInt(a.price)<parseInt(b.price)) return 1;
            return 0;
          });
        }
  
        if(document.getElementById("sort_price").value == 'low'){
            skintype_filtered.sort(function(a,b){
            if(parseInt(a.price)>parseInt(b.price)) return 1;
            if(parseInt(a.price)<parseInt(b.price)) return -1;
            return 0;
          }); 
        }
        display(skintype_filtered);
      }
}

// go to top button function
function gotoTop(){
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}