Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Cart Feature: Add Quantity Controls and Change 'Add to Cart' to 'Continue to Checkout' #11

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update Cart Feature: Add Quantity Controls and Change 'Add to Cart' to 'Continue to Checkout' #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
973a6c1
Updated product page with quantity adjustment and checkout button
jimmyurl Jul 27, 2024
896fd5c
modified buttons in content details page and its css
jimmyurl Jul 27, 2024
1a715bb
modified buttons in content details page and its css
jimmyurl Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions E-CommerceWebsite
Open in desktop
Submodule E-CommerceWebsite added at 6f497d
257 changes: 115 additions & 142 deletions contentDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,147 +1,120 @@
console.clear()

let id = location.search.split('?')[1]
console.log(id)

if(document.cookie.indexOf(',counter=')>=0)
{
let counter = document.cookie.split(',')[1].split('=')[1]
document.getElementById("badge").innerHTML = counter
}

function dynamicContentDetails(ob)
{
let mainContainer = document.createElement('div')
mainContainer.id = 'containerD'
function dynamicContentDetails(ob) {
let mainContainer = document.createElement('div');
mainContainer.id = 'containerD';
document.getElementById('containerProduct').appendChild(mainContainer);

let imageSectionDiv = document.createElement('div')
imageSectionDiv.id = 'imageSection'

let imgTag = document.createElement('img')
imgTag.id = 'imgDetails'
//imgTag.id = ob.photos
imgTag.src = ob.preview

imageSectionDiv.appendChild(imgTag)

let productDetailsDiv = document.createElement('div')
productDetailsDiv.id = 'productDetails'

// console.log(productDetailsDiv);

let h1 = document.createElement('h1')
let h1Text = document.createTextNode(ob.name)
h1.appendChild(h1Text)

let h4 = document.createElement('h4')
let h4Text = document.createTextNode(ob.brand)
h4.appendChild(h4Text)
console.log(h4);

let detailsDiv = document.createElement('div')
detailsDiv.id = 'details'

let h3DetailsDiv = document.createElement('h3')
let h3DetailsText = document.createTextNode('Rs ' + ob.price)
h3DetailsDiv.appendChild(h3DetailsText)

let h3 = document.createElement('h3')
let h3Text = document.createTextNode('Description')
h3.appendChild(h3Text)

let para = document.createElement('p')
let paraText = document.createTextNode(ob.description)
para.appendChild(paraText)

let productPreviewDiv = document.createElement('div')
productPreviewDiv.id = 'productPreview'

let h3ProductPreviewDiv = document.createElement('h3')
let h3ProductPreviewText = document.createTextNode('Product Preview')
h3ProductPreviewDiv.appendChild(h3ProductPreviewText)
productPreviewDiv.appendChild(h3ProductPreviewDiv)

let i;
for(i=0; i<ob.photos.length; i++)
{
let imgTagProductPreviewDiv = document.createElement('img')
imgTagProductPreviewDiv.id = 'previewImg'
imgTagProductPreviewDiv.src = ob.photos[i]
imgTagProductPreviewDiv.onclick = function(event)
{
console.log("clicked" + this.src)
imgTag.src = ob.photos[i]
document.getElementById("imgDetails").src = this.src

}
productPreviewDiv.appendChild(imgTagProductPreviewDiv)
}

let buttonDiv = document.createElement('div')
buttonDiv.id = 'button'

let buttonTag = document.createElement('button')
buttonDiv.appendChild(buttonTag)

buttonText = document.createTextNode('Add to Cart')
buttonTag.onclick = function()
{
let order = id+" "
let counter = 1
if(document.cookie.indexOf(',counter=')>=0)
{
order = id + " " + document.cookie.split(',')[0].split('=')[1]
counter = Number(document.cookie.split(',')[1].split('=')[1]) + 1
}
document.cookie = "orderId=" + order + ",counter=" + counter
document.getElementById("badge").innerHTML = counter
console.log(document.cookie)
}
buttonTag.appendChild(buttonText)


console.log(mainContainer.appendChild(imageSectionDiv));
mainContainer.appendChild(imageSectionDiv)
mainContainer.appendChild(productDetailsDiv)
productDetailsDiv.appendChild(h1)
productDetailsDiv.appendChild(h4)
productDetailsDiv.appendChild(detailsDiv)
detailsDiv.appendChild(h3DetailsDiv)
detailsDiv.appendChild(h3)
detailsDiv.appendChild(para)
productDetailsDiv.appendChild(productPreviewDiv)


productDetailsDiv.appendChild(buttonDiv)


return mainContainer
}



// BACKEND CALLING

let httpRequest = new XMLHttpRequest()
{
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4 && this.status == 200)
{
console.log('connected!!');
let contentDetails = JSON.parse(this.responseText)
{
console.log(contentDetails);
dynamicContentDetails(contentDetails)
}
let imageSectionDiv = document.createElement('div');
imageSectionDiv.id = 'imageSection';

let imgTag = document.createElement('img');
imgTag.id = 'imgDetails';
imgTag.src = ob.preview;

imageSectionDiv.appendChild(imgTag);

let productDetailsDiv = document.createElement('div');
productDetailsDiv.id = 'productDetails';

let h1 = document.createElement('h1');
let h1Text = document.createTextNode(ob.name);
h1.appendChild(h1Text);

let h4 = document.createElement('h4');
let h4Text = document.createTextNode(ob.brand);
h4.appendChild(h4Text);

let detailsDiv = document.createElement('div');
detailsDiv.id = 'details';

let h3DetailsDiv = document.createElement('h3');
let h3DetailsText = document.createTextNode('Rs ' + ob.price);
h3DetailsDiv.appendChild(h3DetailsText);

let h3 = document.createElement('h3');
let h3Text = document.createTextNode('Description');
h3.appendChild(h3Text);

let para = document.createElement('p');
let paraText = document.createTextNode(ob.description);
para.appendChild(paraText);

let productPreviewDiv = document.createElement('div');
productPreviewDiv.id = 'productPreview';

let h3ProductPreviewDiv = document.createElement('h3');
let h3ProductPreviewText = document.createTextNode('Product Preview');
h3ProductPreviewDiv.appendChild(h3ProductPreviewText);
productPreviewDiv.appendChild(h3ProductPreviewDiv);

ob.photos.forEach(photo => {
let imgTagProductPreviewDiv = document.createElement('img');
imgTagProductPreviewDiv.id = 'previewImg';
imgTagProductPreviewDiv.src = photo;
imgTagProductPreviewDiv.onclick = function () {
imgTag.src = this.src;
};
productPreviewDiv.appendChild(imgTagProductPreviewDiv);
});

let quantityDiv = document.createElement('div');
quantityDiv.id = 'quantityDiv';

let minusButton = document.createElement('button');
minusButton.id = 'minusButton';
minusButton.innerText = '-';
minusButton.onclick = function () {
let quantity = parseInt(document.getElementById('quantity').innerText);
if (quantity > 1) {
document.getElementById('quantity').innerText = quantity - 1;
}
else
{
console.log('not connected!');
};

let quantityText = document.createElement('span');
quantityText.id = 'quantity';
quantityText.innerText = '1';

let plusButton = document.createElement('button');
plusButton.id = 'plusButton';
plusButton.innerText = '+';
plusButton.onclick = function () {
let quantity = parseInt(document.getElementById('quantity').innerText);
document.getElementById('quantity').innerText = quantity + 1;
};

quantityDiv.appendChild(minusButton);
quantityDiv.appendChild(quantityText);
quantityDiv.appendChild(plusButton);

let buttonDiv = document.createElement('div');
buttonDiv.id = 'button';

let buttonTag = document.createElement('button');
buttonTag.innerText = 'Continue to Checkout';
buttonTag.onclick = function () {
let quantity = document.getElementById('quantity').innerText;
let order = id + " " + quantity;
let counter = parseInt(quantity);
if (document.cookie.indexOf(',counter=') >= 0) {
order = id + " " + document.cookie.split(',')[0].split('=')[1];
counter += Number(document.cookie.split(',')[1].split('=')[1]);
}
}
document.cookie = "orderId=" + order + ",counter=" + counter;
document.getElementById("badge").innerText = counter;
console.log(document.cookie);
};
buttonDiv.appendChild(buttonTag);

mainContainer.appendChild(imageSectionDiv);
mainContainer.appendChild(productDetailsDiv);
productDetailsDiv.appendChild(h1);
productDetailsDiv.appendChild(h4);
productDetailsDiv.appendChild(detailsDiv);
detailsDiv.appendChild(h3DetailsDiv);
detailsDiv.appendChild(h3);
detailsDiv.appendChild(para);
productDetailsDiv.appendChild(productPreviewDiv);
productDetailsDiv.appendChild(quantityDiv);
productDetailsDiv.appendChild(buttonDiv);

return mainContainer;
}

httpRequest.open('GET', 'https://5d76bf96515d1a0014085cf9.mockapi.io/product/'+id, true)
httpRequest.send()
Loading