[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/sk-SK.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostupný produkt} few {# dostupné produkty} many {# dostupných produktov} other {# dostupných produktov}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nedostupný produkt} few {# nedostupné produkty} many {# nedostupných produktov} other {# nedostupných produktov}}",
  "store/product-list.message.cantBeDelivered": "Tento produkt nie je možné doručiť na uvedenú adresu.",
  "store/product-list.message.noLongerAvailable": "Tento produkt už nie je dostupný.",
  "store/product-list.message.remove": "odstrániť",
  "store/product-list.quantity-selector.remove": "Odstrániť",
  "store/product-list.quantity-label": "{quantity} kus.",
  "store/product-list.delete-button.default-label": "Odstrániť produkt",
  "store/product-list.priceChanged": "Zmenené",
  "store/product-list.priceOptions": "Možnosti ceny",
  "store/product-list.changePrice": "Zmeniť cenu",
  "store/product-list.revertToOriginal": "Vrátiť sa k pôvodnej možnosti",
  "store/product-list.originalPrice": "Pôvodná cena",
  "store/product-list.changeTo": "Zmeniť na",
  "store/product-list.manualPricePlaceholder": "Zadajte peňažnú hodnotu",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tento produkt sa predáva v násobkoch {unitMultiplier}{measurementUnit}. Vzhľadom na to bolo vložené množstvo zaokrúhlené na {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Množstvo produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zvýšiť množstvo",
  "store/product-list.quantityStepper.decreaseQuantity": "Znížiť množstvo"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/uk-UA.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "за {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# наявний товар} few {# наявні товари} many {# наявних товарів} other {# наявних товарів}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# товар недоступний} few {# товари недоступні} many {# товарів недоступні} other {# товарів недоступні}}",
  "store/product-list.message.cantBeDelivered": "Цей товар не можна доставити за вказаною адресою.",
  "store/product-list.message.noLongerAvailable": "Товар більше не доступний.",
  "store/product-list.message.remove": "прибрати",
  "store/product-list.quantity-selector.remove": "Видалити",
  "store/product-list.quantity-label": "{quantity} шт.",
  "store/product-list.delete-button.default-label": "Видалити товар",
  "store/product-list.priceChanged": "Змінено",
  "store/product-list.priceOptions": "Варіанти вартості",
  "store/product-list.changePrice": "Змінити ціну",
  "store/product-list.revertToOriginal": "Повернутися до початкової",
  "store/product-list.originalPrice": "Початкова ціна",
  "store/product-list.changeTo": "Змінити на",
  "store/product-list.manualPricePlaceholder": "Введіть ціну",
  "store/product-list.applyManualPrice": "добре",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Цей товар продається по {unitMultiplier} {measurementUnit}. Через це введена кількість була округлена до {roundedValue} {measurementUnit}.",
  "store/product-list.quantityStepper.label": "Кількість товару",
  "store/product-list.quantityStepper.increaseQuantity": "Збільшити кількість",
  "store/product-list.quantityStepper.decreaseQuantity": "Зменшити кількість"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/pl-PL.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostępny produkt} few {# dostępne produkty} other {# dostępne produkty}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# niedostępny produkt} other {# niedostępne produkty}}",
  "store/product-list.message.cantBeDelivered": "Tego produktu nie można dostarczyć pod podany adres.",
  "store/product-list.message.noLongerAvailable": "Ten produkt nie jest już dostępny.",
  "store/product-list.message.remove": "usuń",
  "store/product-list.quantity-selector.remove": "Usuń",
  "store/product-list.quantity-label": "{quantity} nied.",
  "store/product-list.delete-button.default-label": "Usuń produkt",
  "store/product-list.priceChanged": "Zmieniono",
  "store/product-list.priceOptions": "Opcje cenowe",
  "store/product-list.changePrice": "Zmień cenę",
  "store/product-list.revertToOriginal": "Przywróć oryginalne",
  "store/product-list.originalPrice": "Oryginalna cena",
  "store/product-list.changeTo": "Zmień na",
  "store/product-list.manualPricePlaceholder": "Wpisz wartość pieniężną",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ten produkt jest sprzedawany według ułamków {unitMultiplier}{measurementUnit}. Biorąc to pod uwagę, wstawiona ilość została zaokrąglona do {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Ilość produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zwiększ ilość",
  "store/product-list.quantityStepper.decreaseQuantity": "Zmniejsz ilość"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/fr.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "par {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produit disponible} other {# produits disponibles}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produit indisponible} other {# produits indisponibles}}",
  "store/product-list.message.cantBeDelivered": "Ce produit ne peut pas être livré à l'adresse indiquée.",
  "store/product-list.message.noLongerAvailable": "Ce produit n'est plus disponible.",
  "store/product-list.message.remove": "retirer",
  "store/product-list.quantity-selector.remove": "Retirer",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Supprimer le produit",
  "store/product-list.priceChanged": "Changé",
  "store/product-list.priceOptions": "Options des prix",
  "store/product-list.changePrice": "Modifier le prix",
  "store/product-list.revertToOriginal": "Revenir à la version originale",
  "store/product-list.originalPrice": "Prix d’origine",
  "store/product-list.changeTo": "Changer en",
  "store/product-list.manualPricePlaceholder": "Tapez une valeur monétaire",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ce produit est vendu par fractions de {unitMultiplier}{measurementUnit}. Compte tenu de cela, la quantité insérée a été arrondie à {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantité du produit",
  "store/product-list.quantityStepper.increaseQuantity": "Augmenter la quantité",
  "store/product-list.quantityStepper.decreaseQuantity": "Diminuer la quantité"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/da-DK.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "pr {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tilgængeligt produkt} other {# tilgængelige produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# utilgængeligt produkt } other {# utilgængelige produkter}}",
  "store/product-list.message.cantBeDelivered": "Dette produkt kan ikke leveres til denne adresse.",
  "store/product-list.message.noLongerAvailable": "Dette produkt er ikke længere tilgængeligt.",
  "store/product-list.message.remove": "fjern",
  "store/product-list.quantity-selector.remove": "Fjern",
  "store/product-list.quantity-label": "{quantity} en.",
  "store/product-list.delete-button.default-label": "Fjern produkt",
  "store/product-list.priceChanged": "Ændret",
  "store/product-list.priceOptions": "Prismuligheder",
  "store/product-list.changePrice": "Skift pris",
  "store/product-list.revertToOriginal": "Tilbage til original",
  "store/product-list.originalPrice": "Original pris",
  "store/product-list.changeTo": "Skift til",
  "store/product-list.manualPricePlaceholder": "Skriv en monetær værdi",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dette produkt sælges i brøkdele af {unitMultiplier}{measurementUnit}. I betragtning af at den indsatte mængde er afrundet til {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktantal",
  "store/product-list.quantityStepper.increaseQuantity": "Øg antal",
  "store/product-list.quantityStepper.decreaseQuantity": "Sænk antal"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/el.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "ανά {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# διαθέσιμο προϊόν} other {# διαθέσιμα προϊόντα}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# μη διαθέσιμο προϊόν} other {# μη διαθέσιμα προϊόντα}}",
  "store/product-list.message.cantBeDelivered": "Αυτό το προϊόν δεν μπορεί να παραδοθεί στην παρεχόμενη διεύθυνση.",
  "store/product-list.message.noLongerAvailable": "Αυτό το προϊόν δεν είναι πλέον διαθέσιμο.",
  "store/product-list.message.remove": "αφαίρεση",
  "store/product-list.quantity-selector.remove": "Αφαιρώ",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Αφαίρεση προϊόντος",
  "store/product-list.priceChanged": "Άλλαξε",
  "store/product-list.priceOptions": "Επιλογές τιμής",
  "store/product-list.changePrice": "Αλλαγή τιμής",
  "store/product-list.revertToOriginal": "Επιστροφή στο αρχικό",
  "store/product-list.originalPrice": "Αρχική τιμή",
  "store/product-list.changeTo": "Άλλαξε σε",
  "store/product-list.manualPricePlaceholder": "Πληκτρολογήστε μια χρηματική αξία",
  "store/product-list.applyManualPrice": "οκ",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Αυτό το προϊόν πωλείται με κλάσματα του {unitMultiplier}{measurementUnit}. Δεδομένου αυτού, η εισαγόμενη ποσότητα έχει στρογγυλοποιηθεί σε {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Ποιότητα προϊόντος",
  "store/product-list.quantityStepper.increaseQuantity": "Αύξηση ποσότητας",
  "store/product-list.quantityStepper.decreaseQuantity": "Μείωση ποσότητας"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/bg.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "на {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# наличен продукт} other {# налични продукта}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# неналичен продукт} other {# неналични продукта}}",
  "store/product-list.message.cantBeDelivered": "Този продукт не може да бъде доставен до предоставения адрес.",
  "store/product-list.message.noLongerAvailable": "Продуктът вече не е наличен.",
  "store/product-list.message.remove": "премахване",
  "store/product-list.quantity-selector.remove": "Премахване",
  "store/product-list.quantity-label": "{quantity} ед.",
  "store/product-list.delete-button.default-label": "Премахване на продукт",
  "store/product-list.priceChanged": "Променено",
  "store/product-list.priceOptions": "Ценови опции",
  "store/product-list.changePrice": "Промяна на цената",
  "store/product-list.revertToOriginal": "Връщане към първоначалното състояние",
  "store/product-list.originalPrice": "Първоначална цена",
  "store/product-list.changeTo": "Промяна на",
  "store/product-list.manualPricePlaceholder": "Вид парична стойност",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Този продукт се продава на части от {unitMultiplier}{measurementUnit}. Предвид това вмъкнатото количество е закръглено на {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Количество продукт",
  "store/product-list.quantityStepper.increaseQuantity": "Увеличаване на количеството",
  "store/product-list.quantityStepper.decreaseQuantity": "Намаляване на количеството"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ro.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produs disponibil} other {# produse disponibile}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produs indisponibil} other {# produse indisponibile}}",
  "store/product-list.message.cantBeDelivered": "Acest produs nu poate fi livrat la adresa furnizată.",
  "store/product-list.message.noLongerAvailable": "Acest produs nu este mai este disponibil.",
  "store/product-list.message.remove": "înlătură",
  "store/product-list.quantity-selector.remove": "Șterge",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Șterge produsul",
  "store/product-list.priceChanged": "Modificat",
  "store/product-list.priceOptions": "Opțiuni preț",
  "store/product-list.changePrice": "Modifică prețul",
  "store/product-list.revertToOriginal": "Revino la original",
  "store/product-list.originalPrice": "Preț original",
  "store/product-list.changeTo": "Schimbă în",
  "store/product-list.manualPricePlaceholder": "Introdu o valoare monetară",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Produsul este vândut prin fracțiuni de {unitMultiplier}{measurementUnit}. În aceste condiții, cantitatea introdusă a fost rotunjită la {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Cantitate produs",
  "store/product-list.quantityStepper.increaseQuantity": "Crește cantitatea",
  "store/product-list.quantityStepper.decreaseQuantity": "Scade cantitatea"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ca.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# producte disponible} other {# productes disponibles}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# producte no disponible} other {# productes no disponibles}}",
  "store/product-list.message.cantBeDelivered": "No es pot lliurar aquest producte a l'adreça facilitada.",
  "store/product-list.message.noLongerAvailable": "Aquest producte ja no està disponible.",
  "store/product-list.message.remove": "treu-lo",
  "store/product-list.quantity-selector.remove": "Treu-lo",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Treu el producte",
  "store/product-list.priceChanged": "Canviat",
  "store/product-list.priceOptions": "Opcions de preu",
  "store/product-list.changePrice": "Canvia el preu",
  "store/product-list.revertToOriginal": "Reverteix-lo a l'original",
  "store/product-list.originalPrice": "Preu original",
  "store/product-list.changeTo": "Canvieu-lo a",
  "store/product-list.manualPricePlaceholder": "Escriviu un valor monetari",
  "store/product-list.applyManualPrice": "d'acord",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Aquest producte es ven per fraccions de {unitMultiplier}{measurementUnit}. Per aquest motiu, la quantitat inserida s'ha arrodonit a {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantitat de producte",
  "store/product-list.quantityStepper.increaseQuantity": "Augmenta la quantitat",
  "store/product-list.quantityStepper.decreaseQuantity": "Disminueix la quantitat"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/pt-BR.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "por {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produto disponível} other {# produtos disponíveis}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produto indisponível} other {# produtos indisponíveis}}",
  "store/product-list.message.cantBeDelivered": "Não é possível entregar este produto no endereço informado.",
  "store/product-list.message.noLongerAvailable": "Este produto não está mais disponível.",
  "store/product-list.message.remove": "remover",
  "store/product-list.quantity-selector.remove": "Remover",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Remover produto",
  "store/product-list.priceChanged": "Alterado",
  "store/product-list.priceOptions": "Opções de preço",
  "store/product-list.changePrice": "Alterar preço",
  "store/product-list.revertToOriginal": "Reverter preço",
  "store/product-list.originalPrice": "Preço original",
  "store/product-list.changeTo": "Alterar para",
  "store/product-list.manualPricePlaceholder": "Digite um valor",
  "store/product-list.applyManualPrice": "Aplicar",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Esse produto é vendido por frações de {unitMultiplier}{measurementUnit}. Por isso, a quantidade inserida foi arredondada para {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantidade do produto",
  "store/product-list.quantityStepper.increaseQuantity": "Aumentar quantidade",
  "store/product-list.quantityStepper.decreaseQuantity": "Diminuir quantidade"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/de-DE.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# verfügbares Produkt} other {# verfügbare Produkte}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nicht verfügbares Produkt} other {# nicht verfügbare Produkte}}",
  "store/product-list.message.cantBeDelivered": "Dieses Produkt kann nicht an die angegebene Adresse geliefert werden.",
  "store/product-list.message.noLongerAvailable": "Dieses Produkt ist nicht mehr erhältlich.",
  "store/product-list.message.remove": "entfernen",
  "store/product-list.quantity-selector.remove": "Entfernen",
  "store/product-list.quantity-label": "{quantity} Un.",
  "store/product-list.delete-button.default-label": "Produkt entfernen",
  "store/product-list.priceChanged": "Geändert",
  "store/product-list.priceOptions": "Preisoptionen",
  "store/product-list.changePrice": "Preis ändern",
  "store/product-list.revertToOriginal": "Zurück zum Original",
  "store/product-list.originalPrice": "Originalpreis",
  "store/product-list.changeTo": "Wechseln zu",
  "store/product-list.manualPricePlaceholder": "Geben Sie einen Geldwert ein",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dieses Produkt wird in Bruchteilen von {unitMultiplier}{measurementUnit} verkauft. Daher wurde die eingesetzte Menge auf {roundedValue}{measurementUnit} gerundet.",
  "store/product-list.quantityStepper.label": "Produktmenge",
  "store/product-list.quantityStepper.increaseQuantity": "Menge erhöhen",
  "store/product-list.quantityStepper.decreaseQuantity": "Menge verringern"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ko.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "{unitMultiplier} {measurementUnit}당.",
  "store/product-list.availableItems": "{quantity, plural, one {#가능한 제품} other {#개의 가능한 제품}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# 불가한 제품} other {#개의 불가한 제품}}",
  "store/product-list.message.cantBeDelivered": "이 제품은 제공된 주소로 배송할 수 없습니다.",
  "store/product-list.message.noLongerAvailable": "이 제품은 더 이상 사용할 수 없습니다.",
  "store/product-list.message.remove": "제거",
  "store/product-list.quantity-selector.remove": "제거",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "제품 제거",
  "store/product-list.priceChanged": "변경됨",
  "store/product-list.priceOptions": "가격 옵션",
  "store/product-list.changePrice": "가격 변경",
  "store/product-list.revertToOriginal": "본래대로 되돌리기",
  "store/product-list.originalPrice": "정가",
  "store/product-list.changeTo": "변경",
  "store/product-list.manualPricePlaceholder": "통화 값 입력",
  "store/product-list.applyManualPrice": "확인",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "이 제품은 {unitMultiplier}{measurementUnit}의 일부로 판매됩니다. 따라서 삽입된 수량은 {roundedValue}{measurementUnit}로 반올림되었습니다.",
  "store/product-list.quantityStepper.label": "제품 수량",
  "store/product-list.quantityStepper.increaseQuantity": "수량 올리기",
  "store/product-list.quantityStepper.decreaseQuantity": "수량 내리기"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ca-ES.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# producte disponible} other {# productes disponibles}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# producte no disponible} other {# productes no disponibles}}",
  "store/product-list.message.cantBeDelivered": "No es pot lliurar aquest producte a l'adreça facilitada.",
  "store/product-list.message.noLongerAvailable": "Aquest producte ja no està disponible.",
  "store/product-list.message.remove": "treu-lo",
  "store/product-list.quantity-selector.remove": "Treu-lo",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Treu el producte",
  "store/product-list.priceChanged": "Canviat",
  "store/product-list.priceOptions": "Opcions de preu",
  "store/product-list.changePrice": "Canvia el preu",
  "store/product-list.revertToOriginal": "Reverteix-lo a l'original",
  "store/product-list.originalPrice": "Preu original",
  "store/product-list.changeTo": "Canvieu-lo a",
  "store/product-list.manualPricePlaceholder": "Escriviu un valor monetari",
  "store/product-list.applyManualPrice": "d'acord",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Aquest producte es ven per fraccions de {unitMultiplier}{measurementUnit}. Per aquest motiu, la quantitat inserida s'ha arrodonit a {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantitat de producte",
  "store/product-list.quantityStepper.increaseQuantity": "Augmenta la quantitat",
  "store/product-list.quantityStepper.decreaseQuantity": "Disminueix la quantitat"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/cs-CZ.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price}{perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostupný produkt} other {# dostupné produkty}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nedostupný produkt} other {# nedostupné produkty}}",
  "store/product-list.message.cantBeDelivered": "Tento produkt nelze doručit na uvedenou adresu.",
  "store/product-list.message.noLongerAvailable": "Tento produkt již není k dispozici.",
  "store/product-list.message.remove": "odstranit",
  "store/product-list.quantity-selector.remove": "Odstranit",
  "store/product-list.quantity-label": "{quantity} jedn.",
  "store/product-list.delete-button.default-label": "Odstranit produkt",
  "store/product-list.priceChanged": "Změněno",
  "store/product-list.priceOptions": "Cenové možnosti",
  "store/product-list.changePrice": "Změnit cenu",
  "store/product-list.revertToOriginal": "Vrátit na původní",
  "store/product-list.originalPrice": "Původní cena",
  "store/product-list.changeTo": "Změnit na",
  "store/product-list.manualPricePlaceholder": "Zadejte peněžní hodnotu",
  "store/product-list.applyManualPrice": "oK",
  "store/product-list.quantitySelector.label": "{quantity}{measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity}{measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tento výrobek se prodává po násobcích {unitMultiplier}{measurementUnit}. Vložené množství bylo proto zaokrouhleno na {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Množství produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zvýšit množství",
  "store/product-list.quantityStepper.decreaseQuantity": "Snížit množství"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/fr-FR.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "par {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produit disponible} other {# produits disponibles}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produit indisponible} other {# produits indisponibles}}",
  "store/product-list.message.cantBeDelivered": "Ce produit ne peut pas être livré à l'adresse indiquée.",
  "store/product-list.message.noLongerAvailable": "Ce produit n'est plus disponible.",
  "store/product-list.message.remove": "retirer",
  "store/product-list.quantity-selector.remove": "Retirer",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Supprimer le produit",
  "store/product-list.priceChanged": "Changé",
  "store/product-list.priceOptions": "Options des prix",
  "store/product-list.changePrice": "Modifier le prix",
  "store/product-list.revertToOriginal": "Revenir à la version originale",
  "store/product-list.originalPrice": "Prix d’origine",
  "store/product-list.changeTo": "Changer en",
  "store/product-list.manualPricePlaceholder": "Tapez une valeur monétaire",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ce produit est vendu par fractions de {unitMultiplier}{measurementUnit}. Compte tenu de cela, la quantité insérée a été arrondie à {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantité du produit",
  "store/product-list.quantityStepper.increaseQuantity": "Augmenter la quantité",
  "store/product-list.quantityStepper.decreaseQuantity": "Diminuer la quantité"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/cs.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price}{perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostupný produkt} other {# dostupné produkty}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nedostupný produkt} other {# nedostupné produkty}}",
  "store/product-list.message.cantBeDelivered": "Tento produkt nelze doručit na uvedenou adresu.",
  "store/product-list.message.noLongerAvailable": "Tento produkt již není k dispozici.",
  "store/product-list.message.remove": "odstranit",
  "store/product-list.quantity-selector.remove": "Odstranit",
  "store/product-list.quantity-label": "{quantity} jedn.",
  "store/product-list.delete-button.default-label": "Odstranit produkt",
  "store/product-list.priceChanged": "Změněno",
  "store/product-list.priceOptions": "Cenové možnosti",
  "store/product-list.changePrice": "Změnit cenu",
  "store/product-list.revertToOriginal": "Vrátit na původní",
  "store/product-list.originalPrice": "Původní cena",
  "store/product-list.changeTo": "Změnit na",
  "store/product-list.manualPricePlaceholder": "Zadejte peněžní hodnotu",
  "store/product-list.applyManualPrice": "oK",
  "store/product-list.quantitySelector.label": "{quantity}{measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity}{measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tento výrobek se prodává po násobcích {unitMultiplier}{measurementUnit}. Vložené množství bylo proto zaokrouhleno na {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Množství produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zvýšit množství",
  "store/product-list.quantityStepper.decreaseQuantity": "Snížit množství"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ru-RU.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "за {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# доступный товар} few {# доступных товара} many {# доступных товаров} other {# доступных товаров}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# недоступный товар} few {# недоступных товара} many {# недоступных товаров} other {# недоступных товаров}}",
  "store/product-list.message.cantBeDelivered": "Данный товар нельзя доставить по указанному адресу.",
  "store/product-list.message.noLongerAvailable": "Товар больше недоступен.",
  "store/product-list.message.remove": "удалить",
  "store/product-list.quantity-selector.remove": "Удалить",
  "store/product-list.quantity-label": "{quantity} шт.",
  "store/product-list.delete-button.default-label": "Удалить товар",
  "store/product-list.priceChanged": "Изменено",
  "store/product-list.priceOptions": "Варианты цены",
  "store/product-list.changePrice": "Изменить цену",
  "store/product-list.revertToOriginal": "Вернуться к начальной",
  "store/product-list.originalPrice": "Начальная цена",
  "store/product-list.changeTo": "Изменить на",
  "store/product-list.manualPricePlaceholder": "Введите цену",
  "store/product-list.applyManualPrice": "хорошо",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Этот товар продается по {unitMultiplier} {measurementUnit}. В связи с этим указанное количество было округлено до {roundedValue} {measurementUnit}.",
  "store/product-list.quantityStepper.label": "Количество товара",
  "store/product-list.quantityStepper.increaseQuantity": "Увеличить количество",
  "store/product-list.quantityStepper.decreaseQuantity": "Уменьшить количество"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/id.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produk tersedia} other {# produk tersedia}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produk tersedia} other {# produk tersedia}}",
  "store/product-list.message.cantBeDelivered": "Produk ini tidak dapat dikirim ke alamat yang diberikan.",
  "store/product-list.message.noLongerAvailable": "Produk ini tidak tersedia lagi.",
  "store/product-list.message.remove": "hapus",
  "store/product-list.quantity-selector.remove": "Hapus",
  "store/product-list.quantity-label": "{quantity} unit",
  "store/product-list.delete-button.default-label": "Hapus Produk",
  "store/product-list.priceChanged": "Berubah",
  "store/product-list.priceOptions": "Opsi harga",
  "store/product-list.changePrice": "Ubah harga",
  "store/product-list.revertToOriginal": "Kembalikan ke aslinya",
  "store/product-list.originalPrice": "Harga asli",
  "store/product-list.changeTo": "Ubah ke",
  "store/product-list.manualPricePlaceholder": "Ketik nilai uang",
  "store/product-list.applyManualPrice": "oke",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Produk ini dijual berdasarkan pecahan {unitMultiplier}{measurementUnit}. Karenanya, jumlah yang dimasukkan telah dibulatkan ke {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Jumlah produk",
  "store/product-list.quantityStepper.increaseQuantity": "Naikkan jumlah",
  "store/product-list.quantityStepper.decreaseQuantity": "Turunkan jumlah"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/no.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.message.cantBeDelivered": "Dette produktet kan ikke leveres til den oppgitte adressen.",
  "store/product-list.message.noLongerAvailable": "Produktet er ikke lenger tilgjengelig.",
  "store/product-list.message.remove": "fjern",
  "store/product-list.quantity-selector.remove": "Fjern",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Fjern produkt",
  "store/product-list.priceChanged": "Endret",
  "store/product-list.priceOptions": "Prisalternativer",
  "store/product-list.changePrice": "Endre pris",
  "store/product-list.revertToOriginal": "Gå tilbake til originalen",
  "store/product-list.originalPrice": "Opprinnelig pris",
  "store/product-list.changeTo": "Endre til",
  "store/product-list.manualPricePlaceholder": "Skriv inn en pengeverdi",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dette produktet selges i brøkdeler av {unitMultiplier}{measurementUnit}. Gitt at det innsatte antallet har blitt avrundet til {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktantall",
  "store/product-list.quantityStepper.increaseQuantity": "Øk antall",
  "store/product-list.quantityStepper.decreaseQuantity": "Reduser antall"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/nl-NL.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# beschikbaar product} other {# beschikbare producten}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# niet beschikbaar product} other {# niet beschikbare producten}}",
  "store/product-list.message.cantBeDelivered": "Dit product kan niet worden geleverd op het opgegeven adres.",
  "store/product-list.message.noLongerAvailable": "Dit product is niet langer verkrijgbaar.",
  "store/product-list.message.remove": "verwijder",
  "store/product-list.quantity-selector.remove": "Verwijder",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Product verwijderen",
  "store/product-list.priceChanged": "Veranderd",
  "store/product-list.priceOptions": "Prijsopties",
  "store/product-list.changePrice": "Prijs wijzigen",
  "store/product-list.revertToOriginal": "Ga terug naar het origineel",
  "store/product-list.originalPrice": "Originele prijs",
  "store/product-list.changeTo": "Wijzigen naar",
  "store/product-list.manualPricePlaceholder": "Typ een monetaire waarde",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dit product wordt verkocht met een fractie van {unitMultiplier}{measurementUnit}. Gegeven dat, de ingevoegde hoeveelheid is afgerond op {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Productaantal",
  "store/product-list.quantityStepper.increaseQuantity": "Aantal verhogen",
  "store/product-list.quantityStepper.decreaseQuantity": "Aantal verlagen"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/da.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "pr {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tilgængeligt produkt} other {# tilgængelige produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# utilgængeligt produkt } other {# utilgængelige produkter}}",
  "store/product-list.message.cantBeDelivered": "Dette produkt kan ikke leveres til denne adresse.",
  "store/product-list.message.noLongerAvailable": "Dette produkt er ikke længere tilgængeligt.",
  "store/product-list.message.remove": "fjern",
  "store/product-list.quantity-selector.remove": "Fjern",
  "store/product-list.quantity-label": "{quantity} en.",
  "store/product-list.delete-button.default-label": "Fjern produkt",
  "store/product-list.priceChanged": "Ændret",
  "store/product-list.priceOptions": "Prismuligheder",
  "store/product-list.changePrice": "Skift pris",
  "store/product-list.revertToOriginal": "Tilbage til original",
  "store/product-list.originalPrice": "Original pris",
  "store/product-list.changeTo": "Skift til",
  "store/product-list.manualPricePlaceholder": "Skriv en monetær værdi",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dette produkt sælges i brøkdele af {unitMultiplier}{measurementUnit}. I betragtning af at den indsatte mængde er afrundet til {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktantal",
  "store/product-list.quantityStepper.increaseQuantity": "Øg antal",
  "store/product-list.quantityStepper.decreaseQuantity": "Sænk antal"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/en-US.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# available product} other {# available products}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# unavailable product} other {# unavailable products}}",
  "store/product-list.message.cantBeDelivered": "This product cannot be delivered to the address provided.",
  "store/product-list.message.noLongerAvailable": "This product is no longer available.",
  "store/product-list.message.remove": "remove",
  "store/product-list.quantity-selector.remove": "Remove",
  "store/product-list.quantity-label": "{quantity} unit(s)",
  "store/product-list.delete-button.default-label": "Remove Product",
  "store/product-list.priceChanged": "Changed",
  "store/product-list.priceOptions": "Price options",
  "store/product-list.changePrice": "Change Price",
  "store/product-list.revertToOriginal": "Revert to Original",
  "store/product-list.originalPrice": "Original price",
  "store/product-list.changeTo": "Change to",
  "store/product-list.manualPricePlaceholder": "Enter an amount",
  "store/product-list.applyManualPrice": "OK",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "This product is sold by fractions of {unitMultiplier}{measurementUnit}. That is why the entered quantity has been rounded to {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Product quantity",
  "store/product-list.quantityStepper.increaseQuantity": "Increase quantity",
  "store/product-list.quantityStepper.decreaseQuantity": "Decrease quantity"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/th.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "ต่อ {unitMultiplier} {measurementUnit}",
  "store/product-list.availableItems": "ผลิตภัณฑ์ที่พร้อม {quantity, plural, one {# รายการ} other {# รายการ}}",
  "store/product-list.unavailableItems": "ผลิตภัณฑ์ที่ไม่พร้อม {quantity, plural, one {# รายการ} other {# รายการ}}",
  "store/product-list.message.cantBeDelivered": "ไม่สามารถจัดส่งผลิตภัณฑ์นี้ไปยังที่อยู่ที่ให้มา",
  "store/product-list.message.noLongerAvailable": "ผลิตภัณฑ์นี้ไม่มีจำหน่ายแล้ว",
  "store/product-list.message.remove": "ลบออก",
  "store/product-list.quantity-selector.remove": "ลบออก",
  "store/product-list.quantity-label": "{quantity} หน่วย",
  "store/product-list.delete-button.default-label": "ลบผลิตภัณฑ์ออก",
  "store/product-list.priceChanged": "เปลี่ยนแปลงแล้ว",
  "store/product-list.priceOptions": "ตัวเลือกราคา",
  "store/product-list.changePrice": "เปลี่ยนราคา",
  "store/product-list.revertToOriginal": "เปลี่ยนกลับเป็นค่าเดิม",
  "store/product-list.originalPrice": "ราคาเดิม",
  "store/product-list.changeTo": "เปลี่ยนเป็น",
  "store/product-list.manualPricePlaceholder": "พิมพ์จำนวนเงิน",
  "store/product-list.applyManualPrice": "ตกลง",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "ผลิตภัณฑ์นี้ขายทีละ {unitMultiplier} {measurementUnit} ดังนั้นจำนวนที่ใส่จะถูกปัดเป็น {roundedValue} {measurementUnit}",
  "store/product-list.quantityStepper.label": "จำนวนผลิตภัณฑ์",
  "store/product-list.quantityStepper.increaseQuantity": "จำนวนเพิ่ม",
  "store/product-list.quantityStepper.decreaseQuantity": "จำนวนลด"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/sv.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tillgänglig produkt} other {# tillgängliga produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# otillgänglig produkt} other {# otillgängliga produkter}}",
  "store/product-list.message.cantBeDelivered": "Denna produkt kan inte levereras till den angivna adressen.",
  "store/product-list.message.noLongerAvailable": "Produkten är inte längre tillgänglig.",
  "store/product-list.message.remove": "ta bort",
  "store/product-list.quantity-selector.remove": "Ta bort",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Ta bort produkten",
  "store/product-list.priceChanged": "Förändrad",
  "store/product-list.priceOptions": "Prisalternativ",
  "store/product-list.changePrice": "Ändra priset",
  "store/product-list.revertToOriginal": "Återställ till original",
  "store/product-list.originalPrice": "Ordinarie pris",
  "store/product-list.changeTo": "Byt till",
  "store/product-list.manualPricePlaceholder": "Skriv in ett monetärt värde",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Denna produkt säljs med bråkdelar av {unitMultiplier}{measurementUnit}. Eftersom den insatta kvantiteten har avrundats till {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktkvantitet",
  "store/product-list.quantityStepper.increaseQuantity": "Öka kvantiteten",
  "store/product-list.quantityStepper.decreaseQuantity": "Minska kvantiteten"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/fi-FI.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# saatavilla oleva tuote} other {# saatavilla olevaa tuotetta}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# tuote ei saatavilla} other {# tuotetta ei saatavilla}}",
  "store/product-list.message.cantBeDelivered": "Tätä tuotetta ei voida toimittaa antamaasi osoitteeseen.",
  "store/product-list.message.noLongerAvailable": "Tätä tuotetta ei ole enää saatavilla.",
  "store/product-list.message.remove": "poista",
  "store/product-list.quantity-selector.remove": "Poista",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Poista tuote",
  "store/product-list.priceChanged": "Muutettu",
  "store/product-list.priceOptions": "Hinta-asetukset",
  "store/product-list.changePrice": "Muuta hintaa",
  "store/product-list.revertToOriginal": "Palauta alkuperäiseen",
  "store/product-list.originalPrice": "Alkuperäinen hinta",
  "store/product-list.changeTo": "Muuta täksi",
  "store/product-list.manualPricePlaceholder": "Kirjoita rahallinen arvo",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tätä tuotetta myydään {unitMultiplier}{measurementUnit} murto-osissa. Tämän vuoksi syötetty määrä on pyöristetty summaan {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Tuotemäärä",
  "store/product-list.quantityStepper.increaseQuantity": "Lisää määrää",
  "store/product-list.quantityStepper.decreaseQuantity": "Vähennä määrää"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/nn.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.message.cantBeDelivered": "Dette produktet kan ikke leveres til den oppgitte adressen.",
  "store/product-list.message.noLongerAvailable": "Produktet er ikke lenger tilgjengelig.",
  "store/product-list.message.remove": "fjern",
  "store/product-list.quantity-selector.remove": "Fjern",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Fjern produkt",
  "store/product-list.priceChanged": "Endret",
  "store/product-list.priceOptions": "Prisalternativer",
  "store/product-list.changePrice": "Endre pris",
  "store/product-list.revertToOriginal": "Gå tilbake til originalen",
  "store/product-list.originalPrice": "Opprinnelig pris",
  "store/product-list.changeTo": "Endre til",
  "store/product-list.manualPricePlaceholder": "Skriv inn en pengeverdi",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dette produktet selges i brøkdeler av {unitMultiplier}{measurementUnit}. Gitt at det innsatte antallet har blitt avrundet til {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktantall",
  "store/product-list.quantityStepper.increaseQuantity": "Øk antall",
  "store/product-list.quantityStepper.decreaseQuantity": "Reduser antall"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/es.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "por {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# producto disponible} other {# productos disponibles}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# producto no disponible} other {# productos no disponibles}}",
  "store/product-list.message.cantBeDelivered": "Este producto no se puede entregar en la dirección proporcionada.",
  "store/product-list.message.noLongerAvailable": "Este producto no está disponible actualmente.",
  "store/product-list.message.remove": "retirar",
  "store/product-list.quantity-selector.remove": "Retirar",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Eliminar Producto",
  "store/product-list.priceChanged": "Cambiado",
  "store/product-list.priceOptions": "Opciones",
  "store/product-list.changePrice": "Cambio de precio",
  "store/product-list.revertToOriginal": "Volver al original",
  "store/product-list.originalPrice": "Original precio",
  "store/product-list.changeTo": "Cambiar a",
  "store/product-list.manualPricePlaceholder": "Ingrese un valor monetario",
  "store/product-list.applyManualPrice": "Aplicar",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Este producto se vende por fracciones de {unitMultiplier}{measurementUnit}. Por lo tanto, la cantidad ingresada se ha redondeado a {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Cantidad de producto",
  "store/product-list.quantityStepper.increaseQuantity": "Aumentar la cantidad",
  "store/product-list.quantityStepper.decreaseQuantity": "Cantidad decreciente"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/messages/ar.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "لكل {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# منتج متاح} other {# منتجات متاحة}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# منتج غير متاح} other {# منتجات غير متاحة}}",
  "store/product-list.message.cantBeDelivered": "لا يمكن توصيل هذا المنتج إلى العنوان المقدم.",
  "store/product-list.message.noLongerAvailable": "هذا المنتج لم يعد متاحًا.",
  "store/product-list.message.remove": "حذف",
  "store/product-list.quantity-selector.remove": "حذف",
  "store/product-list.quantity-label": "{quantity}.",
  "store/product-list.delete-button.default-label": "حذف منتج",
  "store/product-list.priceChanged": "تبديل",
  "store/product-list.priceOptions": "خيارات السعر",
  "store/product-list.changePrice": "تغيير السعر",
  "store/product-list.revertToOriginal": "تحويل إلى الأصلي",
  "store/product-list.originalPrice": "السعر الأصلي",
  "store/product-list.changeTo": "تغيير إلى",
  "store/product-list.manualPricePlaceholder": "اكتب قيمة نقدية",
  "store/product-list.applyManualPrice": "موافق",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "يُباع هذا المنتج بأجزاء من {unitMultiplier}{measurementUnit}. بالنظر إلى ذلك، تم تقريب الكمية المدرجة إلى {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "كمية المنتج",
  "store/product-list.quantityStepper.increaseQuantity": "زيادة الكمية",
  "store/product-list.quantityStepper.decreaseQuantity": "إنقاص الكمية"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/docs/README.md from the product-list VTEX app.

[Assistant]
Here's the implementation:

```markdown

📢 Use this project, [contribute](https://github.com/vtex-apps/product-list) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Product List

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

The Product List component displays all items in the user's cart and informs users when items are unavailable.

> ⚠ Currently, the Product List only works with [Minicart v2](https://developers.vtex.com/docs/apps/vtex.minicart/).

![product-list image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-list-0.png)

## Configuration

1. Add the Product List app to your theme dependencies in `manifest.json`. For example:

```json
  "dependencies": {
    "vtex.product-list": "0.x"
  }
```

2. Add the `product-list` block to the `minicart-product-list` block (exported by the Minicart app). For example:

```json
  "minicart-product-list#example": {
    "blocks": ["product-list"]
  }
```

Once you have added the `product-list` to the `minicart-product-list`, no further actions are required, as the block works with a default implementation behind the scenes. This means that the Product List component is ready to be rendered.

### Advanced configuration

Currently, the `product-list` default implementation is the following:

```json
{
  "product-list": {
    "blocks": [
        "product-list-content-desktop",
        "product-list-content-mobile"
    ]
  },
  "product-list-content-desktop": {
    "children": ["flex-layout.row#list-row.desktop"]
  },
  "flex-layout.row#list-row.desktop": {
    "children": [
      "flex-layout.col#image.desktop",
      "flex-layout.col#main-container.desktop"
    ],
    "props": {
      "fullWidth": true,
      "paddingBottom": "7",
      "paddingTop": "6",
      "colSizing": "auto",
      "preserveLayoutOnMobile": "true"
    }
  },
  "flex-layout.col#image.desktop": {
    "children": ["product-list-image"],
    "props": {
      "marginRight": "6"
    }
  },
  "flex-layout.col#main-container.desktop": {
    "children": [
      "flex-layout.row#sub-container.desktop",
      "flex-layout.row#message.desktop"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#sub-container.desktop": {
    "children": [
      "flex-layout.col#product-description",
      "flex-layout.col#quantity.desktop",
      "flex-layout.row#price-remove"
    ],
    "props": {
      "preserveLayoutOnMobile": "true",
      "colSizing": "auto"
    }
  },
  "flex-layout.col#quantity.desktop": {
    "children": [
      "flex-layout.row#quantity-selector.desktop",
      "flex-layout.row#unit-price.desktop"
    ],
    "props": {
      "marginLeft": "8"
    }
  },
  "flex-layout.row#price-remove": {
    "children": [
      "flex-layout.col#price.desktop",
      "flex-layout.col#remove-button.desktop"
    ],
    "props": {
      "colSizing": "auto"
    }
  },
  "flex-layout.row#quantity-selector.desktop": {
    "children": ["quantity-selector"],
    "props": {
      "preventHorizontalStretch": "true"
    }
  },
  "flex-layout.row#unit-price.desktop": {
    "children": ["unit-price#desktop"],
    "props": {
      "marginTop": "3",
      "preventHorizontalStretch": "true"
    }
  },
  "unit-price#desktop": {
    "props": {
      "textAlign": "center"
    }
  },
  "flex-layout.col#price.desktop": {
    "children": ["price#desktop"],
    "props": {
      "blockClass": "priceWrapper",
      "marginLeft": "6",
      "preventHorizontalStretch": "true",
      "verticalAlign": "middle"
    }
  },
  "price#desktop": {
    "props": {
      "textAlign": "right"
    }
  },
  "flex-layout.col#remove-button.desktop": {
    "children": ["remove-button"],
    "props": {
      "marginLeft": "6",
      "verticalAlign": "middle"
    }
  },
  "flex-layout.row#message.desktop": {
    "children": ["message#desktop"],
    "props": {
      "marginTop": "4"
    }
  },
  "message#desktop": {
    "props": {
      "layout": "cols"
    }
  },
  "product-list-content-mobile": {
    "children": ["flex-layout.row#list-row.mobile"]
  },
  "flex-layout.row#list-row.mobile": {
    "children": [
      "flex-layout.col#image.mobile",
      "flex-layout.col#main-container.mobile"
    ],
    "props": {
      "fullWidth": true,
      "paddingBottom": "6",
      "paddingTop": "5",
      "colSizing": "auto",
      "preserveLayoutOnMobile": "true"
    }
  },
  "flex-layout.col#image.mobile": {
    "children": ["product-list-image"],
    "props": {
      "marginRight": "5"
    }
  },
  "flex-layout.col#main-container.mobile": {
    "children": [
      "flex-layout.row#top.mobile",
      "flex-layout.row#quantity-selector.mobile",
      "flex-layout.row#unit-price.mobile",
      "flex-layout.row#price.mobile",
      "flex-layout.row#message.mobile"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#top.mobile": {
    "children": [
      "flex-layout.col#product-description",
      "flex-layout.col#remove-button.mobile"
    ],
    "props": {
      "colSizing": "auto",
      "preserveLayoutOnMobile": "true"
    }
  },
  "flex-layout.row#quantity-selector.mobile": {
    "children": ["quantity-selector"],
    "props": {
      "marginTop": "5",
      "preventHorizontalStretch": "true"
    }
  },
  "flex-layout.row#unit-price.mobile": {
    "children": ["unit-price"],
    "props": {
      "marginTop": "3"
    }
  },
  "flex-layout.row#price.mobile": {
    "children": ["price#mobile"],
    "props": {
      "marginTop": "5",
      "preventHorizontalStretch": "true"
    }
  },
  "price#mobile": {
    "props": {
      "textAlign": "left"
    }
  },
  "flex-layout.col#remove-button.mobile": {
    "children": ["remove-button"],
    "props": {
      "marginLeft": "3"
    }
  },
  "flex-layout.row#message.mobile": {
    "children": ["message#mobile"],
    "props": {
      "marginTop": "3"
    }
  },
  "message#mobile": {
    "props": {
      "layout": "rows"
    }
  }
}
```

The default implementation means that whenever you declare the `product-list` block in your store, you are actually telling your theme to render the above `json` behind the scenes.

In order to customize the `product-list` configuration, copy the code above, paste it, and change it as you wish.

| Block name                     | Description                                                                                |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `product-list`                 | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Top level block that must be declared in the `minicart-product-list` block to render a default detailed list with all products added to the shopping cart. |
| `product-list-content-desktop` | Creates the product list layout for desktop devices.                                                                                |
| `product-list-content-mobile`  | Creates the product list layout for mobile devices.                                                                                |
| `message`                      | Renders a message about the product availability.                                                                                |
| `product-name`                 | Renders the product names.                                                                                |
| `product-reference`            | Renders the product reference information.                                                                                |
| `price`                        | Renders the product prices.                                                                                |
| `unit-price`                   | Renders the price for each unit of the product added to the cart.                                                                                |
| `product-list-image`           | Renders the product images.                                                                                |
| `product-brand`                | Renders the product brands.                                                                                |
| `product-variations`           | Renders the product variations.                                                                                |
| `product-quantity-label`       | Renders a product label that displays the number of items added to the cart.                                                                                |
| `quantity-selector`            | Renders a selector that allows users to choose how many units of a product they want to add to the cart.                                                                                |
| `remove-button`                | Renders a button that allows users to remove a product from the list.                                                                                |

### `minicart-product-list` props

| Prop name | Type   | Description                                                                                | Default value |
| --------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `splitItem`  | `boolean` | Determines whether products with attachments should be split and treated as individual items (`true`) or as a single item (`false`) when their quantity is increased in the minicart. | `false`        |

### `product-list` props

| Prop name          | Type     | Description                                                                                | Default value |
| ------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `itemCountMode`    | `enum`   | Quantity badge behavior when displaying the total number of items added in Minicart. Possible values are: `total` (the quantity badge displays the number of items added to the cart), `distinct` (the quantity badge only displays the number of different products added to the cart), `totalAvailable` (the quantity badge displays the number of available items added to the cart), and `distinctAvailable` (the quantity badge only displays the number of different and available products added to the cart). | `distinct`    |
| `lazyRenderHeight` | `number` | The height (px) of each item loading element.                                                                                | `100`         |
| `lazyRenderOffset` | `number` | The distance (px) that each item should be from the viewport at the time of its rendering.                                                                                | `300`         |

### `message` props

| Prop name | Type   | Description                                                                                | Default value |
| --------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `layout`  | `enum` | Position of the availability message in the list. Possible values are: `rows` (displaying the message in the product row) or `cols` (displaying the message in the product column). | `cols`        |

### `price` props

| Prop name       | Type      | Description                                                                        | Default value |
| --------------- | --------- | ---------------------------------------------------------------------------------- | ------------- |
| `textAlign`     | `string`  | Position of the product's price in the list.                                       | `left`        |
| `showListPrice` | `boolean` | Whether the product prices should be displayed in the list: (`true`) or (`false`). | `true`        |

### `unit-price` props

| Prop name              | Type     | Description                                                                                | Default value |
| ---------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `textAlign`            | `string` | Position of the product's unit price in the list.                                                                                | `left`        |
| `unitPriceType`        | `enum`   | Defines whether the price type should be displayed. Possible values are: `sellingPrice` or `price`                                                                                | `price`       |
| `unitPriceDisplay`     | `enum`   | Defines when the unit price should be displayed. Possible values are: `always` (unit price is always displayed) or `default` (unit price is only displayed when the number of products is greater than one).                       | `default`     |
| `displayUnitListPrice` | `enum`   | Defines whether the product list price should be displayed. Possible values are: `showWhenDifferent` (the list price is displayed when it is different from the regular price), and `notShow` (the list price is never displayed). | `notShow`     |

### `product-list-image` props

| Prop name | Type     | Description                      | Default value |
| --------- | -------- | -------------------------------- | ------------- |
| `width`   | `number` | Product image width (in pixels). | `96`          |

### `product-reference` props

|     Prop name     |   Type   |                                                                                Description                                                                                |    Default value     |
|:-----------------:|:--------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------:|
| `identifierLabel` | `string` |                                                        Text label to be displayed to the left of the product reference value.                                                        |     `undefined`      |
| `identifyOption`  |  `enum`  | Desired product reference data, i.e., product identifier, to be displayed. Possible options are: `ProductId`, `ProductSkuItemId`, `ProductReferenceId`, and `ProductSkuReferenceId`. | `ProductReferenceId` |

### `remove-button` props

| Prop name     | Type   | Description                                                                                | Default value |
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `variation`   | `enum` | Variation for the button's visual prominence based on the [VTEX Styleguide](https://styleguide.vtex.com/#/Components/Forms/Button). Possible values are: `primary`, `secondary`, `tertiary`, `inverted-tertiary`, `danger`, and `danger-tertiary`.                                                                                | `danger`      |
| `displayMode` | `enum` | Defines how the remove button should be displayed. Possible values are: `icon-button` (renders an icon button), and `text-button` (renders a text message button). If you want to [create a modal in the remove button](https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-modals-using-icons), use the `icon-button` value. | `icon-button` |

### `quantity-selector` props

| Prop name              | Type   | Description                                                                                | Default value    |
| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| `mode`                 | `enum` | Type of quantity selector input. Possible values are `default`, and `stepper`. In the default mode, the quantity stepper will initially render a dropdown component, and after the quantity exceeds 10, it will switch to an input. The stepper mode will always render a numeric stepper component. | `default`        |
| `quantitySelectorStep` | `enum` | Defines how the number of products that have unitMultiplier will work. Possible values are: `singleUnit` (the quantity will be not affected with the unitMultiplier), and `unitMultiplier` (the quantity will be affected with the unitMultiplier).                                                  | `unitMultiplier` |

## Customization

To apply CSS customizations to this and other blocks, follow the instructions in [Using CSS Handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles                          |
| ------------------------------------ |
| `availabilityMessageContainer`       |
| `availabilityMessageTextContainer`   |
| `availabilityMessageText`            |
| `productBrandName`                   |
| `productImageAnchor`                 |
| `productImageContainer`              |
| `productImage`                       |
| `productListAvailableItemsMessage`   |
| `productListItem`                    |
| `productListUnavailableItemsMessage` |
| `productName`                        |
| `productPriceContainer`              |
| `productPriceCurrency`               |
| `productPrice`                       |
| `productQuantityLabel`               |
| `productIdentifier`                  |
| `productIdentifierValue`             |
| `productIdentifierLabelValue`        |
| `productVariationsContainer`         |
| `productVariationsItem`              |
| `quantityDropdownContainer`          |
| `quantityDropdownMobileContainer`    |
| `quantityInputContainer`             |
| `quantityInputMobileContainer`       |
| `quantitySelectorContainer`          |
| `quantitySelectorWrapper`            |
| `quantitySelectorButton`             |
| `quantitySelectorDecrease`           |
| `quantitySelectorIncrease`           |
| `removeButtonContainer`              |
| `item`                               |
| `removeButton`                       |
| `unitPriceContainer`                 |
| `unitListPrice`                      |
| `unitPriceMeasurementUnit`           |
| `unitPricePerUnitCurrency`           |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/ProductList.tsx from the product-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ReactNode } from 'react'
import React, { useMemo, memo } from 'react'
import { FormattedMessage } from 'react-intl'
import type { Item } from 'vtex.checkout-graphql'
import { useCssHandles } from 'vtex.css-handles'

import { ItemContextProvider } from './ItemContext'
import { AVAILABLE } from './constants/Availability'
import { CALL_CENTER_OPERATOR } from './constants/User'
import LazyRender from './LazyRender'

type TotalItemsType =
  | 'total'
  | 'distinct'
  | 'totalAvailable'
  | 'distinctAvailable'

interface Props {
  allowManualPrice?: boolean
  items: ItemWithIndex[]
  loading: boolean
  userType?: string
  itemCountMode?: TotalItemsType
  onQuantityChange: (
    uniqueId: string,
    value: number,
    item?: ItemWithIndex
  ) => void
  onRemove: (uniqueId: string, item?: ItemWithIndex) => void
  onSetManualPrice?: (price: number, itemIndex: number) => void
  lazyRenderHeight?: number
  lazyRenderOffset?: number
  children: ReactNode
}

interface ItemWithIndex extends Item {
  index: number
}

const CSS_HANDLES = [
  'productListItem',
  'productListUnavailableItemsMessage',
  'productListAvailableItemsMessage',
] as const

interface ItemWrapperProps
  extends Pick<Props, 'onQuantityChange' | 'onRemove'> {
  item: ItemWithIndex
  itemIndex: number
  loading: boolean
  children: ReactNode
  shouldAllowManualPrice: boolean
  onSetManualPrice?: (price: number, itemIndex: number) => void
  lazyRenderHeight?: number
  lazyRenderOffset?: number
}

const ItemContextWrapper = memo<ItemWrapperProps>(function ItemContextWrapper({
  item,
  itemIndex,
  loading,
  onQuantityChange,
  onRemove,
  children,
  shouldAllowManualPrice,
  onSetManualPrice,
  lazyRenderHeight,
  lazyRenderOffset,
}) {
  const context = useMemo(
    () => ({
      item,
      itemIndex,
      loading,
      shouldAllowManualPrice,
      onQuantityChange: (value: number) =>
        onQuantityChange(item.uniqueId, value, item),
      onRemove: () => onRemove(item.uniqueId, item),
      onSetManualPrice: (price: number, index: number) =>
        onSetManualPrice?.(price, index),
    }),
    [
      item,
      itemIndex,
      loading,
      onQuantityChange,
      onRemove,
      onSetManualPrice,
      shouldAllowManualPrice,
    ]
  )

  return (
    <LazyRender height={lazyRenderHeight} offset={lazyRenderOffset}>
      <ItemContextProvider value={context}>{children}</ItemContextProvider>
    </LazyRender>
  )
})

const countCartItems = (countMode: TotalItemsType, arr: Item[]) => {
  if (countMode === 'distinctAvailable') {
    return arr.reduce((itemQuantity: number, item: Item) => {
      if (item.availability === 'available') {
        return itemQuantity + 1
      }

      return itemQuantity
    }, 0)
  }

  if (countMode === 'totalAvailable') {
    return arr.reduce((itemQuantity: number, item: Item) => {
      if (item.availability === 'available') {
        return itemQuantity + Number(item.quantity)
      }

      return itemQuantity
    }, 0)
  }

  if (countMode === 'total') {
    return arr.reduce((itemQuantity: number, item: Item) => {
      return itemQuantity + Number(item.quantity)
    }, 0)
  }

  // countMode === 'distinct'
  return arr.length
}

const ProductList = memo<Props>(function ProductList(props) {
  const {
    items,
    itemCountMode = 'distinct',
    lazyRenderHeight = 100,
    lazyRenderOffset = 300,
    userType = 'STORE_USER',
    allowManualPrice = false,
    children,
  } = props

  const shouldAllowManualPrice =
    allowManualPrice && userType === CALL_CENTER_OPERATOR

  const handles = useCssHandles(CSS_HANDLES)

  const [availableItems, unavailableItems] = items
    .map((item, index) => ({ ...item, index }))
    .reduce<ItemWithIndex[][]>(
      (acc, item) => {
        acc[item.availability === AVAILABLE ? 0 : 1].push(item)

        return acc
      },
      [[], []]
    )

  return (
    /* Replacing the outer div by a Fragment may break the layout. See PR #39. */
    <div>
      {unavailableItems.length > 0 ? (
        <div
          id="unavailable-items"
          className={`${handles.productListUnavailableItemsMessage} c-muted-1 bb b--muted-4 fw5 pv5 pl5 pl6-m pl0-l t-heading-5-l`}
        >
          <FormattedMessage
            id="store/product-list.unavailableItems"
            values={{
              quantity: countCartItems(itemCountMode, unavailableItems),
            }}
          />
        </div>
      ) : null}
      {unavailableItems.map((item) => {
        return (
          <ItemContextWrapper
            key={`${item.uniqueId}-${item.sellingPrice}-${item.index}`}
            item={item}
            itemIndex={item.index}
            shouldAllowManualPrice={shouldAllowManualPrice}
            {...props}
            lazyRenderHeight={lazyRenderHeight}
            lazyRenderOffset={lazyRenderOffset}
          >
            {children}
          </ItemContextWrapper>
        )
      })}
      {unavailableItems.length > 0 && availableItems.length > 0 ? (
        <div
          className={`${handles.productListAvailableItemsMessage} c-muted-1 bb b--muted-4 fw5 mt7 pv5 pl5 pl6-m pl0-l t-heading-5-l`}
        >
          <FormattedMessage
            id="store/product-list.availableItems"
            values={{
              quantity: countCartItems(itemCountMode, availableItems),
            }}
          />
        </div>
      ) : null}
      {availableItems.map((item) => {
        return (
          <ItemContextWrapper
            key={`${item.uniqueId}-${item.sellingPrice}-${item.index}`}
            item={item}
            itemIndex={item.index}
            shouldAllowManualPrice={shouldAllowManualPrice}
            {...props}
            lazyRenderHeight={lazyRenderHeight}
            lazyRenderOffset={lazyRenderOffset}
          >
            {children}
          </ItemContextWrapper>
        )
      })}
    </div>
  )
})

export default ProductList

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/ProductQuantityLabel.tsx from the product-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useItemContext } from './ItemContext'

const CSS_HANDLES = ['productQuantityLabel'] as const

const ProductQuantityLabel: React.FC = () => {
  const { item } = useItemContext()
  const cssHandles = useCssHandles(CSS_HANDLES)

  return (
    <span className={`${cssHandles.productQuantityLabel} c-muted-1 t-body`}>
      <FormattedMessage
        id="store/product-list.quantity-label"
        values={{ quantity: item.quantity }}
      />
    </span>
  )
}

export default ProductQuantityLabel

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/styles.css from the product-list VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (max-width: 39.9em) {
  .quantitySelector {
    width: 4.4rem;
  }
}

@media screen and (min-width: 40em) {
  .price {
    width: 7.25rem;
  }
  .quantity {
    max-width: 7.25rem;
  }
}

.quantity :global(.vtex-input) input {
  flex-shrink: 1;
  min-width: 0;
}

.unitPrice {
  max-width: 100%;
}

.quantityStepper {
  max-width: none;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/ProductListWrapper.tsx from the product-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { SizeMe } from 'react-sizeme'
import type { Item } from 'vtex.checkout-graphql'
import { ExtensionPoint, useChildBlock } from 'vtex.render-runtime'
import { useDevice } from 'vtex.device-detector'
import { OrderForm } from 'vtex.order-manager'

const { useOrderForm } = OrderForm

const MAX_MOBILE_WIDTH = 640

interface Props {
  items: Item[]
  onQuantityChange: (uniqueId: string, value: number) => void
  onRemove: (uniqueId: string) => void
}

const ProductListWrapper: React.FC<Props> = (props) => {
  const { loading } = useOrderForm()
  const { device } = useDevice()
  const hasMobileContent = Boolean(
    useChildBlock({ id: 'product-list-content-mobile' })
  )

  const hasDesktopContent = Boolean(
    useChildBlock({ id: 'product-list-content-desktop' })
  )

  if (!hasMobileContent) {
    return <ExtensionPoint id="product-list-content-desktop" {...props} />
  }

  if (!hasDesktopContent) {
    return <ExtensionPoint id="product-list-content-mobile" {...props} />
  }

  return (
    <SizeMe noPlaceholder>
      {({ size }) =>
        (loading && device === 'phone') ||
        (size.width && size.width < MAX_MOBILE_WIDTH) ? (
          <ExtensionPoint id="product-list-content-mobile" {...props} />
        ) : (
          <ExtensionPoint id="product-list-content-desktop" {...props} />
        )
      }
    </SizeMe>
  )
}

export default ProductListWrapper

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/ProductBrand.tsx from the product-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import { Loading } from 'vtex.render-runtime'
import { useCssHandles } from 'vtex.css-handles'

import { useItemContext } from './ItemContext'
import { opaque } from './utils/opaque'

const CSS_HANDLES = ['productBrandName'] as const

const ProductBrand: FunctionComponent = () => {
  const { item, loading } = useItemContext()
  const handles = useCssHandles(CSS_HANDLES)

  if (loading) {
    return <Loading />
  }

  return (
    <div
      id={`brand-name-${item.id}`}
      className={`ttu f7 fw6 c-muted-1 fw5-m ${
        handles.productBrandName
      } ${opaque(item.availability)}`}
    >
      {item.additionalInfo?.brandName}
    </div>
  )
}

export default ProductBrand

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of product-list/react/QuantitySelector.tsx from the product-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { VFC } from 'react'
import React from 'react'
import classnames from 'classnames'
import { Loading } from 'vtex.render-runtime'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'

import Selector from './components/QuantitySelector'
import QuantityStepper from './components/QuantityStepper'
import { useItemContext } from './ItemContext'
import { AVAILABLE, CANNOT_BE_DELIVERED } from './constants/Availability'
import { opaque } from './utils/opaque'
import styles from './styles.css'

const MAX_ITEM_QUANTITY = 99999
const CSS_HANDLES = ['quantitySelectorContainer'] as const

type QuantitySelectorMode = 'default' | 'stepper'
export type QuantitySelectorStepType = 'unitMultiplier' | 'singleUnit'

interface Props {
  mode?: QuantitySelectorMode
  quantitySelectorStep?: QuantitySelectorStepType
}

const enabledSelectorAvailability = [AVAILABLE, CANNOT_BE_DELIVERED]

function shouldDisableSelector(availability: string | null | undefined) {
  return !enabledSelectorAvailability.includes(availability ?? '')
}

const QuantitySelector: VFC<Props> = ({
  mode = 'default',
  quantitySelectorStep = 'unitMultiplier',
}) => {
  const { item, loading, onQuantityChange } = useItemContext()
  const handles = useCssHandles(CSS_HANDLES)

  if (loading) {
    return <Loading />
  }

  const unitMultiplier =
    quantitySelectorStep === 'singleUnit' ? 1 : item.unitMultiplier ?? undefined

  if (mode === 'stepper') {
    return (
      <div
        className={classnames(
          opaque(item.availability),
          handles.quantitySelectorContainer,
          styles.quantity,
          styles.quantityStepper,
          applyModifiers(
            styles.quantitySelector,
            item.sellingPrice === 0 ? 'gift' : ''
          )
        )}
      >
        <QuantityStepper
          id={item.id}
          value={item.quantity}
          maxValue={MAX_ITEM_QUANTITY}
          onChange={onQuantityChange}
          unitMultiplier={unitMultiplier}
          disabled={shouldDisableSelector(item.availability)}
          measurementUnit={item.measurementUnit ?? undefined}
        />
      </div>
    )
  }

  return (
    <div
      className={classnames(
        opaque(item.availability),
        handles.quantitySelectorContainer,
        styles.quantity,
        styles.quantitySelector,
        applyModifiers(
          styles.quantitySelector,
          item.sellingPrice === 0 ? 'gift' : ''
        )
      )}
    >
      <Selector
        id={item.id}
        value={item.quantity}
        maxValue={MAX_ITEM_QUANTITY}
        onChange={onQuantityChange}
        disabled={shouldDisableSelector(item.availability)}
        unitMultiplier={unitMultiplier}
        measurementUnit={item.measurementUnit ?? undefined}
      />
    </div>
  )
}

export default QuantitySelector

```