我需要一种变通方法来将带有破折号的Liquid变量分配给javascript变量名称

Question

我的产品页面上有一个简短的表格，供客户提交其电子邮件地址。 Javascript用于在我用来管理电子邮件订阅的Klaviyo电子邮件系统中，在电子邮件地址旁边分配自定义属性。

我已经能够使用Liquid输出将一些Shopify产品信息（例如产品ID）作为这些自定义属性之一发送。 但是，我想发送一个SKU，句柄或产品名称，该名称不起作用，因为此数据是使用破折号作为分隔符来存储的。 这会导致Javascript解析器出现问题

<script type="text/javascript">
    KlaviyoSubscribe.attachToForms('#email_signup', {
        hide_form_on_success: true,
        custom_success_message: true,
        custom_error_message: true,
        extra_properties:{ //Fully customisable - call them what you want
            PROPERTY_{{ Shopify.Liquid.Variable }}:true
        }
    });
</script> 

在上面的示例中， PROPERTY_{{ product.id }}:true是可以的。 这将解析为类似于PROPERTY_123456789:true ，该内容将被正确解析并传输。

但是， PROPERTY_{{ product.handle }}:true会变成PROPERTY_product-handle-example:true

此处的破折号不在javascript中解析。 我一直在尝试将Liquid变量放入JS字符串之类的东西，但没有得到它。 我敢肯定这很简单，但是我看不到这棵树上的木头。

Answer 1

您可以使用JSON过滤器：

{{ Shopify.Liquid.Variable | json }}

如此处所述： https : //help.shopify.com/en/themes/liquid/filters/additional-filters#json

HTH

Answer 2

我想您的解析器在将javascript发送到客户端之前确实可以处理该页面，但是我想从您的角度来看它是正确的，您可以使用['property'] 。

从准备者的角度来看应该没问题

KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true,
    custom_success_message: true,
    custom_error_message: true,
    extra_properties:{ //Fully customisable - call them what you want
        ['PROPERTY_{{ Shopify.Liquid.Variable }}']:true
    }
});