Skip to content

Update the Checkout UI Extension example to use cart metafields instead of cart attributes #355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SaifBenChahed wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update the Checkout UI Extension example to use cart metafields instead of cart attributes #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion checkout-extension/locales/en.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"welcome": "Welcome to the {{target}} extension!",
"iWouldLikeAFreeGiftWithMyOrder": "I would like to receive a free gift with my order",
"addAFreeGiftToMyOrder": "Add a free gift to my order",
"attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout"
"attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout",
"metafieldChangesAreNotSupported": "Cart metafield changes are not supported in this checkout"
}
3 changes: 2 additions & 1 deletion checkout-extension/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"welcome": "Bienvenue dans l'extension {{target}}!",
"iWouldLikeAFreeGiftWithMyOrder": "Je souhaite recevoir un cadeau gratuit avec ma commande",
"addAFreeGiftToMyOrder": "Ajouter un cadeau gratuit à ma commande",
"attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande"
"attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande",
"metafieldChangesAreNotSupported": "Les modifications de métachamps de panier ne sont pas prises en charge dans cette commande"
}
6 changes: 6 additions & 0 deletions checkout-extension/shopify.extension.toml.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,18 @@ api_access = true
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#metafields

{%- if flavor contains "preact" %}
[[extensions.metafields]]
namespace = "$app"
key = "requestedFreeGift"
{%- else %}
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_key"
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_other_key"
{%- endif %}

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
Expand Down
37 changes: 23 additions & 14 deletions checkout-extension/src/Checkout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@ export default async () => {
};

function Extension() {
// 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
if (!shopify.instructions.value.attributes.canUpdateAttributes) {
// For checkouts such as draft order invoices, cart attributes may not be allowed
// Consider rendering a fallback UI or nothing at all, if the feature is unavailable
// 2. Check instructions for feature availability
if (!shopify.instructions.value.metafields.canSetCartMetafields) {
return (
<s-banner heading="{{ name }}" tone="warning">
{shopify.i18n.translate("attributeChangesAreNotSupported")}
{shopify.i18n.translate("metafieldChangesAreNotSupported")}
</s-banner>
);
}

const freeGiftRequested = shopify.appMetafields.value.find(
(appMetafield) => appMetafield.target.type === 'cart' && appMetafield.metafield.namespace === "$app" && appMetafield.metafield.key === "requestedFreeGift"
);

// 3. Render a UI
return (
<s-banner heading="{{ name }}">
Expand All @@ -28,21 +30,28 @@ function Extension() {
target: <s-text type="emphasis">{shopify.extension.target}</s-text>,
})}
</s-text>
<s-button onClick={handleClick}>
{shopify.i18n.translate("addAFreeGiftToMyOrder")}
</s-button>
<s-checkbox
checked={freeGiftRequested?.metafield?.value === "true"}
onChange={onCheckboxChange}
label={shopify.i18n.translate("iWouldLikeAFreeGiftWithMyOrder")}
/>
</s-stack>
</s-banner>
);

async function handleClick() {
async function onCheckboxChange(event) {
const isChecked = event.target.checked;
// 4. Call the API to modify checkout
const result = await shopify.applyAttributeChange({
key: "requestedFreeGift",
type: "updateAttribute",
value: "yes",
const result = await shopify.applyMetafieldChange({
type: "updateCartMetafield",
metafield: {
namespace: "$app",
key: "requestedFreeGift",
value: isChecked ? "true" : "false",
type: "boolean",
},
});
console.log("applyAttributeChange result", result);
console.log("applyMetafieldChange result", result);
}
}
{%- elsif flavor contains "react" -%}
Expand Down