added direct to cart page. fixed bug in product details page. added qty valid.

Este commit está contenido en:
2023-04-25 14:20:22 +05:30
padre 7823781020
commit e922bb6b35
Se han modificado 11 ficheros con 210 adiciones y 50 borrados
+6
Ver fichero
@@ -275,6 +275,12 @@ function initLogin() {
window.localStorage.setItem("Useremail", userEmail);
//window.localStorage.setItem("Userpassword", userPassword);
window.localStorage.setItem("isaccountCreated", true);
const isCartAdded = localStorage.getItem(CART_ADD);
if(isCartAdded){
localStorage.removeItem(CART_ADD);
window.location.href = `/selectdelivery.html`;
return;
}
window.location.href = `./index.html`;
} else {
// toasterOpts();
+1 -1
Ver fichero
@@ -30,7 +30,7 @@ let nav_html = `
</div>
<div class="same-style header-cart">
<a class="cart-active1 position-relative" href="./shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i>
<span class="position-absolute cartnumcount d-none" style="top:-27%;right:-80%">0</span>
<span class="position-absolute cartnumcount d-none" style="top:-15%;right:-115%">0</span>
</a>
</div>
</div>
+1 -1
Ver fichero
@@ -29,7 +29,7 @@ let nav_html = `
<a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
</div>
<div class="same-style header-cart">
<a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
<a class="cart-active1" href="/shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
</div>
+50 -8
Ver fichero
@@ -1,5 +1,9 @@
function startDetails(){
// http://127.0.0.1:5502/productdetails.html?productId=106633230000024
if(window.location.search.split('=')[0] == ''){
window.location.href = "/notfound.html";
return;
}
let productId = window.location.search.split('=')[1].split('&')[0];
console.log(productId);
let itemtagscombinationRes = null;
@@ -12,7 +16,7 @@ function startDetails(){
let currentClick = null;
debugger;
if(productId){
getProductDetails(productId);
getProductDetails(productId);
appendSpecs(productId)
}else{
window.location.href = "/notfound.html"
@@ -40,34 +44,71 @@ function startDetails(){
}
function getSpecsItemHTML({name,des,itemid,id}){
return `<div id="${id}" data-specitemid="${itemid}" class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3 py-2">
${name}
</div>
<div class="col-sm-6 py-2">
${des}
</div>
</div>
</div>`;
return ` <tr id="${id}" data-specitemid="${itemid}">
<td style="width:200px">${name}</td>
<td class="">${des}</td>
</tr>`;
}
// function getSpecsItemHTML({name,des,itemid,id}){
// return ` <tr id="${id}" data-specitemid="${itemid}">
// <td style="width:200px">${name}</td>
// <td class="">${des}</td>
// </tr>`;
// }
async function appendSpecs(id){
let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,true);
if(resData.isError){
$('.productdetailstabs').addClass('d-none');
$('.specContainerleft').html('')
$('.specContainerRight').html('')
return;
}
$('.productdetailstabs ').removeClass('d-none');
const res = resData.response;
console.log(JSON.parse(res.result));
const data = JSON.parse(res.result);
console.log(data);
let html = '';
let leftHtml = '';
let rightHtml = '';
if(data.length == 0){
$('.productdetailstabs ').addClass('d-none');
$('.specContainerleft').html('')
$('.specContainerRight').html('')
return;
}
for(let i=0;i<data.length;i++){
const {specificationname,specificationitemid,itemid,description} = data[i];
html += getSpecsItemHTML({
name:specificationname,id:specificationitemid,itemid,des:description
});
if((i+1)%2 == 0){
rightHtml += getSpecsItemHTML({
name:specificationname,id:specificationitemid,itemid,des:description
})
}else{
leftHtml += getSpecsItemHTML({
name:specificationname,id:specificationitemid,itemid,des:description
});
}
}
debugger;
$('.append-specs').html(html)
$('.specContainerleft').html(leftHtml)
$('.specContainerRight').html(rightHtml)
}
@@ -116,6 +157,7 @@ function startDetails(){
appendSpecs(obj.itemid)
$('#skudetailitem').val(obj.sku)
$('.des_productdes').html(obj.itemdescription);
$('#addtocart').attr('data-qty',obj.quantity)
let defaultImg = obj.itemimageurl ? imgServerNameBuild(obj.itemimageurl): `./dist/assets/imgs/nophoto.png`;
console.log(obj.itemimageurl,'obj.itemimageurlobj.itemimageurlobj.itemimageurl');
@@ -343,7 +385,7 @@ debugger;
});
debugger;
let searchParams = window.location.search.split("&");
let skuId = window.location.hash.split('=')[1];
let skuId = window.location.hash.split('#')[1].split('=')[1];
// skuId = skuId.split('=')[1]
let isGo = true;
for(let i=0;i<itemtagscombinationRes.length;i++){
+15 -4
Ver fichero
@@ -112,8 +112,9 @@ function initAddToCart(){
const data = getCartData();
let id = window.location.search.split('=')[1];
const qty = parseInt($('#addtocart').data('qty'));
if(!data){
let cartObj = {};
debugger;
@@ -122,7 +123,8 @@ function initAddToCart(){
price:$('.price').html(),
quantity:$('#quantity').val(),
img:$('.productDetailsMain img').attr('src'),
sku:$('#skudetailitem').val()
sku:$('#skudetailitem').val(),
totalQty:qty
}
@@ -146,7 +148,8 @@ function initAddToCart(){
price:price,
quantity: parseInt(data[sku].quantity)+parseInt(quantity),
img:img,
sku:sku
sku:sku,
totalQty:qty
}
addtoCart(data);
}else{
@@ -155,7 +158,8 @@ function initAddToCart(){
price:price,
quantity:parseInt(quantity),
img:img,
sku:sku
sku:sku,
totalQty:qty
}
addtoCart(data);
}
@@ -170,6 +174,13 @@ function initAddToCart(){
$('#addtocart').html('Add to cart')
$('#addtocart').off().click((e)=>{
debugger
$('.insufficientqty').addClass('d-none');
const qty = parseInt($('#addtocart').data('qty'));
debugger;
if(parseInt($('#quantity').val())>qty){
$('.insufficientqty').removeClass('d-none');
return;
}
$('#addtocart').off().click(function (el){
window.location.href = '/shopping-cart.html';
+43 -7
Ver fichero
@@ -5,6 +5,17 @@ function shoppingCartInit() {
shoppingCartAppend();
let insufficientQtyActions = {
moreQtyAdd(e){
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').removeClass('d-none');
},
moreQtyRemove(e){
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').addClass('d-none');
}
}
function shoppingCartAppend() {
let data = getCartData();
@@ -47,13 +58,23 @@ function shoppingCartInit() {
$('.quantitySelect').each(function (i, element) {
if (!$(element).hasClass('d-none')) {
$(element).off().change(function (e) {
insufficientQtyActions.moreQtyRemove(e);
let num = e.target.value;
if (num == 5) {
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore').removeClass('d-none');
$(e.target).addClass('d-none');
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
const val = $(item.target).parent().find('input').val()
const val = $(item.target).parent().find('input').val();
debugger;
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
if(val<=0 || totalQty< val){
insufficientQtyActions.moreQtyAdd(e);
return;
}
let id = $(item.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, val);
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
// $(e.target).removeClass('d-none');
@@ -62,6 +83,11 @@ function shoppingCartInit() {
})
} else {
const val = $(item.target).parent().find('input').val();
if(val<=0 || totalQty< val){
insufficientQtyActions.moreQtyAdd(e);
return;
}
let id = $(e.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, num);
setLengthCart();
@@ -70,7 +96,17 @@ 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){
insufficientQtyActions.moreQtyAdd(item);
return;
}
let id = $(item.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, val);
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
@@ -132,11 +168,11 @@ function shoppingCartInit() {
});
}
function getQuantityHTML(value, id) {
return `<div data-id="${id}" class="mainselectcontainer w-100">
function getQuantityHTML(value,totalQty, id) {
return `<div data-id="${id}" data-qty="${totalQty}" class="mainselectcontainer w-100">
<div class="w-50">
<select class="quantitySelect form-select ${value >= 5 ? 'd-none' : ''}" value="${value}">
<select class="quantitySelect form-select ${value >= 5 ? 'd-none' : ''}" value="${value}">
<option ${value == 1 ? 'selected="selected"' : null} value="1">
1
</option>
@@ -159,11 +195,11 @@ function shoppingCartInit() {
<input min="1" class="form-control" style="max-width:100px" value="${value <= 5 ? '5' : value}" type="number" />
<button class="btn border-none bg-info">Add</button>
</div>
<div class="text-danger pt-2 insufficientqty d-none">Insufficient quantity</div>
</div>`
}
function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total }) {
function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total,totalQty }) {
const [currencySymbol,amt] = getCurrencySymbol(price);
return `
<div class="row bg-white border-bottom py-4 d-flex justify-content-center align-items-center">
@@ -179,7 +215,7 @@ function shoppingCartInit() {
</div>
<div class="col-md-2 ">
${getQuantityHTML(quantity, id)}
${getQuantityHTML(quantity,totalQty, id)}
</div>
<div class="col-md-2 ">
<div class="d-flex justify-content-between w-100">
+1 -1
Ver fichero
@@ -14,7 +14,7 @@ function shuffleArray(array) {
function getCurrencySymbol(value=0) {
let type = 'INR'
if (type) {
const ans = new Intl.NumberFormat('en-US', { style: 'currency', currency: type }).format(value);;
const ans = new Intl.NumberFormat('en-IN', { style: 'currency', currency: type }).format(value);;
const res = ans.split(/(\D+)/);
const currencySymbol = res[1];
const amount = res.slice(2,res.length).join('')
+4
Ver fichero
@@ -125,4 +125,8 @@
.tabsContainer .wrap-content-product-tabs{
margin-top: 40px !important;
}
.specContainer > div{
flex-basis: 50%;
}
+4 -2
Ver fichero
@@ -4113,7 +4113,8 @@ margin-bottom: 0.5rem !important;
font-weight: 600;;
} */
.main-menu > nav > ul > li:hover > a {
color: #0A1039;
/* color: #0A1039; */
color:white;
}
.main-menu > nav > ul > li > ul {
@@ -4505,7 +4506,8 @@ margin-bottom: 0.5rem !important;
}
.main-menu.main-menu-white > nav > ul > li:hover > a {
color: #0A1039;
/* color: #0A1039; */
color:white;
}
.main-menu.menu-lh-1 > nav > ul > li > a {
+2 -2
Ver fichero
@@ -25,7 +25,7 @@
<!-- main-body -->
<auth-loader></auth-loader>
<main class="orderconfirmationMain">
<section class="container d-flex justify-content-center">
<section class="container d-flex justify-content-center p-md-5">
<div class="ordercontainerconfirm ordercontainerconfirmError d-none d-flex flex-column align-items-center justify-content-center">
<div class="p-3">
<div class="text-center text-danger font-5">
@@ -116,7 +116,7 @@
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/navbar.js"></script>
<script src="./dist/js/navbar1.js"></script>
<script src="./dist/js/footer.js"></script>
<script src="./libs/cookies.min.js"></script>
+83 -24
Ver fichero
@@ -48,7 +48,13 @@
<div id="navbar-head"></div>
<!-- end-navbar -->
<!-- main-body -->
<main class="main-body home-main-container" style="margin-top: 30px;">
<main class="main-body home-main-container">
<section class="services h-100 pt-3 bg-gradient-anwi">
<div class="container pt-5 ">
<div class="text-center text-white ">
</div>
</div>
</section>
<div class="container mainContanierProduct">
<div class="row">
<div class="col-xl-7 ">
@@ -90,7 +96,7 @@
</div>
</div>
</div>
<div class="col-xl-5 p-5 productDetailsShadow">
<div class="col-xl-5 p-5 pt-0 productDetailsShadow">
<div class="card border-0">
<div>
<div>
@@ -280,6 +286,7 @@
<option value="4">4</option>
</select>
</div>
<div class="text-danger pt-2 insufficientqty d-none">Insufficient quantity</div>
<div class=" d-flex gap-2">
<button id="addtocart" class="w-100 btn bg-black text-white" style="border-radius: 5px;">
Add to cart
@@ -312,7 +319,7 @@
</div>
</div> -->
<div id="des-details2" class="tab-pane active show" role="tabpanel">
<div class="specification-wrap table-responsive">
<!-- <div class="specification-wrap table-responsive">
<table class="table table-bordered wrap-content-product-tabs">
<tbody class="append-specs">
<tr>
@@ -323,28 +330,78 @@
<td>Memory Speed</td>
<td>3200</td>
</tr>
<!-- <tr>
<td class="width1">Models</td>
<td>FX 829 v1</td>
</tr>
<tr>
<td class="width1">Categories</td>
<td>Digital Print</td>
</tr>
<tr>
<td class="width1">Size</td>
<td>60’’ x 40’’</td>
</tr>
<tr>
<td class="width1">Brand </td>
<td>Individual Collections</td>
</tr>
<tr>
<td class="width1">Color</td>
<td>Black, White</td>
</tr> -->
</tbody>
</table>
</div> -->
<div class="d-flex gap-5 specContainer mt-3">
<div class="specContainerleft">
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
Manufacturer
</div>
<div class="col-sm-6">
26/F TOWER ONE TIME SQUARE 1 MATHESON STREET CAUSEWAY BAY HK
</div>
</div>
</div>
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
Model Name
</div>
<div class="col-sm-6">
ORA 16 GB RAM DDR5 SDRAM 4800 MHz
</div>
</div>
</div>
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
Product Dimensions
</div>
<div class="col-sm-6">
8 x 3.1 x 0.3 cm; 10 Grams
</div>
</div>
</div>
</div>
<div class="specContainerRight">
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
Item part number
</div>
<div class="col-sm-6">
AWLD54816M
</div>
</div>
</div>
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
RAM Size
</div>
<div class="col-sm-6">
16 GB
</div>
</div>
</div>
<div class="">
<div class="row border-bottom">
<div class="col-sm-6 bg-gray-3">
Ram Memory Technology
</div>
<div class="col-sm-6">
DDR5, SO-DIMM
</div>
</div>
</div>
</div>
</div>
</div>
@@ -368,11 +425,13 @@
<script src="./dist/js/fontawesome.min.js"></script>
<script src="./dist/js/vendor/bootstrap.min.js"></script>
<!-- -->
<!-- <script src="./libs/toaster/toastr.js"></script> -->
<script src="./dist/toaster/toastr.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./dist/Js/jquery.min.js"></script>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/main.js"></script>