jquery - How do I create cascading select lists from Metafield JSON in Shopify?
We sell auto parts and each part only fits certain years, makes, models, submodels, etc. Since our variants exceed Shopify's limits, I'm considering adding a metefield for each part that would include a JSON description of all the possible combinations available for that vehicle. I'd like to parse that data into a series of cascading dropdown select lists on the product page. Using the JSON example below, if you choose 1973 in the first select list, then you could choose Chevrolet or GMC in the second select list. The third list would show the available models, and a forth select list would allow users to choose Liters, and so on.В
Unfortunately, I don't know how to feed this JSON data into select lists in the product liquid, and I'm not even sure if the JSON is formatted properly. Can anyone help me get started or lead me to a resource that could help me learn next steps for displaying this data on my Shopify product liquid. Again, keep in mind that this JSON will be stored in a metafield. В
The following is an example of the metafield JSON for one part:
{"VEHICLES":[{"Year":"1973","Make":"Chevrolet","Model":"K20 Pickup","Submodel":"","Liter":"4.1"},{"Year":"1973","Make":"Chevrolet","Model":"K20 Pickup","Submodel":"","Liter":"4.8"},{"Year":"1973","Make":"Chevrolet","Model":"K20 Pickup","Submodel":"","Liter":"5.0"},{"Year":"1973","Make":"Chevrolet","Model":"K20 Pickup","Submodel":"","Liter":"5.7"},{"Year":"1973","Make":"Chevrolet","Model":"K20 Pickup","Submodel":"","Liter":"7.4"},{"Year":"1973","Make":"Chevrolet","Model":"K30 Pickup","Submodel":"","Liter":"4.1"},{"Year":"1973","Make":"Chevrolet","Model":"K30 Pickup","Submodel":"","Liter":"4.8"},{"Year":"1973","Make":"Chevrolet","Model":"K30 Pickup","Submodel":"","Liter":"5.0"},{"Year":"1973","Make":"Chevrolet","Model":"K30 Pickup","Submodel":"","Liter":"5.7"},{"Year":"1973","Make":"Chevrolet","Model":"K30 Pickup","Submodel":"","Liter":"7.4"},{"Year":"1973","Make":"GMC","Model":"K25/K2500 Pickup","Submodel":"","Liter":"4.1"},{"Year":"1973","Make":"GMC","Model":"K25/K2500 Pickup","Submodel":"","Liter":"4.8"},{"Year":"1973","Make":"GMC","Model":"K25/K2500 Pickup","Submodel":"","Liter":"5.7"},{"Year":"1973","Make":"GMC","Model":"K25/K2500 Pickup","Submodel":"","Liter":"7.4"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"4.1"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"4.8"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"5.0"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"5.0"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"5.7"},{"Year":"1973","Make":"GMC","Model":"K35/K3500 Pickup","Submodel":"","Liter":"7.4"},]}
Answer
Solution:
In order to achieve what you intend, you JSON structure should also be in the same levels as you described to make it easier.
Have your data arranged like this:
var Vehicles = {
'Years' : ['1973'],
'1973' : {
'Make' : ['Chevrolet', 'GMC'],
'Chervolet' : {
'Models' : ['K20 Pickup', 'K30 Pickup'],
'K20 Pickup' : {
'Liters' : ['4.1', '4.8', '5.0', '5.7', '7.4'],
'4.1' : '<link>',
'4.8' : '<link>',
'5.0' : '<link>',
'5.7' : '<link>',
'7.4' : '<link>'
},
'K30 Pickup' : {
'Liters' : ['4.1', '4.8', '5.0', '5.7', '7.4'],
'4.1' : '<link>',
'4.8' : '<link>',
'5.0' : '<link>',
'5.7' : '<link>',
'7.4' : '<link>'
}
},
'GMC' : {
'Models' : ['K25/K2500 Pickup', 'K35/K3500 Pickup'],
'K25/K2500 Pickup' : {
'Liters' : ['4.1', '4.8', '5.0', '5.7', '7.4'],
'4.1' : '<link>',
'4.8' : '<link>',
'5.0' : '<link>',
'5.7' : '<link>',
'7.4' : '<link>'
},
'K35/K3500 Pickup' : {
'Liters' : ['4.1', '4.8', '5.0', '5.7', '7.4'],
'4.1' : '<link>',
'4.8' : '<link>',
'5.0' : '<link>',
'5.7' : '<link>',
'7.4' : '<link>'
}
}
}
}
It'll be easier to track the structure and also to retrieve the fields. For example, when someone selects "Chervolet", you just need to get values fromVehicles['1973']['Chervolet']['Models'] to populate your third dropdown.
P.S. There is a way where you can directly call the "keys" in each JSON object but I have not had a good success rate with it so I can't advice.
Source
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.