如何在Shopify中从Metafield JSON创建级联选择列表?

时间:2016-05-13 15:49:44

标签: jquery json shopify dropdown

我们销售汽车零件,每个零件只适合某些年份,品牌,型号,子模型等。由于我们的变体超出Shopify的限制,我正在考虑为每个零件添加一个metefield,其中包括所有可能的JSON描述可用于该车辆的组合。我想将这些数据解析为产品页面上的一系列级联下拉列表选择列表。使用下面的JSON示例,如果您在第一个选择列表中选择1973,则可以在第二个选择列表中选择雪佛兰或GMC。第三个列表将显示可用的模型,第四个选择列表将允许用户选择升,等等。

不幸的是,我不知道如何将这个JSON数据提供给产品液体中的选择列表,我甚至不确定JSON是否格式正确。任何人都可以帮助我开始或引导我一个资源,可以帮助我学习在Shopify产品液体上显示这些数据的后续步骤。同样,请记住,此JSON将存储在元字段中。

以下是一个部分的元字段JSON示例:

{"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"},]}

1 个答案:

答案 0 :(得分:0)

为了实现您的目标,您的JSON结构也应该与您描述的级别相同,以使其更容易。

让您的数据安排如下:

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>'
            }
        }
    }
 }

它更容易跟踪结构并检索字段。例如,当有人选择&#34; Chervolet&#34;时,您只需要从Vehicles['1973']['Chervolet']['Models']获取值以填充您的第三个下拉列表。

P.S。有一种方法可以直接拨打&#34;键&#34;在每个JSON对象中,但我没有很好的成功率,所以我无法建议。