Formatowanie walut

Przegląd

Funkcja createFormatter() zwraca instancję Intl.NumberFormat skonfigurowaną dla waluty Twojego sklepu. Używaj jej do spójnego wyświetlania cen w witrynie sklepu.

Pobieranie formatera

const formatter = await komerza.createFormatter();

Zwraca standardowy obiekt JavaScript Intl.NumberFormat skonfigurowany z kodem waluty Twojego sklepu (np. USD, EUR, GBP).

Podstawowe użycie

const formatter = await komerza.createFormatter();

// Formatowanie ceny
const price = formatter.format(29.99);
console.log(price); // "$29.99" (dla sklepów w USD)

Przykłady

const formatter = await komerza.createFormatter();

// Różne kwoty
formatter.format(9.99); // "$9.99"
formatter.format(100); // "$100.00"
formatter.format(1499.5); // "$1,499.50"
formatter.format(0.99); // "$0.99"

// Działa z dowolną liczbą
formatter.format(29); // "$29.00"
formatter.format(29.9); // "$29.90"
formatter.format(29.999); // "$30.00" (zaokrąglone)

Wyświetlanie cen produktów

async function wyswietlProdukty() {
  const [storeResponse, formatter] = await Promise.all([
    komerza.getStore(),
    komerza.createFormatter(),
  ]);

  if (!storeResponse.success) return;

  storeResponse.data.products.forEach((product) => {
    product.variants.forEach((variant) => {
      console.log(`${variant.name}: ${formatter.format(variant.cost)}`);
    });
  });
}

Zakresy cen

Wyświetlaj „Od $X” dla produktów z wieloma wariantami:

async function wyswietlZakresCen(product) {
  const formatter = await komerza.createFormatter();

  const prices = product.variants.map((v) => v.cost);
  const minPrice = Math.min(...prices);
  const maxPrice = Math.max(...prices);

  if (minPrice === maxPrice) {
    return formatter.format(minPrice);
  }

  return `${formatter.format(minPrice)} - ${formatter.format(maxPrice)}`;
}

Suma koszyka

Oblicz i sformatuj sumy koszyka:

async function getSumaKoszyka() {
  const [storeResponse, formatter] = await Promise.all([
    komerza.getStore(),
    komerza.createFormatter(),
  ]);

  if (!storeResponse.success) return null;

  const basket = komerza.getBasket();
  const products = storeResponse.data.products;

  let total = 0;

  basket.forEach((item) => {
    const product = products.find((p) => p.id === item.productId);
    if (!product) return;

    const variant = product.variants.find((v) => v.id === item.variantId);
    if (!variant) return;

    total += variant.cost * item.quantity;
  });

  return formatter.format(total);
}

Buforowanie formatera

Utwórz formater raz i używaj go ponownie, aby uniknąć zbędnych wywołań API:

// Przechowuj formater globalnie
let currencyFormatter = null;

async function getFormatter() {
  if (!currencyFormatter) {
    currencyFormatter = await komerza.createFormatter();
  }
  return currencyFormatter;
}

// Używaj w całej aplikacji
async function formatujCene(amount) {
  const formatter = await getFormatter();
  return formatter.format(amount);
}

Metody Intl.NumberFormat

Ponieważ createFormatter() zwraca standardowy Intl.NumberFormat, masz dostęp do wszystkich jego metod:

format()

Zwraca sformatowany ciąg znaków:

formatter.format(1234.56); // "$1,234.56"

formatToParts()

Zwraca tablicę części do niestandardowego renderowania:

const parts = formatter.formatToParts(1234.56);
// [
//   { type: "currency", value: "$" },
//   { type: "integer", value: "1" },
//   { type: "group", value: "," },
//   { type: "integer", value: "234" },
//   { type: "decimal", value: "." },
//   { type: "fraction", value: "56" }
// ]

// Zbuduj niestandardowy widok
const integer = parts
  .filter((p) => p.type === "integer" || p.type === "group")
  .map((p) => p.value)
  .join("");

const fraction = parts.find((p) => p.type === "fraction")?.value || "00";

console.log(`$${integer}.${fraction}`);

Waluta według sklepu

Formater automatycznie używa skonfigurowanej waluty Twojego sklepu:

Waluta sklepu	Przykładowy wynik
USD	$29.99
EUR	€29.99
GBP	£29.99
JPY	¥2,999
CAD	CA$29.99
AUD	A$29.99

Pełny przykład

<!DOCTYPE html>
<html>
  <head>
    <title>Produkty</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
  </head>
  <body>
    <div id="products"></div>
    <div id="cart-total"></div>

    <script>
      komerza.init("your-store-id");

      let formatter;

      async function init() {
        // Pobierz formater i dane sklepu
        const [fmt, storeResponse] = await Promise.all([
          komerza.createFormatter(),
          komerza.getStore(),
        ]);

        formatter = fmt;

        if (!storeResponse.success) return;

        // Wyświetl produkty ze sformatowanymi cenami
        const html = storeResponse.data.products
          .map((product) => {
            const variant = product.variants[0];
            const price = formatter.format(variant.cost);

            return `
          <div class="product">
            <h3>${product.name}</h3>
            <p class="price">${price}</p>
            <button onclick="addToCart('${product.id}', '${variant.id}', ${variant.cost})">
              Dodaj do koszyka
            </button>
          </div>
        `;
          })
          .join("");

        document.getElementById("products").innerHTML = html;
      }

      function addToCart(productId, variantId, cost) {
        komerza.addToBasket(productId, variantId, 1);
        updateCartTotal();
      }

      function updateCartTotal() {
        const basket = komerza.getBasket();
        const count = komerza.getBasketItemCount();
        document.getElementById("cart-total").textContent =
          `${count} produkt(ów) w koszyku`;
      }

      init();
    </script>
  </body>
</html>

Getting Started

Client Library

Przegląd

Pobieranie formatera

Podstawowe użycie

Przykłady

Wyświetlanie cen produktów

Zakresy cen

Suma koszyka

Buforowanie formatera

Metody Intl.NumberFormat

format()

formatToParts()

Waluta według sklepu

Pełny przykład

Następne kroki

Informacje o sklepie

Zarządzanie koszykiem

​Przegląd

​Pobieranie formatera

​Podstawowe użycie

​Przykłady

​Wyświetlanie cen produktów

​Zakresy cen

​Suma koszyka

​Buforowanie formatera

​Metody Intl.NumberFormat

​format()

​formatToParts()

​Waluta według sklepu

​Pełny przykład

​Następne kroki

Informacje o sklepie

Zarządzanie koszykiem

Przegląd

Pobieranie formatera

Podstawowe użycie

Przykłady

Wyświetlanie cen produktów

Zakresy cen

Suma koszyka

Buforowanie formatera

Metody Intl.NumberFormat

format()

formatToParts()

Waluta według sklepu

Pełny przykład

Następne kroki