Ecommerce Cart Pricing Made Easy

JS Bytes Issue #6 - Become a better JS engineer!

Oct 08, 2024

Welcome to the 6th issue of JS Bytes!

In each issue, I make sure to come up with a real-world problem-solving challenge and conceptual interview MCQs, that help you in your projects.

Shopping Cart Total Calculation Challenge

In e-commerce platforms like Shopify or WooCommerce, the shopping cart often contains products with varying prices, quantities, and discounts.

For this challenge, you'll build a cart total calculation function that factors in items, their quantities, and any discounts applied.

This exercise will help you simulate how shopping cart data is structured and processed in a real-world scenario.

Problem Details:

You need to create a function, calculateTotal, that takes an array of cart items and an optional discounts object. The function should calculate the total price of all items in the cart, applying discounts where applicable.

Features:

Dynamic Discounts:
- Some items may have percentage-based discounts (e.g., 10% off).
- Others might have a "Buy-One-Get-One-Free" (BOGO) offer, which means the customer pays for only half the quantity of the item.
Cart Calculation:
- For each item, calculate the total cost by multiplying its price by its quantity.
- If a discount exists for the item, adjust the cost accordingly.

Function Signature:

function calculateTotal(cart, discounts = {}) {
    // Your code here
}

Here are some scenarios to test your implementation:

Test Cases:

const cart1 = [
  { name: 'Laptop', price: 1000, quantity: 1 },
  { name: 'Mouse', price: 50, quantity: 2 },
  { name: 'Keyboard', price: 80, quantity: 1 },
]

const discounts1 = {
  Laptop: { type: 'percentage', value: 10 }, // 10% off
  Mouse: { type: 'bogo' }, // Buy-One-Get-One-Free offer
}

console.log(calculateTotal(cart1, discounts1))
// Expected output: 1030

const cart2 = [
  { name: 'Phone', price: 800, quantity: 2 },
  { name: 'Headphones', price: 200, quantity: 1 },
  { name: 'Charger', price: 25, quantity: 3 },
  { name: 'USB Cable', price: 15, quantity: 2 },
]

const discounts2 = {
  Phone: { type: 'percentage', value: 20 }, // 20% off on Phone
  'USB Cable': { type: 'bogo' }, // BOGO on USB Cable
}

console.log(calculateTotal(cart2, discounts2))
// Expected output: 1570

const cart3 = [
  { name: 'Monitor', price: 300, quantity: 1 },
  { name: 'Desk', price: 150, quantity: 1 },
  { name: 'Chair', price: 100, quantity: 1 },
]

const discounts3 = {}

console.log(calculateTotal(cart3, discounts3))
// Expected output: 550

3 Conceptual Interview MCQs

1. What will be the output of the above code?

const obj = {}

obj.name = obj

console.log('obj', obj)

A) obj { name: null }
B) obj { name: { name: { ... } } }
C) obj { name: obj }
D) obj { name: [Circular] }

2. What will be the output of the above code?

console.log('Start');
setTimeout(function() {
  console.log('Timeout 1');
}, 1000);

setTimeout(function() {
  console.log('Timeout 2');
}, 0);

console.log('End');

A) Start End Timeout 1 Timeout 2
B) Start Timeout 1 Timeout 2 End
C) Start Timeout 2 Timeout 1 End
D) Start End Timeout 2 Timeout 1

3. What will be the output?

class BankAccount {
  #balance = 1000;

  withdraw(amount) {
    if (amount <= this.#balance) {
      this.#balance -= amount;
      console.log(`Withdrawal successful! Remaining balance: ${this.#balance}`);
    } else {
      console.log('Insufficient funds.');
    }
  }

  deposit(amount) {
    this.#balance += amount;
    console.log(`Deposit successful! New balance: ${this.#balance}`);
  }
}

const account = new BankAccount()
account.withdraw(500);
account.deposit(300);
console.log(account.#balance)

A) Withdrawal successful! Remaining balance: 500, Deposit successful! New balance: 800, 800
B) Withdrawal successful! Remaining balance: 500, Deposit successful! New balance: 800, undefined
C) Withdrawal successful! Remaining balance: 500, Deposit successful! New balance: 800, SyntaxError: Private field '#balance' must be declared in an enclosing class
D) Withdrawal successful! Remaining balance: 500, Deposit successful! New balance: 800, ReferenceError: #balance is not defined

Thank you for reading this issue!

If you enjoyed the challenge and want more coding exercises, be sure to check out my previous issues. Don’t forget to subscribe for future newsletters and share it with others who might find it useful.