For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
I've been going through the tutorial for 'Building a Discount Experience' (https://shopify.dev/docs/apps/selling-strategies/discounts/experience/ui) and in the Admin UI section, it shows how to make the New route and functionality but when it comes to the details and therefore view/update route it literally says this:
This tutorial doesn't cover the creation of the details UI defined here. To enable app users to edit your discount, you must also create this route at app/routes/app.volume-discount.$functionId.$id.jsx.
I've built the route jsx file no problem but does anybody know how with the id, I can populate the information from the discount code in my app? Many thanks!
Solved! Go to the solution
This is an accepted solution.
I sorted it out. The trick is to use the discount if that’s part of the url to fire a graphQL query to get the appropriate discount info.
let me know if you need more assistance.
I have same issue, Can anyone please help?
This is an accepted solution.
I sorted it out. The trick is to use the discount if that’s part of the url to fire a graphQL query to get the appropriate discount info.
let me know if you need more assistance.
Would you mind sharing your code for the app/routes/app.volume-discount.$functionId.$id.jsx. The sample code for it in guthub seems to be out of date.
Because of my use case things are a bit different but I have a function in my shopify.server that fires off in the app_index loader function. You'll probably just want to change this to do a discountNode query instead of discountNodes and then pass in the Discount ID that you get from the request in the app. But yeah, the short of it is make a separate getter function that fires in the loader function that will grab the discount node based on the ID in the request. Hope that helps, code below.
export async function GetDiscountGroups(shop, token, id) {
const storeName = shop;
const accessToken = token;
const url = `https://${storeName}/admin/api/2023-10/graphql.json`;
const graphqlQuery = `{
discountNodes(
first: 1
query: "title:"'My Discount'"
) {
nodes {
id
metafields(first: 7) {
nodes {
id
value
key
}
}
}
edges {
node {
discount {
... on DiscountAutomaticApp {
title
combinesWith {
orderDiscounts
productDiscounts
shippingDiscounts
}
}
}
}
}
}
}
`;
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Shopify-Access-Token": accessToken,
},
body: JSON.stringify({ query: graphqlQuery }),
});
if (!response.ok) {
throw new Error(`HTTP error! Status: token: ${token} ${response.status}`);
}
const data = await response.json();
console.log(data);
return data; // Return the data
} catch (error) {
throw error; // Re-throw the error to be caught by the calling code
}
}
Thanks so much 👍
The example for "edit discount" is available at github. Please see:
https://github.com/Shopify/function-examples/blob/main/sample-apps/discounts/app/routes/app.volume-d...