Skip to content

Commit

Permalink
added delivery.js file and also working on radio buttons but not work…
Browse files Browse the repository at this point in the history 
…ing selection of radio
  • Loading branch information
@kjonnalagadda
kjonnalagadda committed Feb 9, 2024
1 parent 47bd243 commit 8318da3
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 68 deletions.
23 changes: 22 additions & 1 deletion checkout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,25 @@

<script type="module" src="scripts/checkout.js"></script>
</body>
</html>
</html>



<!-- <div class="product-within-fivedays-shipping">
<div class="fivedays-shipping-radio-btn">
<input type="radio" name="shippingOption-${matchingProduct.id}" id="withinFiveDaysShipping">
</div>
<div>
<div class="week-date-info js-five-days-shipping"> ${fiveDaysAfter} </div>
<div>$4.99 - Shipping</div>
</div>
</div>
<div class="product-oneday-shipping">
<div class="oneday-shipping-radio-btn">
<input type="radio" name="shippingOption-${matchingProduct.id}" id="oneDayShipping">
</div>
<div>
<div class="week-date-info js-one-day-shipping"> ${oneDayAfter} </div>
<div>$9.99 Shipping</div>
</div>
</div> -->
23 changes: 19 additions & 4 deletions data/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ if (!cart){
[
{
productId: "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
quantity: 1
quantity: 1,
deliveryOptionId: '1',
},
{
productId: "15b6fc6f-327a-4ec4-896f-486349e85a3d",
quantity: 2
quantity: 2,
deliveryOptionId: '2',
},
];
}
Expand All @@ -32,7 +34,8 @@ export function addtoCart(productId){
else{
cart.push({
productId : productId,
quantity : 1
quantity : 1,
deliveryOptionId: '1'
})
}
console.log(cart, 'checking purpose');
Expand All @@ -54,7 +57,8 @@ export function addtoCartSelectValue(productId, selectedValue){
else{
cart.push({
productId : productId,
quantity : Number(selectedValue)
quantity : Number(selectedValue),
deliveryOptionId: '2'
})
}
console.log(cart, 'checking purpose');
Expand All @@ -76,3 +80,14 @@ export function removeFromCart(productId){
saveToStorage();
}

export function updateDeliveryOption(productId, deliveryOptionId){
let matchingItem;

cart.forEach((cartItem) => {
if (productId === cartItem.productId){
matchingItem = cartItem;
}
});
matchingItem.deliveryOptionId = deliveryOptionId;
saveToStorage();
}
17 changes: 17 additions & 0 deletions data/deliveryOptions.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const deliveryOptions = [
{
id : 1,
deliveryDays: 7,
priceCents: 0
},
{
id : 2,
deliveryDays: 3,
priceCents: 499
},
{
id : 3,
deliveryDays: 1,
priceCents: 999
}
]
133 changes: 96 additions & 37 deletions scripts/checkout.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { cart, cart as myCart,removeFromCart } from '../data/cart.js';
import { cart, cart as myCart,removeFromCart, updateDeliveryOption } from '../data/cart.js';
import { products } from '../data/products.js';
import { deliveryOptions } from '../data/deliveryOptions.js';
import Dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';

const currentDate = Dayjs();

let checkoutHTML = ``;
myCart.forEach((cartItems)=>{
let productId = cartItems.productId;
Expand All @@ -16,15 +15,28 @@ myCart.forEach((cartItems)=>{
});
console.log(matchingProduct);

const oneDayAfter = formatDeliveryDate(1);
const fiveDaysAfter = formatDeliveryDate(5);
const nindeDaysAfter = formatDeliveryDate(9);
const deliveryOptionId = cartItems.deliveryOptionId;

let deliveryOption;

deliveryOptions.forEach((option) =>{
if (option.id === deliveryOptionId){
deliveryOption = option;
console.log(option, 'fddfssdfds')
}
});

const currentDate = Dayjs();
const deliveryDate = deliveryOption ? currentDate.add(deliveryOption.deliveryDays, 'days') : currentDate; // Check if deliveryOption is defined
// const deliveryDate = currentDate.add(deliveryOption.deliveryDays, 'days');
const dateString = deliveryDate.format('dddd, MMMM, D');


checkoutHTML += `
<div class="order-summary js-cart-item-container-${matchingProduct.id}">
<div class="delivery-date-info">
Delivery date: Friday, February 16
<div class="delivery-date-info js-delivery-date-${matchingProduct.id}">
Delivery date: ${dateString}
</div>
<div class="product-full-order-summary">
Expand Down Expand Up @@ -52,39 +64,45 @@ myCart.forEach((cartItems)=>{
<div class="product-delivery-option">
<div class="delivery-option">
Choose a delivery option:
</div>
<div class="product-free-shipping">
<div class="free-shipping-radio-btn">
<input type="radio" name="shippingOption-${matchingProduct.id}" id="freeShipping">
</div>
<div>
<div class="week-date-info js-nine-days-shipping"> ${nindeDaysAfter} </div>
<div>FREE Shipping</div>
</div>
</div>
<div class="product-within-fivedays-shipping">
<div class="fivedays-shipping-radio-btn">
<input type="radio" name="shippingOption-${matchingProduct.id}" id="withinFiveDaysShipping">
</div>
<div>
<div class="week-date-info js-five-days-shipping"> ${fiveDaysAfter} </div>
<div>$4.99 - Shipping</div>
</div>
</div>
<div class="product-oneday-shipping">
<div class="oneday-shipping-radio-btn">
<input type="radio" name="shippingOption-${matchingProduct.id}" id="oneDayShipping">
</div>
<div>
<div class="week-date-info js-one-day-shipping"> ${oneDayAfter} </div>
<div>$9.99 Shipping</div>
</div>
</div>
</div>
${deliveryOptionsHTML(matchingProduct, cartItems)}
</div>
</div>
</div>`
});

// let deliveryHTML = ``;
function deliveryOptionsHTML(matchingProduct, cartItems){
let html = '';

deliveryOptions.forEach((deliveryOption) =>{
const currentDate = Dayjs();
const deliveryDate = currentDate.add(deliveryOption.deliveryDays, 'days')
const dateString = deliveryDate.format('dddd, MMMM, D');
const priceString = deliveryOption.priceCents === 0 ? 'FREE'
: `$${(deliveryOption.priceCents / 100).toFixed(2)} -`

const isChecked = deliveryOption.id === cartItems.deliveryOptionId;

html += `
<div class="product-shipping">
<div class="shipping-radio-btn js-delivery-option"
data-product-id = "${matchingProduct.id}" data-delivery-option-id=${deliveryOption.id}>
<input type="radio"
${isChecked ? 'checked': ''} name="shippingOption-${matchingProduct.id}">
</div>
<div>
<div class="week-date-info"> ${dateString} </div>
<div class="price-info">${priceString} Shipping</div>
</div>
</div>`
});

return html;
};


document.querySelector('.js-checkout-order-info').innerHTML = checkoutHTML;

Expand All @@ -108,6 +126,42 @@ cart.forEach((cartItem) =>{

document.querySelector('.js-items-quantity').innerHTML = `(${cartQuantity} items)`;

// document.querySelectorAll('.js-delivery-option').forEach((element) =>{
// element.addEventListener('click', () =>{
// const {productId, deliveryOptionId} = element.dataset;
// updateDeliveryOption(productId, deliveryOptionId);
// })
// })

document.querySelectorAll('.js-delivery-option').forEach((element) => {
element.addEventListener('click', () => {
const { productId, deliveryOptionId } = element.dataset;
updateDeliveryOption(productId, deliveryOptionId);
updateDeliveryDate(productId);
});
});

function updateDeliveryDate(productId) {
const matchingItem = myCart.find((cartItem) => cartItem.productId === productId);

if (matchingItem) {
const deliveryOption = deliveryOptions.find((option) => option.id === matchingItem.deliveryOptionId);

if (deliveryOption) {
const currentDate = Dayjs();
const deliveryDate = currentDate.add(deliveryOption.deliveryDays, 'days');
const dateString = deliveryDate.format('dddd, MMMM D');

const deliveryDateElement = document.querySelector(`.js-delivery-date-${productId}`);
if (deliveryDateElement) {
deliveryDateElement.textContent = `Delivery date: ${dateString}`;
}
}
}
}



function formatDeliveryDate(days) {
return (cart.length > 0) ? currentDate.add(days, 'day').format('dddd MMMM D') : '';
}
Expand All @@ -125,4 +179,9 @@ function formatDeliveryDate(days) {

// console.log(oneDayAfter);
// console.log(fiveDaysAfter);
// console.log(nindeDaysAfter);
// console.log(nindeDaysAfter);


// const oneDayAfter = formatDeliveryDate(1);
// const fiveDaysAfter = formatDeliveryDate(5);
// const nindeDaysAfter = formatDeliveryDate(9);
34 changes: 8 additions & 26 deletions styles/checkout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,41 +155,23 @@ main{
color: green;
font-weight: 700;
}
.product-free-shipping{
.product-shipping{
display: flex;
align-items: center;
line-height: 20px;
font-size: 15px;
margin-bottom: 10px;
}
.product-within-fivedays-shipping{
display: flex;
align-items: center;
line-height: 20px;
font-size: 15px;
margin-bottom: 10px;
}
.product-oneday-shipping{
display: flex;
align-items: center;
line-height: 20px;
font-size: 15px;
margin-bottom: 10px;
}
.free-shipping-radio-btn{
.shipping-radio-btn{
margin-right: 6px;
}
.fivedays-shipping-radio-btn{
margin-right: 6px;
.shipping-radio-btn input{
width: 18px;
height: 18px
}
.oneday-shipping-radio-btn{
margin-right: 6px;
}
.free-shipping-radio-btn input,
.fivedays-shipping-radio-btn input,
.oneday-shipping-radio-btn input{
width: 20px;
height: 20px
.price-info{
color: rgb(120,120,120);
font-size: 15px;
}
/* ##################################### */
.payment-summary{
Expand Down

0 comments on commit 8318da3

Please sign in to comment.