diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Modal.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Modal.jsx new file mode 100644 index 0000000000..b4947e9ac0 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Modal.jsx @@ -0,0 +1,46 @@ +import {render} from 'preact'; + +export default async () => { + render(, document.body); +}; + +function Extension() { + const {i18n} = shopify; + // [START localization.format-points] + const percentageDiscount = 25.5; + const formattedPercentageDiscount = i18n.formatNumber(percentageDiscount); + // [END localization.format-points] + // [START localization.format-balance] + const fixedDiscountAmount = 10; + const formattedFixedDiscountAmount = i18n.formatCurrency(fixedDiscountAmount, {currency: 'CAD'}); + // [END localization.format-balance] + // [START localization.translate-points] + const itemCount = shopify.cart.current.value.lineItems.length; + // [END localization.translate-points] + const onButtonClick = (type, title, amount) => { + shopify.cart.applyCartDiscount(type, title, amount); + // [START localization.translate-balance] + shopify.toast.show(i18n.translate('discountApplied')); + // [END localization.translate-balance] + }; + + return ( + // [START localization.build-ui] + + + + + {i18n.translate('itemCount', {count: itemCount})} + + onButtonClick('Percentage', '25% off', '25')}> + {formattedPercentageDiscount}% + + onButtonClick('FixedAmount', '$10 off', '10')}> + {formattedFixedDiscountAmount} + + + + + ); +} +// [END localization.build-ui] \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Tile.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Tile.jsx new file mode 100644 index 0000000000..1248da0b83 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Tile.jsx @@ -0,0 +1,32 @@ +import {render} from 'preact'; +import {useState, useEffect} from 'preact/hooks'; + +export default async () => { + render(, document.body); +} + +function Extension() { + const {i18n} = shopify; + + const shouldDisable = (subtotal) => { + return Number(subtotal) <= 100; + }; + + const [disabled, setDisabled] = useState(shouldDisable(shopify.cart.current.value.subtotal)); + + useEffect(() => { + const unsubscribe = shopify.cart.current.subscribe((cart) => { + setDisabled(shouldDisable(cart.subtotal)); + }); + return unsubscribe; + }, []); + + return ( + shopify.action.presentModal()} + disabled={disabled} + /> + ); +} \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/en.default.json b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/en.default.json new file mode 100644 index 0000000000..bffb0c8d41 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/en.default.json @@ -0,0 +1,11 @@ +{ + "name": "Discount", + "itemCount": { + "zero": "No items in cart", + "one": "{{count}} item in cart", + "other": "{{count}} items in cart" + }, + "availableDiscounts": "View discount options", + "discountApplied": "Discount applied!", + "modalTitle": "Choose a discount" +} \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/fr.json b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/fr.json new file mode 100644 index 0000000000..2a1a22b223 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/fr.json @@ -0,0 +1,11 @@ +{ + "name": "Réduction", + "itemCount": { + "zero": "Aucun article dans le panier", + "one": "{{count}} article dans le panier", + "other": "{{count}} articles dans le panier" + }, + "availableDiscounts": "Voir les options de réduction", + "discountApplied": "Réduction appliquée!", + "modalTitle": "Choisir une réduction" +} \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/shopify.extension.toml b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/shopify.extension.toml new file mode 100644 index 0000000000..a583666999 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/shopify.extension.toml @@ -0,0 +1,21 @@ +api_version = "2025-10" + +[[extensions]] +type = "ui_extension" +# Change the merchant-facing name of the extension in locales/en.default.json +name = "t:name" +uid = "11fd348b-1de3-4793-6892-baa416fc3df29b4377b5" +handle = "discount" +description = "Add discount" + +# module: file that contains your extension’s source code +# target: location where your extension appears in POS +# [START config.setup-targets] +[[extensions.targeting]] +module = "./src/Tile.jsx" +target = "pos.home.tile.render" + +[[extensions.targeting]] +module = "./src/Modal.jsx" +target = "pos.home.modal.render" +# [END config.setup-targets]