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

このコミットが含まれているのは:
2023-04-25 14:20:22 +05:30
コミット e922bb6b35
11個のファイルの変更210行の追加50行の削除
ベンダーファイル
+6
ファイルの表示
@@ -275,6 +275,12 @@ function initLogin() {
window.localStorage.setItem("Useremail", userEmail); window.localStorage.setItem("Useremail", userEmail);
//window.localStorage.setItem("Userpassword", userPassword); //window.localStorage.setItem("Userpassword", userPassword);
window.localStorage.setItem("isaccountCreated", true); 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`; window.location.href = `./index.html`;
} else { } else {
// toasterOpts(); // toasterOpts();
ベンダーファイル
+1 -1
ファイルの表示
@@ -30,7 +30,7 @@ let nav_html = `
</div> </div>
<div class="same-style header-cart"> <div class="same-style header-cart">
<a class="cart-active1 position-relative" href="./shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i> <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> </a>
</div> </div>
</div> </div>
ベンダーファイル
+1 -1
ファイルの表示
@@ -29,7 +29,7 @@ let nav_html = `
<a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a> <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
</div> </div>
<div class="same-style header-cart"> <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> </div>
</div> </div>
+50 -8
ファイルの表示
@@ -1,5 +1,9 @@
function startDetails(){ function startDetails(){
// http://127.0.0.1:5502/productdetails.html?productId=106633230000024 // 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]; let productId = window.location.search.split('=')[1].split('&')[0];
console.log(productId); console.log(productId);
let itemtagscombinationRes = null; let itemtagscombinationRes = null;
@@ -12,7 +16,7 @@ function startDetails(){
let currentClick = null; let currentClick = null;
debugger; debugger;
if(productId){ if(productId){
getProductDetails(productId); getProductDetails(productId);
appendSpecs(productId) appendSpecs(productId)
}else{ }else{
window.location.href = "/notfound.html" window.location.href = "/notfound.html"
@@ -40,34 +44,71 @@ function startDetails(){
} }
function getSpecsItemHTML({name,des,itemid,id}){ 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}"> return ` <tr id="${id}" data-specitemid="${itemid}">
<td style="width:200px">${name}</td> <td style="width:200px">${name}</td>
<td class="">${des}</td> <td class="">${des}</td>
</tr>`; </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){ async function appendSpecs(id){
let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,true); let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,true);
if(resData.isError){ if(resData.isError){
$('.productdetailstabs').addClass('d-none');
$('.specContainerleft').html('')
$('.specContainerRight').html('')
return; return;
} }
$('.productdetailstabs ').removeClass('d-none');
const res = resData.response; const res = resData.response;
console.log(JSON.parse(res.result)); console.log(JSON.parse(res.result));
const data = JSON.parse(res.result); const data = JSON.parse(res.result);
console.log(data); console.log(data);
let html = ''; 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++){ for(let i=0;i<data.length;i++){
const {specificationname,specificationitemid,itemid,description} = data[i]; const {specificationname,specificationitemid,itemid,description} = data[i];
html += getSpecsItemHTML({ if((i+1)%2 == 0){
name:specificationname,id:specificationitemid,itemid,des:description rightHtml += getSpecsItemHTML({
}); name:specificationname,id:specificationitemid,itemid,des:description
})
}else{
leftHtml += getSpecsItemHTML({
name:specificationname,id:specificationitemid,itemid,des:description
});
}
} }
debugger; debugger;
$('.append-specs').html(html) $('.specContainerleft').html(leftHtml)
$('.specContainerRight').html(rightHtml)
} }
@@ -116,6 +157,7 @@ function startDetails(){
appendSpecs(obj.itemid) appendSpecs(obj.itemid)
$('#skudetailitem').val(obj.sku) $('#skudetailitem').val(obj.sku)
$('.des_productdes').html(obj.itemdescription); $('.des_productdes').html(obj.itemdescription);
$('#addtocart').attr('data-qty',obj.quantity)
let defaultImg = obj.itemimageurl ? imgServerNameBuild(obj.itemimageurl): `./dist/assets/imgs/nophoto.png`; let defaultImg = obj.itemimageurl ? imgServerNameBuild(obj.itemimageurl): `./dist/assets/imgs/nophoto.png`;
console.log(obj.itemimageurl,'obj.itemimageurlobj.itemimageurlobj.itemimageurl'); console.log(obj.itemimageurl,'obj.itemimageurlobj.itemimageurlobj.itemimageurl');
@@ -343,7 +385,7 @@ debugger;
}); });
debugger; debugger;
let searchParams = window.location.search.split("&"); 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] // skuId = skuId.split('=')[1]
let isGo = true; let isGo = true;
for(let i=0;i<itemtagscombinationRes.length;i++){ for(let i=0;i<itemtagscombinationRes.length;i++){
ベンダーファイル
+15 -4
ファイルの表示
@@ -112,8 +112,9 @@ function initAddToCart(){
const data = getCartData(); const data = getCartData();
let id = window.location.search.split('=')[1]; let id = window.location.search.split('=')[1];
const qty = parseInt($('#addtocart').data('qty'));
if(!data){ if(!data){
let cartObj = {}; let cartObj = {};
debugger; debugger;
@@ -122,7 +123,8 @@ function initAddToCart(){
price:$('.price').html(), price:$('.price').html(),
quantity:$('#quantity').val(), quantity:$('#quantity').val(),
img:$('.productDetailsMain img').attr('src'), img:$('.productDetailsMain img').attr('src'),
sku:$('#skudetailitem').val() sku:$('#skudetailitem').val(),
totalQty:qty
} }
@@ -146,7 +148,8 @@ function initAddToCart(){
price:price, price:price,
quantity: parseInt(data[sku].quantity)+parseInt(quantity), quantity: parseInt(data[sku].quantity)+parseInt(quantity),
img:img, img:img,
sku:sku sku:sku,
totalQty:qty
} }
addtoCart(data); addtoCart(data);
}else{ }else{
@@ -155,7 +158,8 @@ function initAddToCart(){
price:price, price:price,
quantity:parseInt(quantity), quantity:parseInt(quantity),
img:img, img:img,
sku:sku sku:sku,
totalQty:qty
} }
addtoCart(data); addtoCart(data);
} }
@@ -170,6 +174,13 @@ function initAddToCart(){
$('#addtocart').html('Add to cart') $('#addtocart').html('Add to cart')
$('#addtocart').off().click((e)=>{ $('#addtocart').off().click((e)=>{
debugger 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){ $('#addtocart').off().click(function (el){
window.location.href = '/shopping-cart.html'; window.location.href = '/shopping-cart.html';
+43 -7
ファイルの表示
@@ -5,6 +5,17 @@ function shoppingCartInit() {
shoppingCartAppend(); 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() { function shoppingCartAppend() {
let data = getCartData(); let data = getCartData();
@@ -47,13 +58,23 @@ function shoppingCartInit() {
$('.quantitySelect').each(function (i, element) { $('.quantitySelect').each(function (i, element) {
if (!$(element).hasClass('d-none')) { if (!$(element).hasClass('d-none')) {
$(element).off().change(function (e) { $(element).off().change(function (e) {
insufficientQtyActions.moreQtyRemove(e);
let num = e.target.value; let num = e.target.value;
if (num == 5) { if (num == 5) {
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore').removeClass('d-none'); $(e.target).parents('.mainselectcontainer').find('.inputcartaddmore').removeClass('d-none');
$(e.target).addClass('d-none'); $(e.target).addClass('d-none');
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) { $(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'); let id = $(item.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, val); updateCartQuantity(id, val);
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none'); // $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
// $(e.target).removeClass('d-none'); // $(e.target).removeClass('d-none');
@@ -62,6 +83,11 @@ function shoppingCartInit() {
}) })
} else { } 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'); let id = $(e.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, num); updateCartQuantity(id, num);
setLengthCart(); setLengthCart();
@@ -70,7 +96,17 @@ function shoppingCartInit() {
}); });
} else { } else {
$(element).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) { $(element).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
debugger;
const val = $(item.target).parent().find('input').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;
}
let id = $(item.target).parents('.mainselectcontainer').data('id'); let id = $(item.target).parents('.mainselectcontainer').data('id');
updateCartQuantity(id, val); updateCartQuantity(id, val);
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none'); // $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
@@ -132,11 +168,11 @@ function shoppingCartInit() {
}); });
} }
function getQuantityHTML(value, id) { function getQuantityHTML(value,totalQty, id) {
return `<div data-id="${id}" class="mainselectcontainer w-100"> return `<div data-id="${id}" data-qty="${totalQty}" class="mainselectcontainer w-100">
<div class="w-50"> <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"> <option ${value == 1 ? 'selected="selected"' : null} value="1">
1 1
</option> </option>
@@ -159,11 +195,11 @@ function shoppingCartInit() {
<input min="1" class="form-control" style="max-width:100px" value="${value <= 5 ? '5' : value}" type="number" /> <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> <button class="btn border-none bg-info">Add</button>
</div> </div>
<div class="text-danger pt-2 insufficientqty d-none">Insufficient quantity</div>
</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); const [currencySymbol,amt] = getCurrencySymbol(price);
return ` return `
<div class="row bg-white border-bottom py-4 d-flex justify-content-center align-items-center"> <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>
<div class="col-md-2 "> <div class="col-md-2 ">
${getQuantityHTML(quantity, id)} ${getQuantityHTML(quantity,totalQty, id)}
</div> </div>
<div class="col-md-2 "> <div class="col-md-2 ">
<div class="d-flex justify-content-between w-100"> <div class="d-flex justify-content-between w-100">
ベンダーファイル
+1 -1
ファイルの表示
@@ -14,7 +14,7 @@ function shuffleArray(array) {
function getCurrencySymbol(value=0) { function getCurrencySymbol(value=0) {
let type = 'INR' let type = 'INR'
if (type) { 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 res = ans.split(/(\D+)/);
const currencySymbol = res[1]; const currencySymbol = res[1];
const amount = res.slice(2,res.length).join('') const amount = res.slice(2,res.length).join('')
ベンダーファイル
+4
ファイルの表示
@@ -125,4 +125,8 @@
.tabsContainer .wrap-content-product-tabs{ .tabsContainer .wrap-content-product-tabs{
margin-top: 40px !important; margin-top: 40px !important;
}
.specContainer > div{
flex-basis: 50%;
} }
ベンダーファイル
+4 -2
ファイルの表示
@@ -4113,7 +4113,8 @@ margin-bottom: 0.5rem !important;
font-weight: 600;; font-weight: 600;;
} */ } */
.main-menu > nav > ul > li:hover > a { .main-menu > nav > ul > li:hover > a {
color: #0A1039; /* color: #0A1039; */
color:white;
} }
.main-menu > nav > ul > li > ul { .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 { .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 { .main-menu.menu-lh-1 > nav > ul > li > a {
+2 -2
ファイルの表示
@@ -25,7 +25,7 @@
<!-- main-body --> <!-- main-body -->
<auth-loader></auth-loader> <auth-loader></auth-loader>
<main class="orderconfirmationMain"> <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="ordercontainerconfirm ordercontainerconfirmError d-none d-flex flex-column align-items-center justify-content-center">
<div class="p-3"> <div class="p-3">
<div class="text-center text-danger font-5"> <div class="text-center text-danger font-5">
@@ -116,7 +116,7 @@
<script src="./libs/bootstrap/js/bootstrap.bundle.min.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/navbar.js"></script> <script src="./dist/js/navbar1.js"></script>
<script src="./dist/js/footer.js"></script> <script src="./dist/js/footer.js"></script>
<script src="./libs/cookies.min.js"></script> <script src="./libs/cookies.min.js"></script>
+83 -24
ファイルの表示
@@ -48,7 +48,13 @@
<div id="navbar-head"></div> <div id="navbar-head"></div>
<!-- end-navbar --> <!-- end-navbar -->
<!-- main-body --> <!-- 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="container mainContanierProduct">
<div class="row"> <div class="row">
<div class="col-xl-7 "> <div class="col-xl-7 ">
@@ -90,7 +96,7 @@
</div> </div>
</div> </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 class="card border-0">
<div> <div>
<div> <div>
@@ -280,6 +286,7 @@
<option value="4">4</option> <option value="4">4</option>
</select> </select>
</div> </div>
<div class="text-danger pt-2 insufficientqty d-none">Insufficient quantity</div>
<div class=" d-flex gap-2"> <div class=" d-flex gap-2">
<button id="addtocart" class="w-100 btn bg-black text-white" style="border-radius: 5px;"> <button id="addtocart" class="w-100 btn bg-black text-white" style="border-radius: 5px;">
Add to cart Add to cart
@@ -312,7 +319,7 @@
</div> </div>
</div> --> </div> -->
<div id="des-details2" class="tab-pane active show" role="tabpanel"> <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"> <table class="table table-bordered wrap-content-product-tabs">
<tbody class="append-specs"> <tbody class="append-specs">
<tr> <tr>
@@ -323,28 +330,78 @@
<td>Memory Speed</td> <td>Memory Speed</td>
<td>3200</td> <td>3200</td>
</tr> </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> </tbody>
</table> </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>
</div> </div>
@@ -368,11 +425,13 @@
<script src="./dist/js/fontawesome.min.js"></script> <script src="./dist/js/fontawesome.min.js"></script>
<script src="./dist/js/vendor/bootstrap.min.js"></script> <script src="./dist/js/vendor/bootstrap.min.js"></script>
<!-- --> <!-- -->
<!-- <script src="./libs/toaster/toastr.js"></script> --> <!-- <script src="./libs/toaster/toastr.js"></script> -->
<script src="./dist/toaster/toastr.js"></script> <script src="./dist/toaster/toastr.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.min.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>