在 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}};