window.Webflow = window.Webflow || []; window.Webflow.push(() => { let art_id = "patUlkrPTbJAeR5C7.829aeca8037264efc747a822fe1152b47aeb039303e170810ab1da72d1d9b74a"; let member_id = JSON.parse(localStorage.getItem("_ms-mem")).id; let member_email = JSON.parse(localStorage.getItem("_ms-mem")).auth["email"]; let f_name = JSON.parse(localStorage.getItem("_ms-mem")).customFields[ "first-name" ]; let l_name = JSON.parse(localStorage.getItem("_ms-mem")).customFields[ "last-name" ]; // profile icons let icons = { men_collared_shirts: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64837d72f3b2bad085cf6347_men-collard-shirt.webp", men_pajamas: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64837d7200e7a521b7c46fcb_men-pajamas.webp", men_suits: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64837d7221c6f2f5d1af9d0f_men-suit.webp", men_trousers: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64837d72386f71399be324ba_men-trousers.webp", women_pajamas: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64b972599a8e1f6a78bae890_women-pajama.webp", women_trousers: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64b973079a8e1f6a78bbd016_women_trousers.webp", women_suits: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64b973816c0fd7f0fae5cf86_women_suits.webp", women_evening_gowns: "https://uploads-ssl.webflow.com/644ababde12ed25a2af73421/64b96fce61db30df394939ae_women_evening_gowns.webp" }; console.log(icons); let get_local_storage = JSON.parse(localStorage.getItem("measurements")); let get_obj_length = get_local_storage ? Object.keys(get_local_storage).length : 0; // function to set value in local storage const add_item_in_localStorage = (key, data, mian_key) => { get_local_storage[key.toLowerCase().split(" ").join("_")] = data; localStorage.setItem(mian_key, JSON.stringify(get_local_storage)); }; // end // *************** set initial value in localstore if not set ******************* // if (!get_local_storage) { localStorage.setItem("measurements", JSON.stringify({})); // get_obj_length = Object.keys(get_local_storage).length; // console.log(get_local_storage); get_local_storage = JSON.parse(localStorage.getItem("measurements")); } // end // *************** Measurements sldier ****************** // $(".swiper").append(`<div class="swiper-arrow button-prev"></div>`); $(".swiper").append(`<div class="swiper-arrow button-next"></div>`); const swiper1 = new Swiper(".swiper", { // Optional parameters direction: "vertical", // loop: true, slidesPerView: 5, slidesPerGroup: 5, spaceBetween: 10, centeredSlides: false, mousewheel: { forceToAxis: true }, // Navigation arrows navigation: { nextEl: ".button-next", prevEl: ".button-prev" }, // autoHeight: true, //enable auto height speed: 300, // Responsive breakpoints breakpoints: { // when window width is >= 480px 480: { slidesPerView: 5 }, // when window width is >= 768px 768: { slidesPerView: 5 }, // when window width is >= 992px 992: { slidesPerView: 5 } } }); const swiper2 = new Swiper(".swiper-2", { // Optional parameters direction: "vertical", // loop: true, slidesPerView: 1, slidesPerGroup: 1, spaceBetween: 20, centeredSlides: true, mousewheel: { forceToAxis: true }, // Navigation arrows navigation: { nextEl: ".button-next", prevEl: ".button-prev" }, // autoHeight: true, //enable auto height speed: 300, // Responsive breakpoints // effect: "fade", thumbs: { swiper: swiper1 } // breakpoints: { // 767: {} // } }); // code to show next 4 FAQ document.querySelector(".btn_up").addEventListener("click", () => { document.querySelector(".button-prev").click(); }); document.querySelector(".btn_down").addEventListener("click", () => { document.querySelector(".button-next").click(); }); // *************** Function ****************** // // Add Data to the Wishlist Airtable const add_data_on_airtable = async (list_name, table) => { let product_data = localStorage.getItem(list_name); // console.log(product_data); var raw = JSON.stringify({ records: [ { fields: { member_id: member_id, measurement_details: product_data, Email: member_email, "Full Name": f_name + " " + l_name } } ] }); var requestOptions = { method: "POST", headers: { Authorization: "Bearer " + m, "Content-Type": "application/json" }, body: raw // redirect: "follow" }; let data = await fetch( "https://api.airtable.com/v0/appRhetskcHWrPYzz/" + table, requestOptions ); let res = await data.json(); // localStorage.setItem("suit_style", JSON.stringify({})); // console.log(res); // window.location.href = "/"; // window.location("/"); return res; }; // get data form Airtable const get_record_form_airtable = async (c_id, table_name) => { let data = await fetch( `https://api.airtable.com/v0/appRhetskcHWrPYzz/${table_name}?filterByFormula=({member_id}='${c_id}')`, // `https://api.airtable.com/v0/app58Z9sLHPp8x5QA/Wish%20List?filterByFormula=({Member ID}=)`, { method: "GET", headers: { Authorization: "Bearer " + art_id } } ); let res = await data.json(); // console.log(res); return res; }; // get data form Airtable const get_record_form_airtable_by_id = async (rec_id, table_name) => { let data = await fetch( `https://api.airtable.com/v0/appRhetskcHWrPYzz/${table_name}/${rec_id}`, // `https://api.airtable.com/v0/app58Z9sLHPp8x5QA/Wish%20List?filterByFormula=({Member ID}=)`, { headers: { Authorization: "Bearer " + art_id } } ); let res = await data.json(); // console.log(res); return res; }; // remove data form Airtable const remove_data_form_airtable = async (item_id, table_name) => { let data = await fetch( `https://api.airtable.com/v0/appRhetskcHWrPYzz/${table_name}/${item_id}`, { method: "DELETE", headers: { Authorization: "Bearer " + art_id } } ); let res = await data.json(); // https://api.airtable.com/v0/app58Z9sLHPp8x5QA/Wish%20List/recZCwLAWhuZq6ru7 // console.log(res); return res; }; // UPDATE data form Airtable const update_data_on_airtable = async (id, list_name, table, column = "") => { let product_data = localStorage.getItem(list_name); // console.log(product_data); let size_in = ""; if (document.getElementById("cm-in").checked) { size_in = "in"; console.log(size_in); } else { size_in = "cm"; console.log(size_in); } var raw = JSON.stringify({ fields: { measurment_type: size_in, measurement_details: product_data, Email: member_email, "Full Name": f_name + " " + l_name } }); var requestOptions = { method: "PATCH", headers: { Authorization: "Bearer " + art_id, "Content-Type": "application/json" }, body: raw // redirect: "follow" }; // console.log(requestOptions); let data = await fetch( `https://api.airtable.com/v0/appRhetskcHWrPYzz/${table}/${id}`, requestOptions ); let res = await data.json(); return res; }; function countNonEmptyValues(obj) { let count = 0; for (const key in obj) { if (obj.hasOwnProperty(key) && obj[key] !== "") { count++; } } return count; } // get order details and show in slider code for wishlist const show_wishlist_order = async () => { document .querySelectorAll(".wish-list-order-btn") .forEach((wish_list_order_btn) => { wish_list_order_btn.addEventListener("click", async () => { console.log(wish_list_order_btn.getAttribute("data-key")); let order = await get_record_form_airtable_by_id( wish_list_order_btn.getAttribute("data-key"), "wish-list" ); // console.log(order.feilds); localStorage.setItem("suit_style", order.fields.order_detail); window.location.href = "/select-garments?show=true"; console.log("chenge url "); }); }); }; // get order detals and show in order slider // const show_orders = async ()=>{ // } // Function to show conformation message const show_msg = (text = "Updated") => { document.querySelector(".confomation_tag").innerText = text; document.querySelector(".confomation_tag").classList.add("slide-left"); setTimeout(() => { document.querySelector(".confomation_tag").classList.remove("slide-left"); }, 3000); }; // *************** code for to add Heading on profile page ******************* // document .querySelector(".tabs_main .tabs-menu") .insertAdjacentHTML( "afterbegin", `<div class="underline_heading"><h1 class="title_3-sb">Navigation</h1><div class="under_line"></div></div>` ); // *************** Show wishlist data ****************** // const show_wishList_data = async () => { // let memnber_id = member_id; console.log(member_id); let data = await get_record_form_airtable(member_id, "wish-list"); data = data.records; if (data.length !== 0) { let list_suits = ""; data.forEach((item) => { // console.log(item); let { id, fields } = item; let { order_detail } = fields; order_detail = JSON.parse(order_detail); let icon_var = order_detail.garment.toLowerCase().replace(/\s+/g, "_"); list_suits += ` <div class="hanger_card swiper-slide" style="min-width: 236.08px; max-width: 292.81px"> <img src="https://global-uploads.webflow.com/644ababde12ed25a2af73421/644be80a47efe014a221d2da_Asset%201%404x-8%201.svg" alt="" class="hanger" /> <div class="hanger_details"> <div class="order_suit_row"> <img src="${icons[order_detail.gender.toLowerCase() + "_" + icon_var]}" alt="" class="icon-img" /> <div class="div-block-22"> <p class="suti_title">${order_detail?.garment || "NO data"}</p> <p><span class="light_blue_color">Style:</span> ${ order_detail?.style || "NO data" }</p> <p><span class="light_blue_color">Color:</span> ${ order_detail?.color || "NO data" }</p> <p><span class="light_blue_color">Closure:</span> ${ order_detail?.clouser ? order_detail.clouser[0] : "NO data" } ${ order_detail?.clouser ? order_detail?.clouser[1] ? order_detail?.clouser[1] : "" : "" }</p> <p> <span class="light_blue_color">Fitting:</span> ${ order_detail?.fitting || "NO data" }</p> </div> </div> <div class="div-block-23"> <a href="#" class="link-block-4 w-inline-block wish-list-order-btn" data-key='${id}'> <p class="paragraph-3">Place Order</p> </a> <div class="remove_btn_wrapper"> <img src="https://global-uploads.webflow.com/644ababde12ed25a2af73421/644c198d69e29b8dfe5285aa_three%20dots.svg" alt="" class="remove_icon" ><a href="#" class="link-block-4 remove_btn w-inline-block" data-key='${id}'><p class="paragraph-3">Remove</p></a></div> </div> </div> </div> `; // console.log(order_detail?.clouser); }); // console.log( order_detail?.clouser[0]) // adding hanger card to the slider document.querySelector( ".wish-list_slider .swiper-wrapper" ).innerHTML = list_suits; // slider section for wishlist const wishlist_slider = new Swiper(".wish-list_slider", { // Optional parameters direction: "horizontal", // loop: true, slidesPerView: 2, slidesPerGroup: 2, spaceBetween: 24, centeredSlides: false, mousewheel: { forceToAxis: true }, // Navigation arrows, navigation: { nextEl: ".arrow--right", prevEl: ".arrow--left" }, // autoHeight: true, //enable auto height // autoHeight: true, speed: 300, // Responsive breakpoints breakpoints: { // when window width is >= 480px 320: { slidesPerView: 1, slidesPerGroup: 1 }, // when window width is >= 768px 768: { slidesPerView: 2 }, // when window width is >= 992px 992: { slidesPerView: 2 } } }); show_wishlist_order(); // *************** remove item form wishlist ****************** // document.querySelectorAll(".remove_btn").forEach((remove_btn) => { // console.log(remove_btn); remove_btn.addEventListener("click", async () => { // function to call remove data form wishlist await remove_data_form_airtable( remove_btn.getAttribute("data-key"), "wish-list" ); show_wishList_data(); }); }); } else { document.querySelector("#wishlist-slider").innerHTML = "<div class='empty_prompt'><H2>No Data Found</H2></div>"; document.querySelector(".arrow--left").style.display = "none"; document.querySelector(".arrow--right").style.display = "none"; } }; const show_order_data = async () => { // let memnber_id = member_id; console.log("show_order_data"); let data = await get_record_form_airtable(member_id, "order"); data = data.records; console.log(data); data.sort((a, b) => { const statusA = a.fields.order_status.toLowerCase(); const statusB = b.fields.order_status.toLowerCase(); if (statusA === "completed" && statusB !== "completed") { return 0; // b should come before a } else if (statusA !== "completed" && statusB === "completed") { return -1; // a should come before b } else { return 1; // maintain original order for other cases } }); if (data.length !== 0) { // console.log(data); let list_suits = ""; data.forEach((item) => { // console.log(item); let { id, fields } = item; let { order_detail, order_status, schedule_date } = fields; // console.log(order_detail, order_status, schedule_date); const dateParts = schedule_date.split("T")[0].split("-"); const formattedDate = `${dateParts[1]}/${ dateParts[2] }/${dateParts[0].slice(-2)}`; // console.log(formattedDate); // Output: 05/27/23 order_detail = JSON.parse(order_detail); let icon_var = order_detail.garment.toLowerCase().replace(/\s+/g, "_"); // console.log(order_detail); list_suits += ` <div class="hanger_card_order swiper-slide "><img src="https://global-uploads.webflow.com/644ababde12ed25a2af73421/644be80a47efe014a221d2da_Asset%201%404x-8%201.svg" alt="" class="hanger"> <div class="hanger_details order ${ order_status == "Complete" ? "complete" : "" }"> <div class="order_suit_row"><img src="${icons[order_detail.gender.toLowerCase() + "_" + icon_var]}" alt="" class="icon-img"> <div class="suit_order_detail"> <p class="suti_title">${order_detail?.garment || "NO data"}</p> <p> <span class="light_blue_color">Status:</span> <span class="order_status">${ order_status || "NOT SET" }</span></p> <p> <span class="light_blue_color">Appointment: </span> <span class="appointment_date">${ formattedDate || "NO data" }</span></p> </div> </div><a href="#" data-key='${id}' data-details= '${JSON.stringify( order_detail )}' class="link-block-4 view_order w-inline-block"> <p class="paragraph-3">View Order Details</p> </a> <p class="paragraph-13">Note: If you wish to cancel order, email us at customercare@miamera.com</p> </div> </div> `; // console.log(order_detail?.clouser); }); // console.log( order_detail?.clouser[0]) // adding hanger card to the slider document.querySelector( ".order_slider .swiper-wrapper" ).innerHTML = list_suits; // slider section for order const order_slider = new Swiper(".order_slider", { // Optional parameters direction: "horizontal", // loop: true, slidesPerView: 2, slidesPerGroup: 2, spaceBetween: 16, centeredSlides: false, mousewheel: { forceToAxis: true }, // Navigation arrows, navigation: { nextEl: ".arrow-order-right", prevEl: ".arrow-order-left" }, // autoHeight: true, //enable auto height // autoHeight: true, speed: 300, // Responsive breakpoints breakpoints: { // when window width is >= 480px 320: { slidesPerView: 1, slidesPerGroup: 1 }, // when window width is >= 768px 768: { slidesPerView: 2 }, // when window width is >= 992px 992: { slidesPerView: 2 } } }); // show order popup document.querySelectorAll(".view_order").forEach((order_btn) => { order_btn.addEventListener("click", () => { // console.log(JSON.parse(order_btn.getAttribute("data-details"))); let suit_data = JSON.parse(order_btn.getAttribute("data-details")); let closer_list = ""; document.querySelector( ".order_detail_popup .hanger_details.order" ).innerHTML = ` <div class="suit_order_detail"> <p class="suti_title">${suit_data.garment}</p> ${suit_data?.type ? " <p>Type: " + suit_data.type + "</p>" : ""} ${ suit_data?.style ? " <p>Style: " + suit_data.style + "</p>" : "" } ${ suit_data?.color ? " <p>Color: " + suit_data.color + "</p>" : "" } ${ suit_data?.clouser ? " <p>Type: " + suit_data.clouser[0] + (suit_data.clouser[1] ? " , " + suit_data.clouser[1] : "") + "</p>" : "" } ${ suit_data?.fitting ? " <p>Fitting: " + suit_data.fitting + "</p>" : "" } </div> `; document.querySelector(".order_detail_popup").style.display = "flex"; }); }); document.querySelector(".clode_pop").addEventListener("click", () => { document.querySelector(".order_detail_popup").style.display = "none"; }); // show_wishlist_order(); } else { document.querySelector("#order_slider").innerHTML = "<div class='empty_prompt'><H2>No Data Found</H2></div>"; document.querySelector(".arrow-order-left").style.display = "none"; document.querySelector(".arrow-order-right").style.display = "none"; } }; // *************** update measurments if any there ****************** // try { const one_time_work = async () => { if (localStorage.getItem("measurements_type")) { var raw = JSON.stringify({ records: [ { fields: { member_id: member_id, measurment_type: localStorage.getItem("measurements_type"), initial_update: "true", measurement_details: localStorage.getItem("measurements"), Email: member_email, "Full Name": f_name + " " + l_name } } ] }); var requestOptions = { method: "POST", headers: { Authorization: "Bearer " + art_id, "Content-Type": "application/json" }, body: raw // redirect: "follow" }; let data = await fetch( "https://api.airtable.com/v0/appRhetskcHWrPYzz/Measurements", requestOptions ); let res = await data.json(); console.log(res); localStorage.removeItem("measurements_type"); } }; one_time_work(); } catch {} // function run if ther no data in local storage but have in airtable it will get and load in local storage let get_form_airtable = async () => { let rec = await get_record_form_airtable(member_id, "Measurements"); let update_feilds = rec.records[0].fields.measurement_details; // console.log(update_feilds); try { localStorage.setItem("measurements", update_feilds); get_local_storage = JSON.parse(localStorage.getItem("measurements")); for (const property in get_local_storage) { if (document.querySelector(`[name="${property}"]`) != null) { document.querySelector(`[name="${property}"]`).value = get_local_storage[property]; } } } catch { console.log("error : get_form_airtable"); } document.querySelector(".measurment_have").innerHTML = countNonEmptyValues( get_local_storage ); }; get_form_airtable(); // *************** get order from air table ****************** // // update record on click document.getElementById("update_size").addEventListener("click", async () => { let rec = await get_record_form_airtable(member_id, "Measurements"); // let rec_id; if (rec.records.length == 0) { await add_data_on_airtable("measurements", "Measurements"); } else { let rec_id = rec.records[0].id; let update_res = await update_data_on_airtable( rec_id, "measurements", "Measurements" ); console.log(update_res); if (update_res?.fields) { console.log("updated measurments"); show_msg("Measurments Updated"); } } }); // *************** measurments ****************** // document.querySelectorAll(".measurement_input").forEach((input_feild) => { input_feild.addEventListener("keyup", () => { // console.log(input_feild.value); add_item_in_localStorage( input_feild.name, input_feild.value, "measurements" ); document.querySelector( ".measurment_have" ).innerHTML = countNonEmptyValues(get_local_storage); }); }); // code to update Measurements checkbox // console.log(get_local_storage_measurements); const get_and_set_measument_type = async () => { let check_box; check_box = await get_record_form_airtable(member_id, "Measurements"); try { if (check_box.records[0].fields.measurment_type == "in") { document.querySelector("#cm-in").checked = true; } } catch { console.log("works"); } document .getElementById("cm-in") .addEventListener("change", async (event) => { let size_in = ""; if (event.currentTarget.checked) { size_in = "in"; console.log(size_in); } else { size_in = "cm"; console.log(size_in); } let rec_id = check_box.records[0].id; let update_res = await update_data_on_airtable( rec_id, "measurements", "Measurements", size_in ); show_msg("Measurement Update"); console.log(update_res); }); }; get_and_set_measument_type(); // console.log(get_local_storage_measurements); show_wishList_data(); show_order_data(); // sort contry // document.querySelectorAll("#country option:not(:first-child)") var selectElement = document.getElementById("country"); var options = Array.from( document.querySelectorAll("#country option:not(:first-child)") ); // Sort the options alphabetically options.sort((a, b) => a.text.localeCompare(b.text)); // Remove existing options from the select element while (selectElement.firstChild) { selectElement.removeChild(selectElement.firstChild); } // Append the sorted options back to the select element options.forEach((option) => { selectElement.appendChild(option); }); function offset(el) { var rect = el.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop; return { top: rect.top + scrollTop, left: rect.left + scrollLeft }; } document.querySelectorAll(".icon-box").forEach((icon) => { icon.addEventListener("click", () => { let profile_tooltip = document.querySelector(".profile_tooltip"); let img = document.querySelector(".icon-box-pop"); let paragraph = document.querySelector(".pop-par"); profile_tooltip .querySelector(".past-pop-img") .setAttribute("src", icon.querySelector(".icon-box-pop").src); profile_tooltip.querySelector(".past-para").textContent = paragraph.textContent; profile_tooltip.style.display = "flex"; profile_tooltip.style.opacity = "1"; profile_tooltip.style.top = offset(icon).top - 125 + "px"; profile_tooltip.style.left = offset(icon).left - 65 + "px"; }); }); document.addEventListener("click", (e) => { if (!e.target.classList.contains("icon-info")) { document.querySelector(".profile_tooltip").style.display = "none"; } }); document.querySelector("#logout_btn").addEventListener("click", () => { localStorage.removeItem("measurements"); localStorage.removeItem("suit_style"); }); // check url param const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries()); console.log(params); document.querySelector(`#${params.tab}`).click(); }); // end webflow container