Formatage des devises

Aperçu

La fonction createFormatter() retourne une instance Intl.NumberFormat configurée pour la devise de votre boutique. Utilisez-la pour afficher les prix de manière cohérente dans votre vitrine.

Obtenir le formateur

const formatter = await komerza.createFormatter();

Retourne un objet JavaScript standard Intl.NumberFormat configuré avec le code de devise de votre boutique (par ex., USD, EUR, GBP).

Utilisation de base

const formatter = await komerza.createFormatter();

// Formater un prix
const price = formatter.format(29.99);
console.log(price); // "$29.99" (pour les boutiques en USD)

Exemples

const formatter = await komerza.createFormatter();

// Montants différents
formatter.format(9.99); // "$9.99"
formatter.format(100); // "$100.00"
formatter.format(1499.5); // "$1,499.50"
formatter.format(0.99); // "$0.99"

// Fonctionne avec n'importe quel nombre
formatter.format(29); // "$29.00"
formatter.format(29.9); // "$29.90"
formatter.format(29.999); // "$30.00" (arrondi)

Afficher les prix des produits

async function afficherProduits() {
  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)}`);
    });
  });
}

Plages de prix

Afficher « À partir de $X » pour les produits avec plusieurs variantes :

async function afficherPlageDePrix(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)}`;
}

Total du panier

Calculer et formater les totaux du panier :

async function getTotalPanier() {
  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);
}

Mise en cache du formateur

Créez le formateur une seule fois et réutilisez-le pour éviter des appels API inutiles :

// Stocker le formateur globalement
let currencyFormatter = null;

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

// Utiliser dans toute votre application
async function formatPrice(amount) {
  const formatter = await getFormatter();
  return formatter.format(amount);
}

Méthodes Intl.NumberFormat

Comme createFormatter() retourne un Intl.NumberFormat standard, vous avez accès à toutes ses méthodes :

format()

Retourne une chaîne formatée :

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

formatToParts()

Retourne un tableau de parties pour un rendu personnalisé :

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" }
// ]

// Construire un affichage personnalisé
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}`);

Devise par boutique

Le formateur utilise automatiquement la devise configurée dans votre boutique :

Devise de la boutique	Exemple de sortie
USD	$29.99
EUR	€29.99
GBP	£29.99
JPY	¥2,999
CAD	CA$29.99
AUD	A$29.99

Exemple complet

<!DOCTYPE html>
<html>
  <head>
    <title>Produits</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() {
        // Obtenir le formateur et les données de la boutique
        const [fmt, storeResponse] = await Promise.all([
          komerza.createFormatter(),
          komerza.getStore(),
        ]);

        formatter = fmt;

        if (!storeResponse.success) return;

        // Afficher les produits avec les prix formatés
        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})">
              Ajouter au panier
            </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} article(s) dans le panier`;
      }

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

Getting Started

Client Library

Aperçu

Obtenir le formateur

Utilisation de base

Exemples

Afficher les prix des produits

Plages de prix

Total du panier

Mise en cache du formateur

Méthodes Intl.NumberFormat

format()

formatToParts()

Devise par boutique

Exemple complet

Étapes suivantes

Informations sur la boutique

Gestion du panier

​Aperçu

​Obtenir le formateur

​Utilisation de base

​Exemples

​Afficher les prix des produits

​Plages de prix

​Total du panier

​Mise en cache du formateur

​Méthodes Intl.NumberFormat

​format()

​formatToParts()

​Devise par boutique

​Exemple complet

​Étapes suivantes

Informations sur la boutique

Gestion du panier

Aperçu

Obtenir le formateur

Utilisation de base

Exemples

Afficher les prix des produits

Plages de prix

Total du panier

Mise en cache du formateur

Méthodes Intl.NumberFormat

format()

formatToParts()

Devise par boutique

Exemple complet

Étapes suivantes