sachin.ganesh/anwi_website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

reimplemented login system and added state list component.

Browse Source
This commit is contained in:
sachinganesh
2023-05-05 12:08:51 +05:30
parent c564c38bf3
commit a826e188ed
20 changed files with 1797 additions and 2082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/Js/shoppingcart/select_delivery.js
Vendored
+109 -22
View File
@@ -117,10 +117,12 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
}
function clearAllInputs(){
$("#state").select2({
placeholder: "Select a City",
allowClear: true
});
// $("#state").select2({
// placeholder: "Select a City",
// allowClear: true
// });
$('#state').val(null);
$('#phonenumber').val(null);
$('#addressdes').val(null);
@@ -141,11 +143,14 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
$('#addressdes').val(addressline);
$('#zipcode').val(zipcode);
debugger;
$('#state').attr('data-id',cityid);
$('#state').val(cityname)
$('.userNamelogin').html(`${userName}`);
editMode = true;
console.log(stateArr);
renderStates(stateArr);
// console.log(stateArr);
renderCustomStateDropdown(stateArr);
//renderStates(stateArr);
}
@@ -185,6 +190,8 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
$('#addressdes').val(addressline);
$('#zipcode').val(zipcode);
debugger;
$('#state').attr('data-id',cityid);
$('#state').val(cityname);
$('.userNamelogin').html(`${userName}`);
changeAddressBtnAction.addChangeAddressBtn()
getCountryStateCurrency();
@@ -200,7 +207,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
}
function setAddressHeader({name,phonenumber,addressline,cityname,zipcode}){
$('.innerDisplayAddress').html(`${name}-${phonenumber}, ${addressline}, ${cityname} - `);
$('.innerDisplayAddress').html(`${phonenumber}, ${addressline}, ${cityname} - `);
$('.zipcodeAddress').html(`${zipcode}`);
}
@@ -209,7 +216,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
let number = $('#phonenumber').val();
let zipcode = $('#zipcode').val();
let state = $('#state').val();
let state = $('#state').data('id');
let address = $('#addressdes').val();
let isTrue = false;
@@ -244,7 +251,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
let { userId, name } = cookieRes;
const ctyId = await getCountryId();
let stateId = parseInt($('#state').val());
let stateId = parseInt($('#state').data('id'));
let payload = {
"cityid": stateId,
"CityName":$(`[data-id="${stateId}"`).html(),
@@ -273,7 +280,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
// http://localhost:3088/apis/v4/bizgaze/crm/address/savebillinginfo
setAddressHeader({name,phonenumber:$('#phonenumber').val(),addressline: $('#addressdes').val(),cityname:$(`[data-id="${stateId}"`).html(),zipcode:$('#zipcode').val()});
setAddressHeader({name,phonenumber:$('#phonenumber').val(),addressline: $('#addressdes').val(),cityname:$('#state').val(),zipcode:$('#zipcode').val()});
return new Promise((reslove,reject) => {
reslove(res);
@@ -291,14 +298,14 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
console.log(resAnwi, 'befores');
resAnwi = resAnwi[resAnwi.length - 1];
let stateId = parseInt($('#state').val());
let stateId = parseInt($('#state').data('id'));
let payload = {
...resAnwi,
phonenumber:$('#phonenumber').val(),
addressline1:$('#addressdes').val(),
zipcode:$('#zipcode').val(),
cityid:stateId,
CityName:$(`[data-id="${stateId}"`).html(),
CityName:$('#state').val(),
}
@@ -314,9 +321,62 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
})
}
function onChangeState(e){
let userItem = e.target.value.toLowerCase();
let limit = 10;
let results = [];
let maxLen = stateArr.length > 10 ? 10 :stateArr.length;
debugger
for(let i=0;i<stateArr.length;i++){
let currItem = stateArr[i];
let stateName = currItem.cityname.toLowerCase();
if(stateName.includes(userItem)){
results.push(currItem);
if(results.length>=10) break;
}
}
renderCustomStateDropdown(results);
loadDropdownStateEvents();
}
function loadDropdownStateEvents(){
$('#state').off().focus(function (){
$('.stateBox').removeClass('d-none');
$(document).off('click').click(closeDrop);
})
$(document).off().click(closeDrop);
function closeDrop(e){
let id = $(e.target).hasClass('stateoption');
if($(e.target).attr('id')==='state') return;
if(id) {
$('.stateBox').addClass('d-none');
$(document).off();
}else{
$('.stateBox').addClass('d-none');
$(document).off();
}
}
$('#state').keyup(debounce(function (event){
onChangeState(event)
}));
}
async function loadEvents() {
loadDropdownStateEvents();
$('.addnewAddressContainer').off('click').click(function (e) {
$('.addnewAddressContainer').addClass('d-none');
$('.addresslist').removeClass('d-none');
@@ -353,7 +413,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
$('.saveanddeliver').off('click').click(async function (e) {
debugger;
saveFormLoading.addSpinner()
let isErrorForm = checkForm();
@@ -365,7 +425,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
if(editMode){
res = await saveForm();
}else{
res = createBillingForm();
res = await createBillingForm();
}
saveFormLoading.removeSpinner();
@@ -389,8 +449,8 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
// zipcode:$('#zipcode').val(),
// cityid:stateId,
// CityName:$(`[data-id="${stateId}"`).html(),
let stateId = parseInt($('#state').val());
setAddressHeader({name,addressline:$('#addressdes').val(),cityname:$(`[data-id="${stateId}"`).html(),phonenumber:$('#phonenumber').val(),zipcode:$('#zipcode').val()});
let stateId = parseInt($('#state').data('id'));
setAddressHeader({name,addressline:$('#addressdes').val(),cityname:$(`#state`).val(),phonenumber:$('#phonenumber').val(),zipcode:$('#zipcode').val()});
$('.errMsgFormEdit').html('');
@@ -551,7 +611,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
function renderStates(data){
$('#state').off('select2:select');
let html = '';
for (let i = 0; i < data.length; i++) {
for (let i = 0; i < 10; i++) {
html += `<option value="${data[i].cityid}" data-id="${data[i].cityid}">${data[i].cityname}</option>`
}
@@ -585,6 +645,7 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
}
}
// const stateRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/unibase/platform/forms/autocomplete/docpropertyid/116631530005773/columnname/statusid/value/1%7C/formpropertyid/116631620000066/formid/116631640000040/bindeddata/undefined/term/h/authtoken/2cd31fdd-440b-4eea-9039-659ab090628a?term=h&type=GET`);
const stateRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/anwiauth/getcities/countryid/${countryID}`);
if (stateRes.isError) {
@@ -595,15 +656,16 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
let stateData = JSON.parse(stateRes.response.result);
console.log(stateData, 'state');
// console.log(stateData, 'state');
$('#state').html('');
$('#state').val(null);
console.log("start")
let html = '';
statesList = stateData;
stateArr = stateData;
renderStates(stateArr)
renderCustomStateDropdown(stateArr);
//renderStates(stateArr)
@@ -627,6 +689,30 @@ let Newuser =window.localStorage.getItem('isaccountCreated');
}
}
function getCustomDropDownHTML({cityid,cityname,countryid}){
return ` <div class="bg-white stateoption px-2 border-bottom py-2 cursor-pointer" data-name="${cityname}" data-value="${cityid}">${cityname}</div>`;
}
function renderCustomStateDropdown(stateList){
let html = ``;
debugger;;
let maxLen = stateList.length > 10 ? 10 :stateList.length
for(let i=0;i<maxLen;i++){
let currItem = stateList[i];
html+=getCustomDropDownHTML(currItem);
}
$('.stateBox').html(html);
$('.stateoption').off().click(function(e){
debugger;
const name = $(e.target).data('name');
const id = $(e.target).data('value');
$('#state').val(name);
$('#state').attr('data-id',id);
})
}
function loadShippingProducts(){
$('.detailsAddressBg').removeClass('detailsAddressBg');
$('.ordersummaryheader ').addClass('detailsAddressBg')
@@ -644,10 +730,11 @@ debugger;
// $('.orderslist').html(productsHTML);
$('.orderslist').addClass("p-3")
$('.orderslist').html(` <label for="online">
Online
<input checked data-op="online" name="payment" type="radio" class="paymentbtn " id="online">
<span>Pay Via (Card, Net Banking, Wallet)</span>
</label>
<label for="cod">
<label for="cod" class="d-none">
Cash on delivery
<input data-op="cod" name="payment" type="radio" class="paymentbtn " id="cod">
</label>`);
dist/Js/shoppingcart/shoppingcart.js
Vendored
+106 -100
View File
@@ -6,14 +6,14 @@ function shoppingCartInit() {
let DELETE_FILTER = null;
let insufficientQtyActions = {
moreQtyAdd(e){
moreQtyAdd(e) {
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').removeClass('d-none');
},
moreQtyRemove(e){
moreQtyRemove(e) {
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').addClass('d-none');
}
}
function shoppingCartAppend() {
@@ -28,19 +28,19 @@ function shoppingCartInit() {
let html = '';
let products = data;
// for(let i=0;i<products.length;i++){
// const {img,name,price,quantity,total} = products[i];
// debugger;
// html += shoppingCartDesktopHTML(products[i]);
// }
if(Object.keys(data).length === 0) {
if (Object.keys(data).length === 0) {
$('.checkoutbtn').addClass('d-none');
$('.emptyShow').removeClass('d-none');
}
setLengthCart();
console.log(products,'products');
console.log(products, 'products');
for (let product in products) {
html += shoppingCartDesktopHTML({ ...products[product], total: products[product].quantity * products[product].price, id: product });
@@ -67,11 +67,11 @@ function shoppingCartInit() {
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
const val = $(item.target).parent().find('input').val();
debugger;
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
if(val<=0 || totalQty< val){
if (val <= 0 || totalQty < val) {
insufficientQtyActions.moreQtyAdd(e);
return;
return;
}
let id = $(item.target).parents('.mainselectcontainer').data('id');
@@ -84,11 +84,11 @@ function shoppingCartInit() {
})
} else {
let totalQty = $(e.target).parents('.mainselectcontainer').data('qty');
let totalQty = $(e.target).parents('.mainselectcontainer').data('qty');
const val = $(e.target).parent().find('input').val();
if(val<=0 || totalQty< val){
if (val <= 0 || totalQty < val) {
insufficientQtyActions.moreQtyAdd(e);
return;
return;
}
let id = $(e.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, num);
@@ -99,16 +99,16 @@ function shoppingCartInit() {
} else {
$(element).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
debugger;
const val = $(item.target).parent().find('input').val()
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
if(val<=0 || totalQty< val){
const val = $(item.target).parent().find('input').val()
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
if (val <= 0 || totalQty < val) {
insufficientQtyActions.moreQtyAdd(item);
return;
return;
}
let id = $(item.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, val);
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
@@ -120,24 +120,24 @@ function shoppingCartInit() {
}
});
$('.removeitemcartmodal').off('click').click(function (){
setCartData( DELETE_FILTER );
setLengthCart();
shoppingCartAppend();
$('.removeitemcartmodal').off('click').click(function () {
setCartData(DELETE_FILTER);
setLengthCart();
shoppingCartAppend();
let len = Object.keys(DELETE_FILTER).length
if (!len) {
$('.checkoutbtn').addClass('d-none');
$('.emptyShow').removeClass('d-none');
} else {
$('.checkoutbtn').removeClass('d-none');
$('.emptyShow').addClass('d-none');
}
let len = Object.keys(DELETE_FILTER).length
if(!len){
$('.checkoutbtn').addClass('d-none');
$('.emptyShow').removeClass('d-none');
}else{
$('.checkoutbtn').removeClass('d-none');
$('.emptyShow').addClass('d-none');
}
});
$('.btndeletecart').each(function (i, element) {
@@ -149,44 +149,44 @@ function shoppingCartInit() {
debugger;
const products = data;
const productsFilter = {};
$('#modalremovecart').html(products[cardId].name);
for (let product in products) {
if (product != cardId) productsFilter[product] = products[product];
}
data = productsFilter;
data = productsFilter;
console.log(data);
DELETE_FILTER = data;
DELETE_FILTER = data;
// setCartData(data);
// setLengthCart();
// shoppingCartAppend();
});
});
$('.checkoutbtn').click(async function (e){
$('.checkoutbtn').click(async function (e) {
$('.checkoutbtn').find('span').addClass('d-none');
$('.checkoutbtn').find('div').removeClass('d-none');
const res = await COOKIE_HELPER.validateToken();
if(!res.response){
localStorage.setItem(CART_ADD,true);
if (!res.response) {
localStorage.setItem(CART_ADD, true);
window.location.href = '/login.html';
$('.checkoutbtn').find('span').removeClass('d-none');
$('.checkoutbtn').find('div').addClass('d-none');
return;
return;
}
window.location.href = '/selectdelivery.html';
$('.checkoutbtn').find('span').removeClass('d-none');
$('.checkoutbtn').find('div').addClass('d-none');
});
}
function getQuantityHTML(value,totalQty, id) {
function getQuantityHTML(value, totalQty, id) {
return `<div data-id="${id}" data-qty="${totalQty}" class="mainselectcontainer w-100">
<div class="w-50">
@@ -217,64 +217,70 @@ function shoppingCartInit() {
</div>`
}
function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total,totalQty,productid,itemid }) {
const [currencySymbol,amt] = getCurrencySymbol(price);
function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total, totalQty, productid, itemid }) {
const [currencySymbol, amt] = getCurrencySymbol(price);
let tamt = 0;
{
const [currencySymbol, amt] = getCurrencySymbol(total);
tamt = amt;
}
return `
<div class="row bg-white border-bottom py-4 d-flex justify-content-center align-items-center">
<div class="col-md-2 text-center"><img src="${img}" alt="${name}" class="img-fluid"></div>
<div class="col-md-4 ">
<a class="text-decoration-none text-blue fw-600 cursor-pointer" href="productdetails.html?productId=${productid}#itemid=${itemid}">${name}</a>
<small>${description||''}</small>
<span class="badge d-none text-bg-warning">8 Offers ></span>
</div>
<div class="col-md-2">
<p class="text-right m-0"><span>${currencySymbol}</span> ${amt}</p>
</div>
<div class="col-md-2 ">
<div class="d-none d-md-block">
<div class="row bg-white border-bottom py-4 d-flex justify-content-center align-items-center">
<div class="col-md-2 text-center"><img src="https://appassets.bizgaze.app/_files/documents/663/5f6dc634-ffba-47d3-90d2-63004d9d41b6/LAPTOP_DDR5_32GB.jpeg" alt="${name}" class="img-fluid"></div>
<div class="col-md-4 ">
<a class="text-decoration-none text-blue fw-600 cursor-pointer" href="productdetails.html?productId=${productid}#itemid=${itemid}">${name}</a>
<small>${description || ''}</small>
<span class="badge d-none text-bg-warning">8 Offers ></span>
</div>
<div class="col-md-2">
<p class="text-right m-0"><span>${currencySymbol}</span> ${amt}</p>
</div>
<div class="col-md-2 ">
${getQuantityHTML(quantity, totalQty, id)}
</div>
<div class="col-md-2 ">
<div class="d-flex justify-content-between w-100">
<p class="fw-bold m-0">
${currencySymbol}${tamt}</p>
<span class="btndeletecart cursor-pointer fw-500 text-danger" data-cartid="${id}" data-bs-toggle="modal" data-bs-target="#deletecartmodal">x</span>
</div>
</div>
</div>
</div>
<div class="row d-block d-md-none smallcart py-3">
<div class="row bg-white py-5 m-0">
<div class="col-4 text-center">
<img src="https://appassets.bizgaze.app/_files/documents/663/5f6dc634-ffba-47d3-90d2-63004d9d41b6/LAPTOP_DDR5_32GB.jpeg" alt="${name}" class="img-fluid">
</div>
<div class="col-8 position-relative d-flex flex-column gap-1">
<div class="">
<span>
<a class="text-decoration-none text-blue fw-600 cursor-pointer" href="productdetails.html?productId=${productid}#itemid=${itemid}"><span class="">${name}</span></a>
</span>
</div>
<div>
<p class="fw-bold m-0">
${currencySymbol}${tamt}</p>
</div>
<div class="text-truncate d-none">
<small>${description || ''}</small>
</div>
<div class="">
${getQuantityHTML(quantity, totalQty, id)}
</div>
${getQuantityHTML(quantity,totalQty, id)}
</div>
<div class="col-md-2 ">
<div class="d-flex justify-content-between w-100">
<p class="fw-bold m-0"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
<path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"/>
</svg>${total}</p>
<span class="btndeletecart cursor-pointer fw-500 text-danger" data-cartid="${id}" data-bs-toggle="modal" data-bs-target="#deletecartmodal">x</span>
</div>
</div>
<div class="warrenty-sec px-3 sec-space-4 d-none">
<div class="row align-items-center border py-2 mx-4">
<div class="col-md-8">
<p class="mb-0 "> <img src="./dist/assets/imgs/Home/Anwi-cart-logo.png" alt="shopping-cart-item-img"> Anwi Extended Warranty 2 Year: Protect your Laptop for another 2 years Learn more </p>
</div>
<div class="col-md-3">
<p class="text-end mb-0"> ₹3,200 (2 year)
</p>
</div>
</div>
<div class="row align-items-center border py-2 mx-4 mt-3">
<div class="col-md-8">
<p class="mb-0"> <img src="./dist/assets/imgs/Home/Anwi-cart-logo-2.png" alt="shopping-cart-item-img"> Anwi Extended Warranty 2 Year: Protect your Laptop for another 2 years Learn more </p>
</div>
<div class="col-md-3">
<p class="text-end mb-0"> ₹2,900 (2 year)
</p>
</div>
</div>
</div>
<span class="btndeletecart cursor-pointer fw-500 text-danger" data-cartid="${id}" data-bs-toggle="modal" data-bs-target="#deletecartmodal">x</span>
</div>
<div class=" bg-white mt-3 rounded py-3 d-block d-sm-none ">
<div class="row">
<div class=""></div>
</div>
<div>
</div>
</div>
</div>
`;
}
}