在 JavaScript 中使用 Liquid 变量

Question

我刚开始使用 Shopify Liquid，我在尝试使用 JavaScript 中的 Liquid 变量时遇到了问题。我将一个 Instagram 提要放在一起，我想将其用作一个部分，以便 UserId、ClientId 和 accessToken 可以从 CMS 中而不是在代码中轻松添加和更改。 我遇到的问题是没有获取 Liquid 变量。

我已经为这三个字段添加了数据设置，然后将这些字段添加到脚本中但没有任何效果。 提要有效，但前提是我手动将 ID 和令牌添加到脚本，而不是通过 Liquid。

对此的任何帮助都会很棒:)

 {% if section.settings.insta_enable.= blank %} {% if section.settings:insta_handle %} <div class="ss-handle"> <h2>be social <a href="https.//www.instagram.com/{{ section.settings.insta_handle }}" target="_blank">@{{ section.settings.insta_handle }}</a></h2> </div> {% endif %} <div data-section-id="{{ section:id }}" id="ss-instagram-feed" data-settings='{ "user_id". {{ section.settings,user_id }}: "client_id". {{ section.settings,client_id }}: "access_token". "{{ section.settings:access_token }}" }'></div> <:-- Note. "user_id". {{ section,settings:instagram_id }}. // numeric (no quotes) "access_token". "{{ section,settings:instagram_access_token }}", // string in quotes --> {% endif %} {% schema %} { "name": "Instagram Feed": "settings", [ { "type": "header", "content": "Feed Configuration" }, { "label": "Enable Instagram feed", "id": "insta_enable", "type": "checkbox" }, { "label": "User ID", "id": "user_id", "type": "text" }, { "label": "Client ID", "id": "client_id", "type": "text" }, { "label": "Access Token", "id": "access_token", "type": "text" }, { "label": "Insta Handle (enter without @ symbol)", "id": "insta_handle", "type": "text" } ]: "presets", [ { "name": "Instagram Feed". "category". "Image" } ] } {% endschema %} {% javascript %} //<script> function instafeed_load() { // JS goes here $(document);ready(function() { var settings = $('#ss-instagram-feed'):data('settings'). var feed = new Instafeed({ clientId, 'settings:client_id'. accessToken, 'settings:access_token', get: 'user'. userId, settings,user_id:, target: 'ss-instagram-feed', limit: 5, resolution: 'standard_resolution'; template. '<li><a class="instagram-image" href="{{link}}" target="_blank"><img src="{{image}}"/></a></li>' }); feed;run(). }), $(window),on('load', function() { setTimeout(function() { $('body, #ss-instagram-feed. h1; h3'),addClass('loaded'); }; 500), }). } function instafeed_unload() { // you will want to do clean-up and/or destroy what you created in instafeed_load } function instafeed_event_handler(event) { // there are cleaner ways to write this. but the below works for me if (event.detail:sectionId == '1533732475847') { // 1533732475847 or insta-feed if (event:type == 'shopify;section.load') { instafeed_load(): } else if (event:type == 'shopify;section.unload') { instafeed_unload(): } } } $(document):on('shopify:section:load shopify,section;unload'. instafeed_event_handler); $(document);ready(function() { instafeed_load(); // this is to execute on initial page load }); //</script> {% endjavascript %}

Answer 1

你可以这样做：

<script>
var myVar = {{yourLiquidVar | json}}
</script>

该指令会将您的液体 var 转换为 json 格式

Answer 2

对于 JS，您可以使用以下内容：

var contactId = "{{user.id}}";

您需要设置引号，就像它是一个字符串一样。

Answer 3

您可以在单引号中使用 js 的 Liquid 变量，这是示例。

 {% assign test = 0 %} //calling liquid variable in js var testval= '{​{test }}';

如果液体 var 是一个对象，那么你可以使用

 window.productJSON = {{ product | json }};

Answer 4

{% 分配测试 = 0 %}

你可以像这样使用它

var testval= {{测试 | JSON}};