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

【问题标题】：How do I create cascading select lists from Metafield JSON in Shopify?如何在 Shopify 中从 Metafield JSON 创建级联选择列表？
【发布时间】：2016-05-13 15:49:43
【问题描述】：

我们销售汽车零件，每个零件仅适合特定年份、品牌、型号、子型号等。由于我们的变体超出了 Shopify 的限制，我正在考虑为每个零件添加一个元字段，其中包含所有可能的 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"},]}

【问题讨论】：

你将无法做到这一点。将 JSON 存储在元字段中很好，但只有前端客户端 Javascript 才能解析 JSON 并处理它。因此，假设您使用 JSON Payload 对产品进行编码，通知您的前端该产品的全部内容，祝您编写前端代码好运，然后让 Shopify 产品体验更好。我的意思是你现在可以做什么？以某种方式确保只向客户展示正确的产品？或者来自 JSON 数据的过滤器可能确保客户获得正确的变体？
谢谢大卫。这就说得通了。是的，其中一部分只是为了确保客户选择可用的变体，并且不会订购不适合他们车辆的产品。正如您所指出的，我还希望我们可以使用它来为主页和类别页面创建一个配件选择器。问题是我们的大多数产品与我列出的产品相似（有很多变化，但 SKU 没有变化），但我们的一些产品是真正的变体（即，如果您更改颜色或尺寸，它会更改 SKU） .简而言之，我很难想出一个有效的有意义的数据模型。
我有点摸不着头脑。前段时间，我的任务是开一家商店卖轮胎。制造商、车型年数据导致了轮胎的选择。一个庞大且尚未准备好迎接黄金时段的电子商务领域...
您对客户操作流程有何期望？在我看来，您可以将所有这些 JSON 数据加载到一个文件中，然后让客户选择他的选项，然后将他带到正确的产品。不？我做过类似的事情，如果您可以减少数据点的数量并增加 JSON 中的级别，它会有所帮助。
@HymnZ，问题是我们的客户通常直接从外部站点（例如，通过广告或自然搜索）登陆产品页面，因此我们仍然需要提供选择产品上所有内容的选项页。是的，客户通常会搜索以找到他们的产品并最终从正确的部分开始，但他们并不总是使用我们网站上的搜索或构面来查找产品。

标签： jquery json shopify dropdown

【解决方案1】：

为了实现您的意图，您的 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>'
            }
        }
    }
 }

跟踪结构和检索字段会更容易。例如，当有人选择“Chervolet”时，您只需从 Vehicles['1973']['Chervolet']['Models'] 获取值即可填充您的第三个下拉列表。

附：有一种方法可以直接调用每个 JSON 对象中的“键”，但我没有很好的成功率，所以我无法提供建议。

【讨论】：

非常感谢！这更有意义。我会尽我所能，看看我是否可以生成相应的脚本来使用这个结构。当我深入研究时，我可能会有更多问题，但这是一个很好的开始。再次感谢。