Solved

Details UI for Discount Experience w/Shopify Functions

cmoriarty83
Shopify Partner
7 2 2

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:

 

Note

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!

Accepted Solution (1)
cmoriarty83
Shopify Partner
7 2 2

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. 

View solution in original post

Replies 6 (6)

agandhicb
Shopify Partner
10 1 0

I have same issue, Can anyone please help?

cmoriarty83
Shopify Partner
7 2 2

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. 

mrsilver123
Shopify Partner
12 0 0

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.

 

cmoriarty83
Shopify Partner
7 2 2

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

}

}
mrsilver123
Shopify Partner
12 0 0

Thanks so much 👍

Stephen2020
Shopify Partner
19 2 6

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...