JavaScriptLección 16 de 16

Proyecto final: el carrito de una tienda online

Toca juntarlo todo. El carrito de una tienda pequeña es una clase, arrays y sus métodos, errores, un closure, JSON y un pago asíncrono en un solo programa.

Lo esencial

Cart guarda items y ofrece add, total y lines
Un producto desconocido lanza new Error, y fuera lo atiende try...catch
La suma sale de reduce y las líneas del ticket, de map con desestructuración
El cupón vive en un closure: funciona una vez y la segunda ya no hay descuento
El pago es una promesa con setTimeout, y await espera el resultado

Ejemplo

// The pieces of the project in one placeconst prices = { mug: 12, cap: 18 };const order = [["mug", 2], ["cap", 1]]; const sum = order.reduce((total, [id, qty]) => total + prices[id] * qty, 0);console.log(`Sum: ${sum}`); function makeLimiter(max) {  let used = 0;  return () => (used < max ? `ok ${++used}` : "limit reached");}const tryCode = makeLimiter(1);console.log(tryCode(), tryCode()); const saved = JSON.stringify({ sum });console.log(saved, JSON.parse(saved).sum === sum);

El ejemplo es un calentamiento: reduce que desestructura cada par [id, qty], un limitador hecho con un closure y la comprobación de que JSON devuelve la misma suma.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Completa el carrito. add(id, qty) busca el producto en catalog (si no está, throw new Error(`Unknown product: ${id}`)) y aumenta qty o añade { id, ...product, qty }; total es la suma de price * qty; lines() devuelve líneas como Mug x3 = 36; makePromo aplica el descuento percent solo una vez. Salida: Unknown product: sofa, Mug x3 = 36, T-shirt x1 = 25, Total: 54.90, Promo again: 61.00, {"items":2,"total":54.9} y Paid 54.90.

// Final project: the shopping cart of a small online storeconst catalog = {  mug: { name: "Mug", price: 12 },  tee: { name: "T-shirt", price: 25 },  cap: { name: "Cap", price: 18 },}; class Cart {  items = [];   add(id, qty = 1) {    // TODO: find the product in catalog; if there is none,    // throw new Error(`Unknown product: ${id}`)    // TODO: if the product is already in items, increase its qty,    // otherwise push { id, ...product, qty }  }   get total() {    // TODO: the sum of price * qty for every item (reduce)    return 0;  }   lines() {    // TODO: one string per item, like "Mug x3 = 36" (map)    return [];  }} // TODO: a promo code that works only once (closure)function makePromo(code, percent) {  return (input, amount) => amount;} // A pretend payment service: answers a moment laterconst pay = (amount) =>  new Promise((resolve) => setTimeout(() => resolve(`Paid ${amount}`), 0)); async function main() {  const cart = new Cart();  cart.add("mug", 2);  cart.add("tee");  cart.add("mug");  try {    cart.add("sofa");  } catch (error) {    console.log(error.message);  }   for (const line of cart.lines()) console.log(line);   const applyPromo = makePromo("HELLO10", 10);  const total = applyPromo("HELLO10", cart.total);  console.log(`Total: ${total.toFixed(2)}`);  console.log(`Promo again: ${applyPromo("HELLO10", cart.total).toFixed(2)}`);   console.log(JSON.stringify({ items: cart.items.length, total }));  console.log(await pay(total.toFixed(2)));} main();

// Final project: the shopping cart of a small online store
const catalog = {
  mug: { name: "Mug", price: 12 },
  tee: { name: "T-shirt", price: 25 },
  cap: { name: "Cap", price: 18 },
};

class Cart {
  items = [];

  add(id, qty = 1) {
    // TODO: find the product in catalog; if there is none,
    // throw new Error(`Unknown product: ${id}`)
    // TODO: if the product is already in items, increase its qty,
    // otherwise push { id, ...product, qty }
  }

  get total() {
    // TODO: the sum of price * qty for every item (reduce)
    return 0;
  }

  lines() {
    // TODO: one string per item, like "Mug x3 = 36" (map)
    return [];
  }
}

// TODO: a promo code that works only once (closure)
function makePromo(code, percent) {
  return (input, amount) => amount;
}

// A pretend payment service: answers a moment later
const pay = (amount) =>
  new Promise((resolve) => setTimeout(() => resolve(`Paid ${amount}`), 0));

async function main() {
  const cart = new Cart();
  cart.add("mug", 2);
  cart.add("tee");
  cart.add("mug");
  try {
    cart.add("sofa");
  } catch (error) {
    console.log(error.message);
  }

  for (const line of cart.lines()) console.log(line);

  const applyPromo = makePromo("HELLO10", 10);
  const total = applyPromo("HELLO10", cart.total);
  console.log(`Total: ${total.toFixed(2)}`);
  console.log(`Promo again: ${applyPromo("HELLO10", cart.total).toFixed(2)}`);

  console.log(JSON.stringify({ items: cart.items.length, total }));
  console.log(await pay(total.toFixed(2)));
}

main();

Salida

Aquí aparecerá lo que imprima el programa.