This topic was automatically generated from Slack. You can find the original thread here.
how do I see the code for a pipedream component so i can adapt it to add anew feature? (via sending the code to GPT)
To see the code for a Pipedream component and adapt it to add a new feature, you can follow these steps: 1. Access the Pipedream GitHub Repository: Pipedream maintains a source-available component registry on GitHub. You can find the code for all Pipedream components there. 2. Find the Specific Component: Navigate to the specific component you want to adapt. For example, if you are looking for the Chat action component, you can find it in the repository. 3. Clone or Download the Repository: You can clone the repository to your local machine using Git or download the specific file you need. 4. Modify the Code: Once you have the code, you can modify it to add the new feature you want. You can use an IDE or text editor to make your changes. 5. Send the Code to GPT: If you want to use GPT to help you adapt the code, you can copy the relevant code and send it to GPT for suggestions or improvements. Here is an example of how you might find and modify a component: ### Example: Accessing and Modifying a Component 1. Access the GitHub Repository: - Go to the Pipedream GitHub repository. 2. Find the Component: - Navigate to the specific component you are interested in. For example, if you are looking for the Chat action, you can find it in the components directory. 3. Clone the Repository: bash git clone https://github.com/pipedreamhq/pipedream.git cd pipedream 4. Modify the Code: - Open the component file in your favorite text editor or IDE. - Make the necessary changes to the code. 5. Send the Code to GPT: - Copy the modified code and send it to GPT for further suggestions or improvements. ### Example Component Code Here is an example of a Pipedream component: ``` import { axios } from “@pipedream/platform” export default defineComponent({ props: { openai: { type: “app”, app: “openai”, } }, async run({steps, $}) { return await axios($, { url: "https://api.openai.com/v
what is wrong with this code? the data I want appears in the console log in a readable structure but it won’t send that structure to the pipedream return.
import { axios } from "@pipedream/platform";
export default {
key: "shopify-get-product-categories",
name: "Get Product Categories",
description: "Fetch the product categories (taxonomy nodes) for a given product ID using Shopify GraphQL API.",
version: "0.1.0",
type: "action",
props: {
shopify_developer_app: {
type: "app",
app: "shopify_developer_app",
},
productId: {
type: "string",
label: "Product ID",
description: "The ID of the product for which to fetch the categories.",
},
},
async run({ $ }) {
const query = `
query getProductCategories($id: ID!) {
product(id: $id) {
id
title
standardizedProductType {
productTaxonomyNode {
id
fullName
isLeaf
isRoot
name
}
}
}
}
`;
const variables = {
id: `gid://shopify/Product/${this.productId}`,
};
try {
const response = await axios($, {
method: "post",
url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`,
headers: {
"X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`,
"Content-Type": "application/json",
},
data: {
query,
variables,
},
});
// Log the entire response to inspect the structure
console.log('Full Response:', JSON.stringify(response, null, 2));
// Return the expected data if structure is correct
if (response.data && response.data.data && response.data.data.product && response.data.data.product.standardizedProductType) {
const productTaxonomyNode = response.data.data.product.standardizedProductType.productTaxonomyNode;
return productTaxonomyNode;
} else {
throw new Error("Unexpected response structure");
}
} catch (error) {
console.error("Error fetching product categories:", error.message);
throw error;
}
},
};
The issue with your code lies in the way you are checking the response structure and the return statement. The & symbols in the condition should be replaced with &&. Additionally, ensure that you are returning the correct structure from the response. Here is the corrected version of your code: ``` import { axios } from “@pipedream/platform”; export default { key: “shopify-get-product-categories”, name: “Get Product Categories”, description: “Fetch the product categories (taxonomy nodes) for a given product ID using Shopify GraphQL API.”, version: “0.1.0”, type: “action”, props: { shopify_developer_app: { type: “app”, app: “shopify_developer_app”, }, productId: { type: “string”, label: “Product ID”, description: “The ID of the product for which to fetch the categories.”, }, }, async run({ $ }) { const query = query getProductCategories($id: ID!) { product(id: $id) { id title standardizedProductType { productTaxonomyNode { id fullName isLeaf isRoot name } } } } ; const variables = { id: gid://shopify/Product/${this.productId}, }; try { const response = await axios($, { method: “post”, url: https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json), headers: { “X-Shopify-Access-Token”: ${this.shopify_developer_app.$auth.access_token}, “Content-Type”: “application/json”, }, data: { query, variables, }, }); // Log the entire response to inspect the structure console.log(‘Full Response:’, JSON.stringify(response, null, 2)); // Return the expected data if structure is correct if (response.data && response.data.data && response.data.data.product && response.data.data.product.standardizedProductType) { const productTaxonomyNode = response.data.data.product.standardizedProductType.productTaxonomyNode; return productTaxonomyNode; } else { throw new Error("
my return is now:
{“$return_value”:{“error”:“Unexpected response structure”}}
When I want the responseto be the data that is going to the log:
Full Response: {
“data”: {
“product”: {
“id”: “gid://shopify/Product/8709393219830”,
“title”: “Death Is Not The End - The Archival Recordings Of Constantin Brailoiu, 1913-1953 (Cassette)”,
“standardizedProductType”: {
“productTaxonomyNode”: {
“id”: “gid://shopify/ProductTaxonomyNode/4149”,
“fullName”: “Media > Music & Sound Recordings > Music Cassette Tapes”,
“isLeaf”: true,
“isRoot”: false,
“name”: “Music Cassette Tapes”
}
}
}
},
“extensions”: {
“cost”: {
“requestedQueryCost”: 3,
“actualQueryCost”: 3,
“throttleStatus”: {
“maximumAvailable”: 2000,
“currentlyAvailable”: 1997,
“restoreRate”: 100
}
}
}
}
so the pipedream return should be somethign similar to:
{
“data”: {
“product”: {
“id”: “gid://shopify/Product/8709393219830”,
“title”: “Death Is Not The End - The Archival Recordings Of Constantin Brailoiu, 1913-1953 (Cassette)”,
“standardizedProductType”: {
“productTaxonomyNode”: {
“id”: “gid://shopify/ProductTaxonomyNode/4149”,
“fullName”: “Media > Music & Sound Recordings > Music Cassette Tapes”,
“isLeaf”: true,
“isRoot”: false,
“name”: “Music Cassette Tapes”
}
}
}
},
To ensure that your Pipedream component returns the desired response structure, you need to make sure that the data returned from the axios request is properly formatted and returned from the run method. Here’s an example of how you can structure your component to achieve this: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { shopify_developer_app: { type: "app", app: "shopify_developer_app", }, }, async run({ steps, $ }) { const data = { query: `{ product(id: "gid://shopify/Product/8709393219830") { id title standardizedProductType { productTaxonomyNode { id fullName isLeaf isRoot name } } } }`, }; const response = await axios($, { method: "post", url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`, headers: { "X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`, "Content-Type": `application/json`, }, data, }); // Return the desired response structure return response; }, }); In this example: 1. The axios request is made to the Shopify GraphQL endpoint. 2. The response from the axios request is directly returned from the run method. This should ensure that the response structure you get in Pipedream matches the desired format you provided. If you encounter any issues or need further customization, please let me know!
add a prop field so I can dynamically enter the product ID
To add a prop field that allows you to dynamically enter the product ID, you can use dynamic props in your Pipedream component. Here’s an example of how you can achieve this: 1. Define the initial prop that will trigger the dynamic prop rendering. 2. Use the additionalProps method to dynamically add the product ID field based on the value of the initial prop. Here’s a sample component demonstrating this: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { triggerField: { type: "string", label: "Trigger Field", description: "Select an option to dynamically add the product ID field", options: [ "Option 1", "Option 2", ], reloadProps: true, }, }, async additionalProps() { const props = {}; if (this.triggerField) { props.productId = { type: "string", label: "Product ID", description: "Enter the product ID", }; } return props; }, async run({ steps, $ }) { // Your code here return { triggerField: this.triggerField, productId: this.productId, }; }, }); ### Explanation: 1. Initial Prop (triggerField): This prop is used to trigger the dynamic rendering of the productId field. It has the reloadProps field set to true, which ensures that the additionalProps method is called whenever the value of this prop changes. 2. Dynamic Prop (productId): The additionalProps method checks if the triggerField has a value. If it does, it dynamically adds the productId field to the component’s props. 3. Run Method: The run method returns the values of the triggerField and productId props. This example demonstrates how to dynamically add a prop field based on the value of another prop. You can customize the logic in the additionalProps method to fit your specific use case.
sorry. that was more than I need. I just need a prop field where i can enter the product ID.
Certainly! Here’s a simple Pipedream component with a prop field where you can enter the product ID: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { productId: { type: "string", label: "Product ID", description: "Enter the product ID", }, }, async run({ steps, $ }) { // Use the product ID in your code const productId = this.productId; // Example API request using the product ID const response = await axios($, { url: `https://api.example.com/products/${productId}`, headers: { Authorization: `Bearer YOUR_API_KEY`, }, }); return response; }, }); In this component: - The props object defines a productId prop where you can enter the product ID. - The run method uses the productId prop to make an API request. You can replace the example API URL and headers with the actual API details you need to use.
add a product ID prop field to this code please:
import { axios } from "@pipedream/platform";
export default defineComponent({
props: {
shopify_developer_app: {
type: "app",
app: "shopify_developer_app",
},
},
async run({ steps, $ }) {
const data = {
query: `{
product(id: "gid://shopify/Product/8709393219830") {
id
title
standardizedProductType {
productTaxonomyNode {
id
fullName
isLeaf
isRoot
name
}
}
}
}`,
};
const response = await axios($, {
method: "post",
url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`,
headers: {
"X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`,
"Content-Type": `application/json`,
},
data,
});
// Return the desired response structure
return response;
},
});
Sure, I can help you add a productId prop field to your code. Here’s the updated code with the productId prop field: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { shopify_developer_app: { type: "app", app: "shopify_developer_app", }, productId: { type: "string", label: "Product ID", description: "The ID of the product to query", }, }, async run({ steps, $ }) { const data = { query: `{ product(id: "${this.productId}") { id title standardizedProductType { productTaxonomyNode { id fullName isLeaf isRoot name } } } }`, }; const response = await axios($, { method: "post", url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`, headers: { "X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`, "Content-Type": `application/json`, }, data, }); // Return the desired response structure return response; }, }); In this updated code, I added a productId prop field that allows you to dynamically pass the product ID to the query. This makes the component more flexible and reusable.
Invalid global id ‘8709393219830’
I think it needs to be in the format:
product(id: “gid://shopify/Product/8709393219830”)
so the product ID from the propfield is apended to that format
It seems like you’re trying to format a Shopify product ID correctly for use in a GraphQL query. The error message “Invalid global id ‘8709393219830’” suggests that the ID needs to be in a specific format. To format the product ID correctly, you need to wrap it in the gid://shopify/Product/ prefix. Here’s how you can do that in a Pipedream component: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { shopify: { type: "app", app: "shopify", }, productId: { type: "string", label: "Product ID", }, }, async run({ steps, $ }) { const formattedProductId = `gid://shopify/Product/${this.productId}`; const query = ` { product(id: "${formattedProductId}") { id title } } `; const response = await axios($, { url: "https://your-shopify-store.myshopify.com/admin/api/2021-07/graphql.json", method: "POST", headers: { "X-Shopify-Access-Token": this.shopify.$auth.api_key, "Content-Type": "application/json", }, data: { query, }, }); return response.data; }, }); In this example: 1. The productId prop is used to input the product ID. 2. The formattedProductId variable is created by appending the gid://shopify/Product/ prefix to the productId. 3. The formatted ID is used in the GraphQL query. 4. The query is sent to the Shopify GraphQL endpoint using axios. Make sure to replace "https://your-shopify-store.myshopify.com/admin/api/2021-07/graphql.json" with the actual URL of your Shopify store’s GraphQL endpoint. If you need further assistance or if this doesn’t resolve your issue, please provide more details about your workflow or the specific error you’re encountering.
this is a method to update the product categories. I want a series of menu options for the prop fields but its not working right now. any obvious mistake?
import { axios } from "@pipedream/platform";
export default defineComponent({
props: {
shopify_developer_app: {
type: "app",
app: "shopify_developer_app",
},
product_id: {
type: "string",
description: "The ID of the product to update.",
},
category: {
type: "string",
description: "The top-level category for the product.",
options: ["Media"],
},
subcategory: {
type: "string",
description: "The subcategory for the product.",
options: ({ category }) => {
const taxonomy = {
Media: {
"Music & Sound Recordings": {
"Records & LPs": "gid://shopify/ProductTaxonomyNode/4150",
"Music Cassette Tapes": "gid://shopify/ProductTaxonomyNode/4149",
"Music CDs": "gid://shopify/ProductTaxonomyNode/4148",
"Digital Music Downloads": "gid://shopify/ProductTaxonomyNode/4147",
},
Videos: {
DVDs: "gid://shopify/ProductTaxonomyNode/4140",
"Blu-ray": "gid://shopify/ProductTaxonomyNode/13605",
},
},
};
if (category && taxonomy[category]) {
return Object.keys(taxonomy[category]);
}
return [];
},
},
type: {
type: "string",
description: "The specific type for the product.",
options: ({ category, subcategory }) => {
const taxonomy = {
Media: {
"Music & Sound Recordings": {
"Records & LPs": "gid://shopify/ProductTaxonomyNode/4150",
"Music Cassette Tapes": "gid://shopify/ProductTaxonomyNode/4149",
"Music CDs": "gid://shopify/ProductTaxonomyNode/4148",
"Digital Music Downloads": "gid://shopify/ProductTaxonomyNode/4147",
},
Videos: {
DVDs: "gid://shopify/ProductTaxonomyNode/4140",
"Blu-ray": "gid://shopify/ProductTaxonomyNode/13605",
},
},
};
if (category && subcategory && taxonomy[category] && taxonomy[category][subcategory]) {
return Object.keys(taxonomy[category][subcategory]);
}
return [];
},
},
},
async run({ steps, $ }) {
const taxonomy = {
Media: {
"Music & Sound Recordings": {
"Records & LPs": "gid://shopify/ProductTaxonomyNode/4150",
"Music Cassette Tapes": "gid://shopify/ProductTaxonomyNode/4149",
"Music CDs": "gid://shopify/ProductTaxonomyNode/4148",
"Digital Music Downloads": "gid://shopify/ProductTaxonomyNode/4147",
},
Videos: {
DVDs: "gid://shopify/ProductTaxonomyNode/4140",
"Blu-ray": "gid://shopify/ProductTaxonomyNode/13605",
},
},
};
const category = this.category;
const subcategory = this.subcategory;
const type = this.type;
if (!category || !subcategory || !type) {
throw new Error("Please select a valid category, subcategory, and type.");
}
const taxonomyNodeId = taxonomy[category][subcategory][type];
const mutation = `mutation {
productUpdate(input: {
id: "gid://shopify/Product/${this.product_id}",
standardizedProductType: {
productTaxonomyNodeId: "${taxonomyNodeId}"
}
}) {
product {
id
title
standardizedProductType {
productTaxonomyNode {
id
fullName
isLeaf
isRoot
name
}
}
}
userErrors {
field
message
}
}
}`;
const data = {
query: mutation,
};
const response = await axios($, {
method: "post",
url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`,
headers: {
"X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`,
"Content-Type": `application/json`,
},
data,
});
return response;
},
});
It looks like you have a good start, but there are a few issues with your options method for the subcategory and type props. The options method should be an async function and should return an array of objects with label and value properties. Here’s a corrected version of your component: ``` import { axios } from “@pipedream/platform”; export default defineComponent({ props: { shopify_developer_app: { type: “app”, app: “shopify_developer_app”, }, product_id: { type: “string”, description: “The ID of the product to update.”, }, category: { type: “string”, description: “The top-level category for the product.”, options: [“Media”], }, subcategory: { type: “string”, description: “The subcategory for the product.”, async options({ category }) { const taxonomy = { Media: { “Music & Sound Recordings”: { “Records & LPs”: “gid://shopify/ProductTaxonomyNode/4150”, “Music Cassette Tapes”: “gid://shopify/ProductTaxonomyNode/4149”, “Music CDs”: “gid://shopify/ProductTaxonomyNode/4148”, “Digital Music Downloads”: “gid://shopify/ProductTaxonomyNode/4147”, }, Videos: { DVDs: “gid://shopify/ProductTaxonomyNode/4140”, “Blu-ray”: “gid://shopify/ProductTaxonomyNode/13605”, }, }, }; if (category && taxonomy[category]) { return Object.keys(taxonomy[category]).map(subcat => ({ label: subcat, value: subcat, })); } return ; }, }, type: { type: “string”, description: “The specific type for the product.”, async options({ category, subcategory }) { const taxonomy = { Media: { “Music & Sound Recordings”: { “Records & LPs”: “gid://shopify/ProductTaxonomyNode/4150”, “Music Cassette Tapes”: “gid://shopify/ProductTaxonomyNode/4149”, “Music CDs”: “gid://shopify/ProductTaxonomyNode/4148”, "
does pipedream have the capability to dynamically generally subcategory propfields based on which master prop field is selected?
so in this case, once media is selected in the master prop field, the subcategoryprop field should dynamically populate with “Music & Sound Recordings” or “Video” as options
Yes, Pipedream has the capability to dynamically generate subcategory prop fields based on the selection of a master prop field. This is achieved using dynamic props. Below is an example of how you can implement this: 1. Define the master prop with the reloadProps field set to true. 2. Implement the additionalProps method to dynamically generate the subcategory prop fields based on the selected value of the master prop. Here’s an example component that demonstrates this: import { defineComponent } from "@pipedream/types"; export default defineComponent({ props: { masterCategory: { type: "string", label: "Master Category", options: [ { label: "Media", value: "media" }, { label: "Other", value: "other" }, ], reloadProps: true, }, }, async additionalProps() { const props = {}; if (this.masterCategory === "media") { props.subCategory = { type: "string", label: "Subcategory", options: [ { label: "Music & Sound Recordings", value: "music" }, { label: "Video", value: "video" }, ], }; } else if (this.masterCategory === "other") { props.subCategory = { type: "string", label: "Subcategory", options: [ { label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }, ], }; } return props; }, async run({ steps, $ }) { // Your code here }, }); In this example: - The masterCategory prop is defined with reloadProps: true. - The additionalProps method checks the value of masterCategory and dynamically generates the subCategory prop with the appropriate options. This approach allows you to dynamically populate subcategory prop fields based on the selected value of the master prop field.
can you correct this?
import { axios } from "@pipedream/platform";
export default defineComponent({
props: {
shopify_developer_app: {
type: "app",
app: "shopify_developer_app",
},
product_id: {
type: "string",
description: "The ID of the product to update.",
},
masterCategory: {
type: "string",
label: "Master Category",
options: [
{ label: "Media", value: "media" },
{ label: "Other", value: "other" },
],
reloadProps: true,
},
},
async additionalProps() {
const taxonomy = {
media: {
"Music & Sound Recordings": {
"Records & LPs": "gid://shopify/ProductTaxonomyNode/4150",
"Music Cassette Tapes": "gid://shopify/ProductTaxonomyNode/4149",
"Music CDs": "gid://shopify/ProductTaxonomyNode/4148",
"Digital Music Downloads": "gid://shopify/ProductTaxonomyNode/4147",
},
"Videos": {
"DVDs": "gid://shopify/ProductTaxonomyNode/4140",
"Blu-ray": "gid://shopify/ProductTaxonomyNode/13605",
},
},
other: {
"Option 1": "gid://shopify/ProductTaxonomyNode/1001",
"Option 2": "gid://shopify/ProductTaxonomyNode/1002",
},
};
`const props = {};`
`if (this.masterCategory === "media") {`
`props.subCategory = {`
`type: "string",`
`label: "Subcategory",`
`options: Object.keys(taxonomy.media).map(subcat => ({`
`label: subcat,`
`value: subcat,`
`})),`
`reloadProps: true,`
`};`
`} else if (this.masterCategory === "other") {`
`props.subCategory = {`
`type: "string",`
`label: "Subcategory",`
`options: Object.keys(taxonomy.other).map(subcat => ({`
`label: subcat,`
`value: subcat,`
`})),`
`reloadProps: true,`
`};`
`}`
`if (this.subCategory) {`
`const subcategoryOptions = taxonomy[this.masterCategory][this.subCategory];`
`props.type = {`
`type: "string",`
`label: "Type",`
`options: Object.keys(subcategoryOptions).map(type => ({`
`label: type,`
`value: subcategoryOptions[type],`
`})),`
`};`
`}`
`return props;`
},
async run({ steps, $ }) {
const taxonomy = {
media: {
"Music & Sound Recordings": {
"Records & LPs": "gid://shopify/ProductTaxonomyNode/4150",
"Music Cassette Tapes": "gid://shopify/ProductTaxonomyNode/4149",
"Music CDs": "gid://shopify/ProductTaxonomyNode/4148",
"Digital Music Downloads": "gid://shopify/ProductTaxonomyNode/4147",
},
"Videos": {
"DVDs": "gid://shopify/ProductTaxonomyNode/4140",
"Blu-ray": "gid://shopify/ProductTaxonomyNode/13605",
},
},
other: {
"Option 1": "gid://shopify/ProductTaxonomyNode/1001",
"Option 2": "gid://shopify/ProductTaxonomyNode/1002",
},
};
`const category = this.masterCategory;`
`const subcategory = this.subCategory;`
`const type = this.type;`
`if (!category || !subcategory || !type) {`
`throw new Error("Please select a valid category, subcategory, and type.");`
`}`
`const taxonomyNodeId = taxonomy[category][subcategory][type];`
`const mutation = `mutation {`
`productUpdate(input: {`
`id: "gid://shopify/Product/${this.product_id}",`
`standardizedProductType: {`
`productTaxonomyNodeId: "${taxonomyNodeId}"`
`}`
`}) {`
`product {`
`id`
`title`
`standardizedProductType {`
`productTaxonomyNode {`
`id`
`fullName`
`isLeaf`
`isRoot`
`name`
`}`
`}`
`}`
`userErrors {`
`field`
`message`
`}`
`}`
`}`;`
`const data = {`
`query: mutation,`
`};`
`const response = await axios($, {`
`method: "post",`
`url: `https://${this.shopify_developer_app.$auth.shop_id}.[myshopify.com/admin/api/2024-04/graphql.json](http://myshopify.com/admin/api/2024-04/graphql.json)`,`
`headers: {`
`"X-Shopify-Access-Token": `${this.shopify_developer_app.$auth.access_token}`,`
`"Content-Type": `application/json`,`
`},`
`data,`
`});`
`return response;`
},
});
Certainly! Here is the corrected version of your Pipedream component code: ``` import { axios } from “@pipedream/platform”; export default defineComponent({ props: { shopify_developer_app: { type: “app”, app: “shopify_developer_app”, }, product_id: { type: “string”, description: “The ID of the product to update.”, }, masterCategory: { type: “string”, label: “Master Category”, options: [ { label: “Media”, value: “media” }, { label: “Other”, value: “other” }, ], reloadProps: true, }, }, async additionalProps() { const taxonomy = { media: { “Music & Sound Recordings”: { “Records & LPs”: “gid://shopify/ProductTaxonomyNode/4150”, “Music Cassette Tapes”: “gid://shopify/ProductTaxonomyNode/4149”, “Music CDs”: “gid://shopify/ProductTaxonomyNode/4148”, “Digital Music Downloads”: “gid://shopify/ProductTaxonomyNode/4147”, }, Videos: { DVDs: “gid://shopify/ProductTaxonomyNode/4140”, “Blu-ray”: “gid://shopify/ProductTaxonomyNode/13605”, }, }, other: { “Option 1”: “gid://shopify/ProductTaxonomyNode/1001”, “Option 2”: “gid://shopify/ProductTaxonomyNode/1002”, }, }; const props = {}; if (this.masterCategory === “media”) { props.subCategory = { type: “string”, label: “Subcategory”, options: Object.keys(taxonomy.media).map((subcat) => ({ label: subcat, value: subcat, })), reloadProps: true, }; } else if (this.masterCategory === “other”) { props.subCategory = { type: “string”, label: “Subcategory”, options: Object.keys(taxonomy.other).map((subcat) => ({ label: subcat, value: subcat, })), reloadProps: true, }; } if (this.subCategory) { const subcategory